Notes

初始化 effect Hook

一句话结论:useEffect/useLayoutEffect 在 render 阶段只做“登记”(把 effect 节点挂到 Fiber 上并打 flag),真正执行发生在 commit 阶段的不同子阶段。

1. render 阶段做了什么

  • 创建一个 effect 对象:包含 create/destroy、依赖 deps 等信息
  • 把 effect 通过链表挂到 fiber.updateQueue(通常是环形链表)
  • 设置对应 flags:Passive 或 Layout,提示 commit 阶段需要处理

2. commit 阶段什么时候执行

  • useLayoutEffect:DOM 变更后、浏览器绘制前同步执行(Layout 阶段)
  • useEffect:commit 后异步调度执行(Passive 阶段)

3. 面试要点

  • effect 在 render 不执行:因此并发中断不会导致“执行一半”
  • deps 决定是否需要重新登记(HookHasEffect 的本质)

关联阅读

cd ..