加入收藏 | 设为首页 | 会员中心 | 我要投稿 莆田站长网 (https://www.0594zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 站长资讯 > 评论 > 正文

聊聊setState的用法

发布时间:2021-03-27 12:56:47 所属栏目:评论 来源:互联网
导读:当前没有计划删除本模式,但是这个模式可能不支持这些新功能。 回到我们上述的问题,setState是同步的还是异步的? 当在legacy模式下,命中batchedUpdates时,setState是异步的。 当在legacy模式下,没命中batchedUpdates时,setState是同步的。 既然聊到了这

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

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

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

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

那么它是干嘛的呢?如果你在处理逻辑函数中多次调用this.setState时,它是如何更新状态的呢?这个函数会传递一个fn,当执行fn之前,会在executionContext变量上附加一个BatchedContext,当fn执行完毕后,executionContext就会把之前的BatchedContext标记给去除掉。

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

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

setTimeout函数,我们可以把setState放在定时器中,这样子一来的话,当fn函数执行完时,BatchedContext标记也去掉了,然后等到 setTimeout 的回调函数等到空闲被执行的时候,才会执行 setState。也就是当executionContext === NoContext,也就是会执行flushSyncCallbackQueue函数,完成此次的同步更新。

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

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

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

(编辑:莆田站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读