Fiber 的核心​​:​​可中断 + 优先级调度 + 任务嵌套​​。

双向链表只能记录“当前执行到哪”​,无法做到调整任务优先级。

普通双向链表(Vue 的更新机制)​

  • 快递员有一个送货清单(A → B → C)。
  • 他可以:
    • 送到 A,然后去 B。
    • 如果中途有电话,他可以暂停,但只能记住“当前在送 B”。
    • ​无法调整送货顺序​​,比如突然有个加急快递(D),他必须送完 B 才能处理。

Fiber 架构(React 的任务调度)​

  • 快递员不仅有一个清单,​​还有优先级和子任务​​:
  • ​Fiber 的做法​​:
    1. 先送 A。
    2. 正准备送 B 时,​​加急快递 D 来了​​,立刻转去送 D。
    3. 送完 D 后,​​回到 B​​(不是从头开始)。
    4. 如果 E 是“大件快递”,可以拆解:
      • 先“搬上楼”,如果中途有更急的事,暂停并记住“已经搬到 2 楼”。
      • 处理完急事后,​​继续从“搬到 3 楼”开始​​。

 

总结:Fiber 到底是什么?​

特性 普通双向链表 Fiber 架构
​可中断​ ✅ 能暂停,但只能记录“当前任务” ✅ 能暂停,且能记录“任务内部的进度”
​优先级调度​ ❌ 必须按顺序执行 ✅ 高优先级任务可插队
​任务嵌套​ ❌ 只能处理线性任务 ✅ 大任务可拆分子任务
​恢复精度​ 只能回到任务起点 能回到任务的具体步骤

Fiber 的本质​​:

  • ​不只是“可中断”​​,而是​​更智能的任务调度系统​​。
  • 它让 React 可以:
    • 处理复杂 UI 更新(比如动画 + 数据加载)。
    • 保证高优先级任务(如用户点击)优先响应。
    • 避免页面卡顿(分段渲染)。

 

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐