componentDidUpdate中调用setState要格外小心，在setState前必须有条件判断，只有满足了相应条件，才setState，否组组件会不断执行更新过程，进入死循环。因为setState会导致新一次的组件更新，组件更新完成后，componentDidUpdate被调用，又继续setState，死循环就产生了。
不可以的方法
其他生命周期方法都不能调用setState，主要原因有两个：
产生死循环。例如，shouldComponentUpdate、componentWillUpdate 和 render 中调用setState，组件本次的更新还没有执行完成，又会进入新一轮的更新，导致不断循环更新，进入死循环。
无意义。componentWillUnmount 调用时，组件即将被卸载，setState是为了更新组件，在一个即将卸载的组件上更新state显然是无意义的。实际上，在componentWillUnmount中调用setState也是会抛出异常的。
render次数 != 浏览器界面更新次数先看下面的一个例子：
class App extends React.Component { constructor(props) { super(props) this.state = { bgColor: "red" } } render() { var {bgColor} = this.state return ( <div style = {{backgroundColor: bgColor}}> Test </div> ); } componentDidMount() { this.setState({ bgColor: "yellow" }) } }当我们观察浏览器渲染出的页面时，页面中Test所在div的背景色，是先显示红色，再变成黄色呢？还是直接就显示为黄色呢？
答案是：直接就显示为黄色！
这个过程中，组件的生命周期方法被调用的顺序如下：
constructor -> componentWillMount -> render -> componentDidMount -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate组件在挂载完成后，因为setState的调用，将立即执行一次更新过程。虽然render方法被调用了两次，但这并不会导致浏览器界面更新两次，实际上，两次DOM的修改会合并成一次浏览器界面的更新。React官网介绍componentDidMount方法时也有以下说明：
Calling setState() in this method will trigger an extra rendering, but it will happen before the browser updates the screen. This guarantees that even though the render() will be called twice in this case, the user won’t see the intermediate state.
这说明，组件render的次数 不一定等于 浏览器界面更新次数。虽然JS的执行和DOM的渲染分别由浏览器不同的线程完成，但JS的执行会阻塞DOM的渲染，而上面的两次render是在一个JS事件周期内执行的，所以在两次render结束前，浏览器不会更新界面。
下篇预告：React 深入系列5：事件处理
新书推荐《React进阶之路》
作者：徐超
毕业于浙江大学，硕士，资深前端工程师，长期就职于能源物联网公司远景智能。8年软件开发经验，熟悉大前端技术，拥有丰富的Web前端和移动端开发经验，尤其对React技术栈和移动Hybrid开发技术有深入的理解和实践经验。
美团点评广告平台大前端团队招收2019\2020年前端实习生（偏动效方向）
有意者邮件：yao.zhou@meituan.com