附录:flags
一句话结论:flags 是 Fiber 上的“副作用标记”,告诉 commit 阶段需要对宿主环境做什么;render 阶段只负责计算并打标,commit 阶段才真正改 DOM/执行 Effect。
1. 两类标记(概念)
flags:当前 Fiber 自身的副作用subtreeFlags:子树中汇总出来的副作用(用于快速跳过无副作用子树)
2. 常见 flags 直觉
- Placement:插入/移动节点
- Update:更新属性/内容
- ChildDeletion:删除子节点
- Passive:需要在 commit 后异步执行的 Effect(useEffect)
- Layout:需要在 DOM 变更后、浏览器绘制前执行的 Effect(useLayoutEffect)
3. 为什么要这样设计
- render 与 commit 分离:render 可中断,commit 必须原子
- commit 只做“被标记过的事”,成本可控