#React Fiber 架构

聊聊 React 16 之后的大改动

先说结论：Fiber 是 React 16 引入的新协调引擎，把之前的同步递归改成了可中断的异步任务。

#以前有什么问题？

React 15 用的是 Stack Reconciler（栈协调器），工作方式是这样的：

1. 开始 Diff 就停不下来
2. 必须把整棵树都对比完才能结束
3. 如果树很大，JS 会占用主线程很长时间
4. 结果：卡顿、掉帧，用户操作没响应

#Fiber 怎么解决？

Fiber 把更新拆成一个个小任务，每次只干一点就休息一下。

#核心特性

1. 可中断渲染

   • 利用浏览器的空闲时间 (Scheduler) 执行任务
   • 时间片用完了就暂停，把主线程让出来
   • 用户可以正常操作页面

2. 优先级机制

   • 高优先级：用户输入、动画
   • 低优先级：数据请求、列表渲染
   • 紧急的任务先干，不紧急的排队

3. 双缓存

   • Current Tree：屏幕上正在显示的
   • WorkInProgress Tree：内存里正在构建的
   • Diff 在内存里完成，不影响当前页面

#两个阶段

#第一阶段：Render（可中断）

• 遍历 Fiber 树，运行组件函数
• Diff 对比，生成 Effect List（记录哪些需要增删改）
• 特点：异步、可中断、可能重复执行
• 注意：别在这里执行副作用（Ajax），可能会执行多次

#第二阶段：Commit（不可中断）

• 处理副作用（useEffect、useLayoutEffect）
• 切换 Current 指针
• 操作真实 DOM
• 特点：同步、一口气干完，保证 UI 一致性

#对生命周期的影响

因为 Render 阶段可能会被中断、重试多次，所以这些旧生命周期钩子被标记为废弃：

• componentWillMount
• componentWillReceiveProps
• componentWillUpdate

建议用 getDerivedStateFromProps 或 useEffect 替代。

#总结

以前 (React 15)	现在 (React 16+)
同步递归	可中断异步
卡顿	流畅
无优先级	有优先级

Fiber 让 React 变得更"聪明"了，知道什么时候该干活，什么时候该休息。