react的setstate原理

  • Z时代
  • 2024-01-10
  • 分类：综合

react

setState方法同步还是异步？

在React生命周期内，也可以理解主线程中 setState就是异步的；子线程或者说异步任务中，例如setInterval,setTimeout里，setState就是同步更新的。


 

上图是setState的流程图，我们是结合很经典的例子，更浅显易懂的说明

当第一次调用setState，newState被放入pending队列，此时batch update(源码中isBatchingUpdates)是true,所以newState会被保存在dirtyComponents数组中，并不会调用updateCompont,所以界面state并没有更新，但是state的值已经被合并了，第二次调用setState的情况也是一样的；

   第三次调用setState时，newState被放入pending队列，此时batch update(源码中isBatchingUpdates)是false，此时会马上遍历dirtycomponents数组，调用updateCompont方法，然后更新界面，第四次同第三次

  • 为什么第一次和第二次isBatchingUpdates是true？ 因为react有UI 的事务机制，只要开启了事务isBatchingUpdates就为true,当我们第一次调用setState时，开启了一次新的事务开始 batchUpdate=true，然后如果是 Ajax，setTimeout 等要离开主线程进行异步操作的时候会脱离当前 UI 的事务，这时候再进入此次处理的时候 batchUpdate=false，所以才会 setState 几次就 render 几次

  • 第一次和第二次isBatchingUpdates什么时候变为false？在componentDidMount执行完毕后才会去调用close完成更新,此时才会变为false

  • 主要参考：

            https://zhuanlan.zhihu.com/p/25882602

            https://juejin.im/entry/58b5285a5c497d00560fa290

            https://www.cnblogs.com/danceonbeat/p/6993674.html

以上是 react的setstate原理 的全部内容， 来源链接： utcz.com/z/381770.html

回到顶部