react学习笔记1之声明组件的两种方式

Posted 2020-10-14 向着太阳生

//定义组件有两种方式，函数和类

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

class Welcome extends React.Component{
    render(){
        return <h1>Hello, {this.props.name}</h1>;
    }
}

ReactDOM.render(
   <Welcome name="kevin"/>,
    document.getElementById(‘root‘)
);

//函数和类都可以定义组件，组件的props是只读的，不管你的组件是通过函数还是类声明的；用类声明组件的最大好处是可以设置组件的状态，通过更新组件的状态从而达到更新组件UI的目的。而函数声明的组件则没有这个功能。
class Welcome extends React.Component{
     constructor(props){
        super(props);
        this.state = {date:new Date()}
        }
       componentDidMount(){
        setInterval(()=>this.tick(),1000)
        }
            tick(){
            this.setState({date:new Date()})
        }
    render(){
        return (
                <h1>
                    Hello, {this.props.name}
                    <span>now:{this.state.date.toLocaleTimeString()}    
                    </span>
                </h1>
                )
            }
        }

      ReactDOM.render(
        <Welcome name="kevin "/>,
        document.getElementById(‘example‘)
      );