react生命周期

一、react 16之前生命周期大的来分为4个阶段

1、第一阶段，初始化(Initial)；初始默认数据

2、第二阶段，组件挂载(Mount)；组件挂载显示在UI上

3、第三阶段，组件的更新(Update)；在state或者props有数据变化

4、第四阶段，组件的卸载(Unmount)；不再调用该组件

在每个阶段中有各自不同的函数代表不同的节点，下图表示各阶段以及各阶段中的关系；

第一阶段initial:

　　初始化state或者props;在react组件中construtor构造中的数据可以看作state的初始化

第二阶段Mount: 

　　组件挂载到页面阶段;有2个函数节点；componentWillMount()  和  componentDidMount()，

　　1、componentWillMount() 将要挂载，

　　　　在render之前调用， 这是在render对初始化state进行修改的一个路径，比如获取缓存的数据。

　　2、render

　　　　创建一个虚拟的DOM用来表示组件的输出

　　3、componentDidMount() 挂载完成，

　　　　render方法执行后会渲染出真实的DOM，可通过方法getDomNode（）获取原生的Dom

　　　　3、1：在render之后调用，比如发送ajax

　　　　3、2：为什么ajax要放在componentDidMount(）之中？

　　因为ajax是异步的，假如ajax在componentWillMount(）中，在componentWillMount中异步请求的数据可能还没获取到，已经render了，可能会导致页面空白，程序出错执行不下去。

第三阶段存在期的update

　　update是指state或者props数据的变化

　　1、state的更改

　　shouldComponentUpdate(nextProps, nextState), 默认返回true, 在此函数中可进行页面渲染的优化，可以减少不必要的render,比如：

shouldComponentUpdate(nextProps, nextState) {
  if (JSON.stringfy(nextState) !== JSON.stringfy(this.state)) {
        return true; // 允许页面重新渲染
    } else {
        return false; // 避免不必要的渲染
    }
}

　　当没有shouldComponentUpdate()时，算法会比较是否为React.PurComponent，如果是React.PurComponent则进行浅比较（使用Object.is()进行比较，如果是负复杂的数据可能比较不出来）没有递归进行深层次的比较；如果是React.Component则进行深比较。对于性能方面推荐使用React.PureComponent，因为state更新或者父组件的props更新会导致render; 而React.Component在state更新和父组件的state更新都会导致render，其实就子组件而言对于父组件没必要的state更新是没有必要重新render的。

　　1.1、componmentWillUpdate()

　　在state或者props变化后并且在页面渲染前调用，在这个函数中不能使用this.setState来修改状态。这个函数调用后就会把nextProps和nextState分别设置到this.props和this.state中。

　　1.2、render（）

　　重新渲染真实的Dom

　　1.3、componentDidUpdate()

　　组件更新结束之后执行，可在这里对渲染好的Dom更改操作

　　2、props更改

　　componentWillReceiveProps(nextProps)

　　在props更改时调用，然后执行1.1-->1.2-->1.3

第四阶段unmonut:

　　componentWillUnmount()

　　卸载组件，做一些清理工作，比如清除组件中使用的定时器，清除componentDidMount中手动创建的DOM元素等，以避免引起内存泄漏。

二、react16.4生命周期

　　生命周期图：参考官网 截图显示如下

　　分为三阶段：挂载、更新、卸载

　　1、第一阶段：挂载

　　　　1.1 constructor()

　　　　　　在组件挂载前调用。在为React.Component内使用constructor(props)构造时，要调用super(props), 否则组件内使用this.props会出错。

　　　　　　这个是非必须的，当需要初始化state的时候需要在constructor()中构造，没有state的初始化时不需要constructor()

　　　　1.2 getDerivedStateFromProps(props, state)

　　　　　　会在render前调用，在后续的初始化挂载和更新时都会调用，返回一个对象来更新state

　　　　1.3 render()

　　　　1.4 componentDidMount

　　　　　　会在组件挂载后立即调用，依赖DOM的初始化可以放在这里

　　　* 去除了componentWillMount()

　　2、第二阶段：更新

　　　　2.1 getDerivedStateFromProps()

　　　　2.2 shouldComponentUpdate()

　　　　2.3 render()

　　　　2.4 getSnapshotBeforeUpdate(prevProps, prevState)

　　　　　　在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()。　　　　　　

　　　　2.5 componentDidUpdate()

　　*删除了componentWillReceiveProps() 和 componentWillUpdate

　　3、第三阶段：卸载

　　componentWillUnmount

上述博文中如有错误或表述有疑问之处，感谢各位小伙伴的积极指出。