State更新是异步还是同步的

State更新是异步还是同步的

参考文章

https://segmentfault.com/a/1190000015463599

setState使用

this.state = {
  count: 0，
}

incrementCount() {
  this.setState({
    count: this.state.count + 1,
  });
}

handleIncrement = () => {
 this.incrementCount();
 this.incrementCount();
 this.incrementCount();
}

incrementCount() {
  this.setState((prevState) => {
    return {count: prevState.count + 1}
  });
}

上边代码连续调用三次并不会达到预期效果

1.setState 不会立刻改变React组件中state的值.
2.setState 通过触发一次组件的更新来引发重绘.
3.多次 setState 函数调用产生的效果会合并。

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

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

如果每一次 setState 调用都走一圈生命周期，光是想一想也会觉得会带来性能的问题，其实这四个函数都是纯函数，性能应该还好，但是render函数返回的结果会拿去做Virtual DOM比较和更新DOM树，这个就比较费时间。

目前React会将setState的效果放在队列中，积攒着一次引发更新过程。

为的就是把 Virtual DOM 和 DOM 树操作降到最小，用于提高性能。

结论

在React中，如果是由React引发的事件处理（比如通过onClick引发的事件处理），调用 setState 不会同步更新 this.state，除此之外的setState调用会同步执行this.state