setState实现原理

Posted 2023-03-16

参考技术A 事件处理函数中setState会异步更新，创建示例组件 Counter ：

当调用 handleIncrease 会输出 0 0 1 。

每个组件实例都会对应一个fiber对象, 同时fiber对象通过 stateNode 指向组件实例；fiber对象的child属性指向子组件对应的fiber, return属性指向父组件对应的fiber对象，updateQueue属性用于存放更新数据，tag属性用于表明对应组件的类型。

组件类型 ReactWorkTags.js ：

创建组件实例及相应的fiber对象：

Component相关实现 ReactBaseClasses.js 。

调用setState方法，首先会创建 update 对象并把该对象放入对应fiber的updateQueue中，然后调用 scheduleUpdateOnFiber 进行调度。

给本次更新任务设置优先级，如果优先级和 root.callbackPriority 的优先级相同则把 flushSyncCallbackQueue 调度任务放入微任务队列。等所有同步方法都执行完成后即 handleIncrease 里的语句执行完，再执行微任务 performSyncWorkOnRoot 。如果 executeContext === NoContext ，则同步更新state即调用 flushSyncCallbackQueue 。

batchedUpdates 高阶函数首先会将 executionContext = BatchedContext ，然后再调用传入的函数，最后复原 executionContext 。React事件处理函数默认使用了 batchedUpdates 高阶函数，所以会异步更新。

setState方法运行流程如下：创建update对象并将其放入对应的fiber对象的updateQueue属性中，然后把调和任务放到微任务队列中，再然后判断如果 executeContext === NoContext 那么执行调度任务 flushSyncCallbackQueue() ，所有同步方法执行完成后执行微任务中的调和任务。

react 常见setState的原理解析

参考技术A 4次log的值 分别为 0 0 2 3

说一下批量更新

在一些mv*框架中，，就是将一段时间内对model的修改批量更新到view的机制。比如那前端比较火的React、vue（nextTick机制,视图的更新以及实现）为例。

消息进程 http://www.ruanyifeng.com/blog/2013/10/event_loop.html

传入回调函数

在钩子函数中体现

在setState的第一个参数中传入function，该function会被压入调用栈中，在state真正改变后，按顺序回调栈里面的function。该function的第一个参数为上一次更新后的state。这样就能确保你下一次的操作拿到的是你预期的值