Fiber 架构的起源和含义

Fiber 架构的起源

Fiber 架构的起源可以追溯到 React 团队在 2017 年提出的一项重大改进计划。在过去的 React 版本中，渲染过程是基于递归的，即组件树的遍历是通过递归函数来完成的。这种方式在大规模复杂应用中可能会引发一些性能问题，例如长时间的主线程阻塞，导致用户体验下降。

为了解决这些性能问题，React 团队开始着手设计一种新的渲染架构，即 Fiber 架构。Fiber 架构的目标是使 React 的渲染过程可中断和恢复，从而实现更好的任务调度、优先级管理和增量更新。

Fiber 这个名字来源于计算机科学中的 “Fiber”（纤程）概念，指的是一种轻量级的执行单元，可以在多个任务之间切换，并且可以中断和恢复执行。React 中的 Fiber 也是类似的概念，表示渲染过程中的任务单元，可以根据任务的优先级和时间片进行灵活的调度和中断。

通过 Fiber 架构，React 实现了一个基于链表结构的 Fiber 树，用于表示组件的层级关系和渲染顺序。同时，React 还引入了优先级调度算法，通过动态调整任务的优先级，可以根据不同任务的重要性和紧急程度来合理地分配渲染资源。

Fiber 架构的引入使得 React 在渲染过程中可以更加灵活地响应用户交互，提供更好的用户体验。它为 React 提供了更强大的渲染能力，能够支持更复杂、更大规模的应用程序。

值得一提的是，Fiber 架构的设计和实现是一个非常复杂的过程，并且在不同版本的 React 中可能会有一些细节上的差异。React 团队在不断地改进和优化 Fiber 架构，以进一步提升 React 应用的性能和可靠性。

Fiber的含义

总的来说，Fiber 是 React 中的一种渲染架构和调度算法，通过将渲染过程划分为可中断和恢复的任务单元，实现了增量更新和优先级调度。Fiber 架构的引入使得 React 能够更加高效地处理渲染任务，提供更好的用户体验和更高的性能。

Fiber 是 React 中的一个概念，它有多个含义和作用：

• 渲染任务单元：在 React 中，Fiber 表示渲染过程中的任务单元。传统的递归渲染方式可能会导致长时间的主线程阻塞，影响用户体验。而 Fiber 架构将渲染过程划分为一系列小的任务单元（Fiber 节点），可以根据任务的优先级和时间片进行灵活的调度和中断，实现增量更新和任务的并发处理。

• 调度和优先级管理：Fiber 架构引入了一套调度算法，用于根据任务的优先级和时间片来动态调整任务的执行顺序。通过优先级调度，React 可以根据任务的重要性和紧急程度合理地分配渲染资源，从而提供更好的用户体验。优先级调度还使得 React 可以在不同任务之间进行中断和恢复，避免了长时间的阻塞。

• 组件结构表示：Fiber 架构引入了基于链表结构的 Fiber 树，用于表示组件的层级关系和渲染顺序。每个 Fiber 节点表示一个组件或 DOM 元素，并通过 child、sibling 和 return 等属性建立起节点之间的关联。通过 Fiber 树的结构，React 可以更加高效地遍历和更新组件树，实现增量渲染。

• 增量更新：Fiber 架构支持增量更新，即仅更新发生变化的部分，而不需要重新渲染整个组件树。通过对比 Fiber 树的两个状态，React 可以确定哪些组件需要更新，并且可以跳过不需要更新的部分，从而提高渲染性能。