码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-11-16 17:21:45      阅读:94      评论:0      收藏:0      [点我收藏+]

标签:interval   声明   react   UI   class   ext   fun   最大   root   

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

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‘)
      );                                                                                    

 

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

标签:interval   声明   react   UI   class   ext   fun   最大   root   

原文地址:http://www.cnblogs.com/toward-the-sun/p/7845031.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!