react 生命周期函数的详细总结

一、react 生命周期函数

1. 在初始 Initialization 阶段，会触发 constructor() 函数，会进行设置 state和 props。

2. 在挂载Mounting 阶段，先会触发 componentWillMount() 函数，在组件即将被挂载到页面的时候自动执行，挂载前，只会在第一次挂载执行。之后，就会触发render()函数，页面被初次渲染，挂载时。最后，就会触发 componentDidMount() 函数，组件被挂载到页面之后，自动被执行，挂载后，只会在第一次挂载执行。

3. 在更新 Updation阶段，会进行states 或者是props的更新，如下所示：

• 如果是 states 发生改变，先会触发执行 shouldComponentUpdate() 函数，组件被更新之前，它会自动被执行，必须有返回值，返回 true，如果返回false，说明组件不要被更新。之后才会执行 componentWillUpdate() 函数，组件被更新之前，它会自动被执行，但是它是在shouldComponentUpdate之后被执行。如果 shouldComponentUpdate 返回 true，它才会被执行，如果 shouldComponentUpdate返回 false，这个函数就不会被执行了。之后，就会执行render()函数，当组件的state 或者是props发生改变的时候，render 函数就会重新执行。最后，就会执行 componentDidUpdate() 函数，组件更新完成之后，它会被执行。

• 如果是 props 发生改变，先会触发执行 componentWillReceiveProps() 函数，一个组件要从父组件接收参数，只要父组件的 render 函数被重新执行了，子组件的这个生命周期函数就会被执行了。如果这个组件第一次存在于父组件中，不会执行。如果这个组件之前已经存在于父组件中，才会执行。之后就会依次执行 shouldComponentUpdate() 函数、componentWillUpdate() 函数、render() 函数和 componentDidUpdate() 函数，和上面的一样。

4. 在卸载 Unmounting 阶段，会进行触发componentWillUnmount() 函数，当这个组件即将被从页面中剔除的时候，会被执行。

5. react 生命周期函数，示意图如下：