聊聊setState的用法，你会几个？

本文转载自微信公众号「前端UpUp」，作者前端UpUp。转载本文请联系前端UpUp公众号。

目前成都创新互联公司已为成百上千家的企业提供了网站建设、域名、网站空间、网站托管运营、企业网站设计、营口网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

setState是同步还是异步?

首先，这个问题的抛出，我会想为什么要抛出这个问题呢?如果说，你需要依赖状态更新后的值时，那么首先如何做呢?

  • 对于Class Component而言，我们可以在componentDidMount或者是componentDidUpdate阶段来执行。
  • 对于Function Component而言，我们可以在useEffect的回调函数中执行。

首先，我们先给出结论，在React中不同的模式它的情况是不一样的，主要拿两种模式来说。

  1. legacy模式
  2. concurrent模式

legacy 模式

这是当前 React app 使用的方式??

 
 
 
    
  
  
  
  1. ReactDOM.render(, rootNode)
    2.

当前没有计划删除本模式，但是这个模式可能不支持这些新功能。

回到我们上述的问题，setState是同步的还是异步的?

  • 当在legacy模式下，命中batchedUpdates时，setState是异步的。
  • 当在legacy模式下，没命中batchedUpdates时，setState是同步的。

既然聊到了这里，我们来说一说batchedUpdates函数的作用。

那么它是干嘛的呢?如果你在处理逻辑函数中多次调用this.setState时，它是如何更新状态的呢?

 
 
 
    
  
  
  
  1. this.setState({
    2. 
  
  
  
  2.   value: this.state.value + 1
    3. 
  
  
  
  3. })
    4. 
  
  
  
  4. this.setState({
    5. 
  
  
  
  5.   value: this.state.value + 1
    6. 
  
  
  
  6. })
    7. 
  
  
  
  7. this.setState({
    8. 
  
  
  
  8.   value: this.state.value + 1
    9. 
  
  
  
  9. })
    10.

那React实现了这个批量更新的操作,将多次的setState合并为一次更新，那么它是如何实现的呢?batchedUpdates函数就登场了。

 
 
 
    
  
  
  
  1. function batchedUpdates$1(fn, a) {
    2. 
  
  
  
  2.     var prevExecutionContext = executionContext;
    3. 
  
  
  
  3.     executionContext |= BatchedContext;
    4. 
  
  
  
  4. 
  
  
  
  5.     try {
    6. 
  
  
  
  6.       return fn(a);
    7. 
  
  
  
  7.     } finally {
    8. 
  
  
  
  8.       executionContext = prevExecutionContext;
    9. 
  
  
  
  9. 
  
  
  
  10.       if (executionContext === NoContext) {
    11. 
  
  
  
  11.         // Flush the immediate callbacks that were scheduled during this batch
    12. 
  
  
  
  12.         resetRenderTimer();
    13. 
  
  
  
  13.         flushSyncCallbackQueue(); // 同步的更新
    14. 
  
  
  
  14.       }
    15. 
  
  
  
  15.     }
    16. 
  
  
  
  16.   }
    17.

这个函数会传递一个fn，当执行fn之前，会在executionContext变量上附加一个BatchedContext，当fn执行完毕后，executionContext就会把之前的BatchedContext标记给去除掉。

  • 这样子一来，当executionContext带上了BatchedContext标记的话，react内部就会去做判断，带上了这个标记，这次的更新就是批处理，那么此次更新就是异步的。

那么，我们是不是能够假设一下，如果在执行完fn函数后，再去更新状态的话，是不是就能完成同步的更新呢?

setTimeout函数,我们可以把setState放在定时器中,这样子一来的话,当fn函数执行完时，BatchedContext标记也去掉了，然后等到 setTimeout 的回调函数等到空闲被执行的时候，才会执行 setState。

 
 
 
    
  
  
  
  1. setTimeout(() => {
    2. 
  
  
  
  2.     this.setState({ value: this.state.value + 1})
    3. 
  
  
  
  3.   }, 0)
    4.

这也就是当executionContext === NoContext，也就是会执行flushSyncCallbackQueue函数，完成此次的同步更新。

当然了，在concurrent 模式下，又是有所不同的。

这个时候，我们得谈一谈scheduleUpdateOnFiber函数。

我们都知道任务调度的起点是 scheduleUpdateOnFiber 方法，React.render、setState、forceUpdate、React Hooks 的dispatchAction 都会经过 scheduleUpdateOnFiber。

 
 
 
    
  
  
  
  1. function scheduleUpdateOnFiber(fiber, lane, eventTime) {
    2. 
  
  
  
  2.     // ...
    3. 
  
  
  
  3.     if (root === workInProgressRoot) {
    4. 
  
  
  
  4.       // ...... 
    5. 
  
  
  
  5.     } // TO an argument to that function and this one.
    6. 
  
  
  
  6.     if (lane === SyncLane) {  // 同步任务
    7. 
  
  
  
  7.       if ( // 检查当前是不是在unbatchedUpdates（非批量更新）,（初次渲染的ReactDOM.render就是unbatchedUpdates）
    8. 
  
  
  
  8.       (executionContext & LegacyUnbatchedContext) !== NoContext && // Check if we're not already rendering
    9. 
  
  
  
  9.       (executionContext & (RenderContext | CommitContext)) === NoContext) {
    10. 
  
  
  
  10.         // Register pending interactions on the root to avoid losing traced interaction data.
    11. 
  
  
  
  11.         schedulePendingInteractions(root, lane); 
    12. 
  
  
  
  12.         performSyncWorkOnRoot(root);
    13. 
  
  
  
  13.       } else {
    14. 
  
  
  
  14.         ensureRootIsScheduled(root, eventTime);
    15. 
  
  
  
  15.         schedulePendingInteractions(root, lane);
    16. 
  
  
  
  16.         if (executionContext === NoContext) {
    17. 
  
  
  
  17.           resetRenderTimer();
    18. 
  
  
  
  18.           flushSyncCallbackQueue();
    19. 
  
  
  
  19.         }
    20. 
  
  
  
  20.       }
    21. 
  
  
  
  21.     } else { // 异步任务
    22. 
  
  
  
  22.       // concurrent模式下是跳过了 flushSyncCallbackQueue 同步更新
    23. 
  
  
  
  23.       // ....
    24. 
  
  
  
  24.     } 
    25. 
  
  
  
  25.   }
    26.

scheduleUpdateOnFiber函数通过lane === SyncLane来判断是同步任务还是异步任务，我们通过ReactDom.render()方式创建的React app是会进入这个判断的，而concurrent模式下，则不同，那么它是如何创建的呢??

concurrent 模式

你可以理解成，这个暂时还是实验阶段，当未来稳定后，将会作为React开发的默认开发模式，它是如何创建一个React App应用的呢??

 
 
 
    
  
  
  
  1. ReactDOM.createRoot(rootNode).render()
    2.

这个模式开启了所有的新功能。

concurrent模式下状态的更新都是异步的。

关于React的concurrent 模式解读，有兴趣可以看看官方文档。

到这里的话，似乎我们对React中setState是同步的还是异步的就有所了解了。

  • 哪些会命中batchUpdate机制
  • 生命周期(和它调用函数)
  • React中注册的事件
  • React可以'管理入口'

名称栏目：聊聊setState的用法，你会几个？
当前链接：http://www.mswzjz.cn/qtweb/news26/514676.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

贝锐智能技术为您推荐以下文章

网站制作知识

各行业网站

成都小程序商城　　 　成都公司注册　　 　校园网站建设方案　　 　木业包装箱　　 　电商网站建设　　 　金羊影视传媒　　 　IDC机房托管　　 　开元建筑学校　　 　成都办公窗帘　　 　成都LED亮化工程　　 　h5响应式网站　　 　重庆电信五里店机房　　 　网站制作报价　　 　成都小程序　　 　成都微信小程序开发　　 　乐至网站建设　　 　成都网站建设　　 　网站方案　　 　服务器租用　　 　铁科精智测控