跳到主要内容

setState原理剖析

React 通过 this.state 来访问 state ，通过 this.setState() 方法来更新 state,当 this.setState() 方法被调用的时候， React 会重新调用 render 方法来重新渲染 UI

setState([state],[callback])

  • callback: 在状态更改/视图更新完毕后触发执行
    • 也就是执行了setState之后，callback回调一定会执行
    • 相当于vue中的nextTick

setState 什么时候是同步,什么时候是异步?​

  • 这里的“异步”不是说异步代码实现. 而是说 react 会先收集依赖，然后再进行统一的更新.

在react18和react16中，setState是同步还是异步，是有一些区别的

  • react18中，无论在什么地方执行setState，它都是异步的 【这是react18的新特性 批处理】
  • react16中，setState 在合成事件和钩子函数【周期函数】中是异步的，setState在原生事件 【setTimeout、手动获取DOM元素】中是同步的

为什么setState需要异步的？​

react会进行有意的等待，为了提高性能，减少渲染次数， 放在一个队列里进行合并的操作，用 enqueueUpdate方法执行state更新

  • 可能一次执行多次setState
  • 无法规定、限制用户如何使用setState
  • 没必要每次setState都要重新渲染，考虑渲染
  • 即便是每次重新渲染，用户也看不到中间变化
    • 因为js是单线程

为什么 React 不同步地更新 this.state​

  • 在开始重新渲染之前，React 会有意地进行“等待”，直到所有在组件的事件处理函数内调用的 setState() 完成之后，这样可以通过避免不必要的重新渲染来提升性能。

主要有两个原因：

  • 这样会破坏掉 props 和 state 之间的一致性，造成一些难以 debug 的问题。
  • 这样会让一些我们正在实现的新功能变得无法实现。