React的生命周期

初始化阶段(intialization)

• constructor():
  实现组件对象状态state函数的初始化，包括props, state,在这个生命周期的函数中，一般做一些state的初始化。类比Vue中的created

挂载阶段(mounting)

• componentWillMount():
  在DOM元素挂载前,此时state的变化不会引起DOM的变化，因为DOM元素还没有被渲染挂载。类比Vue中的beforeMount
• render():
  DOM元素的渲染，这里是组件的渲染过程，这个渲染过程当DOM中的元素发生变化的时候就会调用
• componentDidMount():
  组件挂载完毕，此时所有DOM均挂载到页面上。类比Vue中的mounted

更新阶段(Updation)

• 先明确下react组件更新机制。setState引起的state更新或父组件重新render引起的props更新，更新后的state和props相对之前无论是否有变化，都将引起子组件的重新render。

• shouldComponentUpdate: 在更新过程中时 如果这个函数返回false的话 页面本身是不会更新的

• componentWillReceiveProps:当子组件绑定父组件的属性发生更改的时候,会触发这个生命周期函数

• componentWillUpdate: 当组件开始更新之前调用的生命周期函数

• render: 每次更新后都会重新进行渲染

• componentDidUpdate: 组件更新完毕

更新阶段的钩子函数

• shouldComponentUpdate
• componentWillReceiveProps: 这个会返回新旧变更的参数
• componentWillUpdate
• componentDidUpdate
  如果是父组件发生更新的时候, shouldComponentUpdate一定会执行，但是下面的步骤不一定会执行，因为如果这个时候shouldComponentUpdate 返回值为false的话，其实并不会重新刷新页面参数

Tips:

• React生命周期的几个作用：

1、constructor: 一般做组件内部状态的初始化

2、componentWillMount: 一般ajax数据的拉取，定时器的启动等等

3、componentDidMount: 有一些操作是要在DOM加载完成后在执行的，可以写在componentDidMount里面

4、componentWillUnmount: 一般卸载页面后有一些定时器的清除等工作，用于页面的优化设计