前言

前面我们讲过React的JSX语法，链接如下：

一分钟看懂React的JSX语法

本次介绍state变化的setState方法的核心原理

setState的关键点

1. setState不会立刻改变React组件中state的值
2. setState通过引发一次组件的更新过程来引发重新绘制

重绘指的就是引起React的更新生命周期函数4个函数：

• shouldComponentUpdate（被调用时this.state没有更新；如果返回了false，生命周期被中断，虽然不调用之后的函数了，但是state仍然会被更新）
• componentWillUpdate（被调用时this.state没有更新）
• render（被调用时this.state得到更新）
• componentDidUpdate

3.多次setState函数调用产生的效果会合并

this.setState({name: 'Pororo'})

this.setState({age: 20})

this.setState({name: 'Pororo'，age: 20})

上面两块代码的效果是一样的。如果每次调用都引发一次生命周期更新，那性能就会消耗很大了。所以，React会将多个this.setState产生的修改放进一个队列里，等差不多的时候就会引发一次生命周期更新。

结论

在React中，如果是由React引发的事件处理（比如：onClick引发的事件处理），调用setState不会同步更新this.state，除此之外的setState调用会同步执行this.setState。 即绕过React通过addEventListener直接添加的事件处理函数和setTimeout/setInterval产生的异步调用。

每次setState产生新的state会依次被存入一个队列，然后会根据isBathingUpdates变量判断是直接更新this.state还是放进dirtyComponent里回头再说。isBatchingUpdates默认是false，也就表示setState会同步更新this.state。但是，当React在调用事件处理函数之前就会调用batchedUpdates，这个函数会把isBatchingUpdates修改为true，造成的后果就是由React控制的事件处理过程setState不会同步更新this.state。

更多WEB框架内容敬请期待下一期，希望大家多多支持，感兴趣可以关注、评论、转发、收藏！