Notes

hook 与 fiber

一句话结论:Hooks 的运行时状态并不“挂在函数上”,而是挂在正在渲染的 Fiber 上;每次 render 通过一条 Hook 链表按调用顺序读取/写入。

1. Hooks 状态存在哪里

  • fiber.memoizedState 指向 Hook 链表头
  • 每个 Hook 节点保存:memoizedStatebaseStatebaseQueuequeue

2. 为什么必须保证调用顺序一致

  • React 通过“第 N 次调用对应第 N 个 Hook 节点”定位状态
  • 顺序变化会导致错位读取,进而出现难以预测的 bug

3. 与双缓冲的关系

  • current Fiber 与 workInProgress Fiber 各自维护一套 Hook 链表
  • 更新 render 时从 current 复制/推进到 workInProgress,支持中断与重做

关联阅读

cd ..