React之状态（state）与生命周期

很多时候，我们的页面数据是动态的。所以，我们需要实时渲染页面：

一、用定时函数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()：组件将要卸载时调用，一些事件监听和定时器需要在此时清除。