这是对上一篇的补充。上一篇 → 2.2.5、React 是如何工作的?(核心)

1、setState 是怎么做到让页面更新的?

这个问题可以拆解为以下两个问题?

Q1:什么是”页面更新“?

A:

即进入 render-commit 流程。那么如何出发 render-commit呢?

调用scheduleUpdateOnFiber ,这个方法会找到相应组件对应的 fiber 节点,给 fiber 节点打上lane优先。然后触发 workloop。

Q2: setState如何触进入发 redner-commit 流程?

A2:

当你调用 setState 时,React 实际上是调用了内部的 scheduleUpdateOnFiber 函数。

  1. 它会找到当前组件对应的 Fiber 节点。
  2. 给这个 Fiber 节点计算一个优先级 (Lane)。
  3. 从这个节点开始,向上遍历直到 HostRoot,告诉 React:“我家出事了,需要调度一次更新”。
  4. (优先级策略)如果你设置的新值和旧值是同一个(Object.is(oldState, newState)true),React 会进行 Bailout (急救退出),直接跳过更新,连 Render 阶段都不进。