Notes

Fiber 树

一句话结论:Fiber 树是 React 的运行时数据结构;它既是一棵“组件树”,也是一棵“可遍历、可中断、可恢复的工作树”。

1. 指针结构(树形但可线性遍历)

  • child:第一个子节点
  • sibling:下一个兄弟节点
  • return:父节点

这套结构让深度优先遍历可以用少量全局指针(workInProgress)完成,而不需要真实递归栈。

2. 双缓冲(current / workInProgress)

  • current:屏幕上已经提交的那棵树
  • workInProgress:正在 render 的那棵树(可中断、可丢弃)
  • alternate:两棵树之间互相指向,复用节点对象,减少分配

3. 为什么它能支持并发

  • “工作”被拆成一个个 Fiber 节点
  • workLoop 可以在节点边界暂停(yield),下次从 workInProgress 继续

关联阅读

cd ..