企业🤖AI Agent构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
# Fiber > Fiber本质上是对算法的重构,为了扩大其适用性,包括动画布局手势。 > 主要有五个具体目标: > 1. 把可中断的工作差分成小任务 > 2. 对正在做的工作调整优先次序,重做,重复上次的成果 > 3. 对父子任务之前从容切换,以支持React执行过程中的布局刷新 > 4. 支持render()返回多个元素 > 5. 更好的支持error boundary > ## 关键特性 Fiber有以下关键特性: 1. 增量渲染(把渲染任务拆分成块,匀到多帧) 2. 更新时能暂停,终止,复用渲染任务 3. 给不同类型的更新赋予优先级 4. 并发方面新的基础能力 增量渲染用来解决掉帧的问题,渲染任务拆分之后,每次只做一小段,做完一段就把时间控制权交还给主线程,而不像之前长时间占用。这种策略叫做cooperative scheduling(合作式调度),操作系统的3种任务调度策略之一(Firefox还对真实DOM应用了这项技术) Fiber之前的reconciler(被称为Stack reconciler)自顶向下的递归mount/update,无法中断(持续占用主线程),这样主线程上的布局、动画等周期性任务以及交互响应就无法立即得到处理,影响体验 Fiber解决这个问题的思路是把渲染/更新过程(递归diff)拆分成一系列小任务,每次检查树上的一小部分,做完看是否还有时间继续下一个任务,有的话继续,没有的话把自己挂起,主线程不忙的时候再继续 ## Fiber reconciler reconcile过程分为2个阶段(phase): 1. (可中断)render/reconciliation 通过构造workInProgress tree得出change 2. (不可中断)commit 应用这些DOM change