setState

2022-12-07 18:45:10

setState 是同步还是异步

在 react18 后将 setState 改为异步更新，如果每次调用 setState 都进行一次更新，那么意味着 render 函数会被频繁的调用，界面重新渲染，这样效率是很低的，所以改为异步更新，最后获取到多个更新后，进行批量更新

Issue #11527 facebook/react

在一次事件中触发了 setState，react 底层都做了什么

• setState 产生当前更新的优先级（老版本用 expirationTime ，新版本用 lane）
• react 从 fiber 根节点开始向下调和子节点，对比找到发生更新的组件
• 合并 state，重新执行 render 函数，得到新的 UI 视图层
• commit 阶段，替换真实 dom，完成更新流程
• 执行 setState 的 callback 函数，完成全过程

setState 原理

类组件在初始化的过程中绑定了负责更行的Updater对象，在调用 setState 时实际上是在调用 Updater 对象的 enqueneSetState 方法