2019-6-13 seo达人
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
更新阶段分为两部分 父组件执行 render 或者调用 this.setState。
componentWillReceiveProps
大部分网上教程为外部 props 发生改变才触发 componentWillReceiveProps，其实不是，当父组件进入 render 时，无论子组件的 props 发没发生改变，都会执行该生命周期函数。
函数参数有一个，为 nextProps，为将要新的 props。
值得注意的是，在整个更新阶段的生命周期函数，只有在此函数内可以调用 this.setState 方法，当然其他也可以调用，但是会造成死循环 。
shouldComponentUpdate
该函数需要返回值，如没定义则默认返回 true。当返回值为 true 时，进入 componentWillIpdate ，如为 false ，则什么都不发生。所以说这是一个可以进行 React 性能优化的地方。函数参数有两个 nextProps 和 nextState。我们需用做的就是在 this.props、this.state、nextState、nextProps之间进行对比，来解决重复渲染的目的。
componentWillUpdate
如果 shouldComponentUpdate 返回值为 true 的话，生命周期会进入该函数中。在这个函数中我们可以根据实际情况做一些事情，但是不能调用 this.setState。
render
在更新阶段的 render 来讲一讲 调和 过程。 render 返回的 JSX 标签会保存在内存中，react 会通过 diff 算法来计算出最小化改动完成差异的更新。diff 是逐层递归比较，首先比较类型是否一样。如果发现 <div>和 <span> 的差别的话，react 会选择直接放弃之前的 dom 元素， 重新渲染。所以说即使是更新阶段的调和过程，也会触发组件的挂载、卸载阶段。
componentDidUpdate
在这个时候已经更新完 dom 结构，可以重新使用 dom 操作。
总结
总体来说更新的生命周期要做的最重要的事情就是性能优化，减少重复渲染次数。
在这个方面已经有很多成熟的解决方法了，在我的博客中也会介绍如何定制更新阶段的生命周期函数。
在使用上，最最重要的一点就是不要在除了 componentWillReceiveProps 之外的其他更新阶段生命周期函数内调用 this.setState。
相关链接：
浅入 React 生命周期相关（一）挂载生命周期
---------------------