React Fiber是React框架的一个核心算法，用于提高其渲染性能和响应性。引入Fiber的目的是为了优化React的渲染流程，特别是在处理大量的UI元素和复杂更新时。Fiber算法允许React应用更加平滑和响应用户交互，即使在主线程繁忙时也能保持应用的流畅运行。
Fiber算法的关键特点包括：
- 增量渲染（Incremental Rendering） ：React Fiber能够将渲染工作分解成小的任务单元，这些任务单元可以在浏览器的空闲期间被执行，而不是一次性完成。这种方式可以避免长时间的渲染任务阻塞浏览器的主线程，从而提高应用的响应速度。
- 任务分割（Task Scheduling） ：Fiber引入了一种新的任务调度机制，允许React根据任务的优先级进行调度。这意味着高优先级的更新（如用户输入）可以快速完成，而低优先级的更新（如数据的预加载）可以延后处理。
- 可中断的工作流程（Interruptible Work） ：Fiber算法的设计允许正在进行的渲染任务在必要时被中断，以确保紧急的更新可以即刻处理。完成紧急更新后，React可以恢复被中断的渲染任务。
React Fiber是如何将渲染工作分解成小的任务单元的？
React Fiber通过引入一个新的架构来实现将渲染工作分解成小的任务单元。在这个架构中，每个React元素都对应一个Fiber节点，这些Fiber节点构成了一个Fiber树，它与React的组件树一一对应。Fiber架构的核心思想是每个Fiber节点都代表一个工作单元，React会逐个处理这些Fiber节点，完成整个应用的渲染过程。
这种处理方式有几个关键步骤：
- 分解和重组
React在更新组件时，会为每个组件生成一个或多个Fiber节点。这些节点包含了组件的状态、props、回调函数等信息。当React开始渲染时，它会从根Fiber节点开始，逐步向下遍历整个Fiber树。 - 双缓冲机制
React Fiber使用了一种“双缓冲”机制（也称为双缓存技术），在内存中维护两棵Fiber树：当前屏幕上显示内容的当前树和正在内存中构建的工作树。当工作树中的更新完成后，React会将工作树变成当前树，实现无缝的更新。 - 工作循环
React Fiber的工作循环分为两个阶段：Reconciliation（协调/对比阶段）和Commit（提交阶段）。
Reconciliation阶段：在这个阶段，React会对比新旧Fiber树，计算出需要进行的DOM更新。这个阶段可以被中断，允许React根据需要暂停、继续或取消更新任务。React会为每个需要更新的任务分配优先级，并根据优先级决定任务的执行顺序。
Commit阶段：在确定了所有的DOM更新后，React会在这个阶段一次性将所有变更提交到DOM上。这个阶段不能被中断，以确保不会出现中间态，导致用户界面出错。 - 任务调度
React Fiber的另一个核心特性是任务调度。React会根据任务的优先级和浏览器的帧率来调度任务。高优先级的任务（如用户输入）会被立即执行，而低优先级的任务（如大量数据的渲染）则可以分成多个小任务，在浏览器的空闲时段执行，以避免阻塞主线程。
内部实现上，React Scheduler使用了浏览器的API（如requestIdleCallback和MessageChannel）来在浏览器的主线程空闲时执行低优先级的任务，而对于高优先级任务则会立即执行。
浏览器帧率监控：React利用浏览器的requestIdleCallback（或类似的机制）来监控主线程的空闲时间。这允许React判断是否有足够的时间继续当前的工作单元，或者是否应该中断当前工作，以便浏览器能够处理如用户输入、动画等高优先级任务。
