Fiber 是什么？
Fiber 是 React 16 中引入的一种新的内部架构，旨在解决之前版本的一些核心问题，比如优化渲染任务的调度、拆分可中断的工作以及更好地利用现代多核 CPU。Fiber 架构的主要目标是提高 React 应用的性能，尤其是在动画、布局和手势等需要高响应性的场景中。
在 React 中，Fiber 是对组件的内部实例的重新实现。在技术层面，每个 Fiber 表示一个工作单元和它对应的组件。Fiber 架构为 React 的核心提供了一种新的结构，用于跟踪和管理组件的状态、副作用（side effects），以及相关的工作。每个组件在渲染时都会生成一个或多个 Fiber 对象，这些对象构成了一个工作单元的树状结构。
为什么需要 Fiber ？
在 React Fiber 之前，React 使用的是堆栈重绘（Stack Reconciler）算法，这个算法会一次性、同步地递归更新组件树，直到整个组件树的更新完成。这个过程有几个缺点：
1. 不可中断：
一旦开始更新组件树，就必须一次性完成，不能中断。这意味着对于大型应用来说，如果组件树很大，主线程会被占用较长时间，导致应用无法快速响应用户输入，降低了用户体验。
2. 更新优先级不灵活：
所有的更新都被视为同等重要，因此无法为特定的更新任务指定优先级。例如，动画的更新应该比数据的批量更新有更高的优先级，以避免动画卡顿。
3. 利用现代硬件能力有限：
由于更新过程是同步的，React 不能将长时间的更新任务分割成小块，然后根据需要在主线程上执行，这限制了 React 在利用现代多核处理器方面的能力。
Fiber 的核心能力
Fiber 重构了 React 的内部工作机制，引入了一种新的结构（称为 Fiber），它是对组件树中的每个组件的描述。每个 Fiber 对象代表一个工作单元，允许 React 在执行更新时能够暂停、继续和中止工作。这样做的好处包括：
1. 增量渲染：
Fiber 将渲染工作拆分成多个小的单元任务。每个 React 元素都对应一个 Fiber 节点，它是工作的最小单位。这种拆分使得 React 可以在渲染过程中暂停、终止或重启某些工作而不会阻塞用户界面。
2. 可中断的工作循环：
在 Fiber 架构中，React 有一个新的协调算法，它可以在执行更新时中断当前工作，转而执行更高优先级的任务。这是通过一个循环机制实现的，该机制可以检查浏览器的帧速率和主线程的空闲时间，确保主线程不会被长时间的任务阻塞。
3. 优先级调度：
Fiber 为不同类型的更新引入了优先级概念。比如，用户的输入、动画等需要立即反馈的任务会被赋予更高的优先级。React 可以根据这些优先级决定哪些更新应该被推迟，哪些应该被立即执行。
4. 并发控制：
Fiber 架构可以配合 React 的 Concurrent 模式使用。在 Concurrent 模式下，React 可以同时处理多个任务，更好地利用现代多核硬件。
核心组成部分
1. Fiber 节点：
每个 React 组件都有一个或多个 Fiber 节点与之对应，这个节点包含了组件的类型、状态、待处理的更新等信息。Fiber 节点是构成 React 应用的基础结构单元。
2. 双缓冲机制（Double Buffering）：
React 维护两棵 Fiber 树，一棵代表当前屏幕上显示的内容（current tree），另一棵用于准备下一次更新（work-in-progress tree）。这允许 React 在内存中构建新的 UI 状态，然后快速切换到屏幕上，减少了不必要的DOM操作。
3. 协调（Reconciliation）与提交（Commit）阶段：
协调阶段是可中断的，React 在这个阶段可以根据任务的优先级和浏览器的空闲时间来执行任务。一旦所有的更新任务完成，React 会进入提交阶段，这个阶段是不可中断的，React 将会把更新的结果渲染到DOM上。
4. 副作用列表（Effect List）：
为了优化性能，Fiber 在协调阶段会收集所有需要进行DOM更新的Fiber节点，并将它们组织到一个列表中。在提交阶段，React 会按照这个列表来批量更新DOM。
总结：
在实现层面，Fiber 架构的核心是一个虚拟堆栈帧的机制，每个 Fiber 对应了一个堆栈帧，代表了一个工作单元。React 的每个组件都对应一个 Fiber 对象，它包含了组件的类型、对应的 DOM 节点、子组件的链接等信息。React 在执行渲染或更新时会构建和遍历这个 Fiber 树，按照优先级和需要处理的工作类型来调度这些工作单元。
总的来说，React Fiber 是一个对 React 核心算法的重写，它使得 React 能够更加灵活和高效地处理更新，提供了更好的性能和用户体验。
