初始化 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的本质)