很多时候，我们的页面数据是动态的。所以，我们需要实时渲染页面：
一、用定时函数setInterval()
组件（输出当前时间）：
index.js：
这样每隔1秒页面就会重新渲染一次，这样传进去的时间数据也会更新了。
但是，用setInterval()是有问题的（这里就不作深究），所以引入了下面要说的，组件状态和生命周期概念
注意：以下的内容，你必须用class（类）的方式来编写react组件！
二、state
代码其实简单易懂，不需要多说，但有一点，数据都是存在state中，并且更新数据的时候是this.setState();
如果你写过微信小程序的话，这里应该很熟悉，setState()更新数据后悔引发页面相应部分的重新渲染（虚拟DOM，diff算法）。
但是！由于setState()方法是异步的，这就会引发如下的一些问题：
很显然，因为异步，在给counter2赋值的时候，取到的this.state.counter的值还是0，那么如何解决这个问题呢？往下看：
react还提供了该方法的拓展：接受一个函数作为参数
该函数将接收先前的状态作为第一个参数，将此次更新被应用时的props做为第二个参数：
preState中，该状态下counter已经加了1（0+1=1），所以取值的时候就是1了，下一章将单独说明setState这个函数。
三、生命周期
①初始化
1、getDefaultProps()：设置默认props
2、getInitialState()：class语法下没有此钩子函数，直接在constructor中定义this.state。此时可以访问this.props
3、componentWillMount()：组件初始化时调用，整个生命周期只调用一次，此时可以修改state
4、render()：react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时不能更改state了
5、componentDidMount()：组件渲染之后调用，只调用一次。
②更新
6、componentWillReceiveProps(nextProps)：组件初始化时不调用，组件接受新的props时调用。
7、shouldComponentUpdate(nextProps, nextState)：可以在此对比前后两个props和state是否相同，若相同则返回false阻止更新来提升性能
8、componentWillUpdata(nextProps, nextState)：组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state
9、componentDidUpdate()：组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点。
③卸载
10、componentWillUnmount()：组件将要卸载时调用，一些事件监听和定时器需要在此时清除。