当前位置：首页 > news >正文

React Fiber

news 来源：原创 2025/6/27 8:57:46

React Fiber 是 React 16 引入的全新重写的协调（Reconciliation）算法的实现，旨在改善 React 的更新机制和性能，尤其是在复杂应用和大量更新的场景下。它使得 React 更加灵活、可调度，能够实现优先级控制和中断更新等特性，从而提升了用户体验和性能。

为什么需要 React Fiber？

React 在 16 版本之前使用的是基于栈的调度算法，这种算法存在以下问题：

同步更新：React 在更新时必须等待当前更新完成才能开始下一个更新，导致 UI 更新可能出现卡顿，尤其是在复杂的界面中。
无法中断更新：React 在处理一个更新时，无法中断当前的渲染工作，导致长时间的计算和渲染可能造成页面响应迟缓。
优先级问题：没有办法优先处理重要的任务（例如用户输入或动画），所有的更新按顺序处理，可能会拖慢重要任务的响应。
为了应对这些问题，React Fiber 在新的架构下提供了更好的灵活性和性能，特别是在以下几个方面：

异步渲染：允许将渲染过程分割成多个小的单位，这样 React 可以中断和暂停渲染工作，等待更高优先级的更新完成。
优先级调度：可以根据任务的优先级，决定哪些任务应该先执行，哪些可以延迟执行（例如动画、用户输入事件等更高优先级的任务）。
细粒度的调度控制：可以中断长时间运行的更新任务，避免因长时间的渲染导致界面卡顿或冻结。

React Fiber 的核心概念

在 React Fiber 中，更新的过程被划分为多个小的单元（称为 Fiber）。每个 Fiber 表示一个组件的状态、属性以及与其他组件的关系。Fiber 的引入改变了 React 的渲染流程，使其更加灵活和高效。

Fiber 树
在 React Fiber 中，Fiber 树代替了原来的虚拟 DOM 树。每个 Fiber 节点表示一个组件或元素，并保存了该组件的状态、属性以及子树的引用。Fiber 树的每个节点会包含一些关于如何渲染和更新的信息。
优先级调度
在 Fiber 中，每个更新任务（例如，重新渲染一个组件）都有一个优先级。React Fiber 允许调度器根据这些优先级决定哪些任务应该先执行。例如，用户交互（如点击、滚动）会被赋予高优先级，而低优先级的任务（如定时器更新或数据加载）可以被延迟执行。

React 通过时间切片（time slicing）的方式，分割更新任务，允许长时间的更新任务被分割成小块，每一块的执行时间很短，以避免阻塞 UI 渲染。

协作渲染
在 Fiber 架构中，更新操作可以被“中断”并“恢复”，从而允许多个任务根据其优先级并行处理。当一个任务的优先级较高时，React 可以暂停当前任务，先处理高优先级的任务，待高优先级任务完成后，再恢复原本的任务。
时间切片（Time Slicing）
时间切片是 React Fiber 的一个核心特性。它可以将长时间的渲染工作拆分成多个较小的“时间片”来执行。每个时间片的执行时间通常非常短（比如 5 毫秒），这样可以防止 UI 被长时间阻塞，从而提高用户体验。

如果当前渲染任务太长，React 会暂停渲染，并在稍后的时间继续执行。这样，React 可以将页面更新分配给浏览器的空闲时间，保证页面始终保持响应，避免卡顿现象。

更新的生命周期
React Fiber 改变了组件更新的生命周期，给它们添加了更多的控制权。通过 Fiber，React 可以在渲染过程中更灵活地暂停、继续或中断更新过程，从而提供更精细的控制。
Incremental Rendering（增量渲染）
React Fiber 实现了增量渲染的能力，也就是说，React 可以逐步、分阶段地完成渲染任务，而不是一次性完成所有的渲染工作。这种方式有助于提高 UI 的响应性，并防止因长时间渲染而导致的性能瓶颈。

React Fiber 的更新过程

在 React Fiber 中，更新过程变得更加灵活和高效，具体分为以下几个阶段：

调度阶段（Scheduler）：这个阶段会根据任务的优先级决定哪些任务应该被处理。React Fiber 使用调度器来安排工作，确保高优先级的任务得到及时处理。

开始阶段（Begin Phase）：在这个阶段，React 会开始构建 Fiber 树，处理组件的渲染，执行生命周期方法，并生成新的 Fiber 树。这个阶段是同步的。

提交阶段（Commit Phase）：一旦 Fiber 树构建完成，React 会开始提交阶段。提交阶段包括更新 DOM，执行副作用（如 useEffect，componentDidUpdate）以及处理渲染过程中的其他工作。这个阶段是同步执行的，但会根据 Fiber 的优先级控制更新的顺序。

中断与恢复（Interrupt and Resume）：React 可以在渲染过程中中断更新任务，优先执行其他重要任务（例如用户输入或动画），然后再恢复原来的更新任务。

React Fiber 的优势

提高性能：React Fiber 通过异步渲染和时间切片技术，可以在更新过程中分配空闲时间来处理其他任务，从而大幅提升性能。特别是在复杂的 UI 或大量更新的情况下，Fiber 使得 React 可以更高效地管理任务。

响应式 UI：通过优先级调度和协作渲染，React Fiber 能确保用户交互（如点击、滚动）等高优先级任务不会被阻塞，同时低优先级任务（如数据加载）可以被延迟。

更灵活的更新策略：React Fiber 引入了增量渲染的概念，使得组件的更新过程更加灵活，能够避免因长时间渲染导致的性能问题。

可中断的渲染：Fiber 使得 React 渲染过程更加细粒度，可以在渲染过程中随时暂停和恢复更新，避免阻塞 UI 响应。

React Fiber 的应用场景

动画和过渡：由于 React Fiber 可以管理任务的优先级和中断渲染，它非常适合动画和过渡效果的实现，能够使动画更加流畅，避免因长时间渲染阻塞动画效果。
高频更新的应用：对于需要频繁更新的应用（如实时数据展示、复杂的用户界面），React Fiber 提供了更高效的更新机制，避免了界面卡顿。
复杂应用：对于大型和复杂的 React 应用，React Fiber 能提供更好的性能优化，确保应用在处理大量 UI 更新时不会出现性能瓶颈。

总结

React Fiber 是 React 16 引入的全新渲染引擎，旨在提高性能并增强渲染过程的灵活性。通过异步渲染、优先级调度和中断更新等机制，React Fiber 能够更高效地处理复杂的 UI 更新，提升用户体验。它使得 React 具备了更强大的性能优化能力，尤其是在复杂的交互和大量数据更新的场景下。

Fiber事件优先级的五种级别

在 React Fiber 中，事件（特别是任务调度和更新过程中的任务）会按照不同的优先级进行处理。Fiber 的任务调度器通过事件的优先级来决定哪些任务应该被先执行，哪些任务可以延迟执行。React Fiber 将这些任务分为五个不同的优先级级别，这些级别对应着不同的任务类型，确保了高优先级的任务能被及时处理，而低优先级的任务可以推迟执行。

这五个优先级级别如下：

Immediate Priority (紧急优先级)
描述：这是最高优先级的任务，通常用于处理紧急且需要立即完成的任务。例如，用户输入（点击、键盘输入等）或者紧急的 UI 更新任务。React 会尽可能在当前帧内处理这些任务，以确保用户交互的流畅体验。
应用场景：用户输入事件、动画、UI交互等。
User-blocking Priority (用户阻塞优先级)
描述：此优先级的任务虽然不是非常紧急，但也需要尽快处理，否则可能会影响用户体验。React 会在有空余时间时尽量处理这类任务，但不会拖延过长时间。用户交互相关的渲染更新通常会被视为此类任务。
应用场景：响应用户输入（如滚动、点击），或者动画相关的更新等。
Normal Priority (普通优先级)
描述：这是默认的优先级，适用于那些不需要立即执行，但也不希望被过度延迟的任务。大部分的 UI 更新、组件重新渲染和状态更新都属于这个级别。
应用场景：常规的组件渲染，状态更新等。
Low Priority (低优先级)
描述：低优先级任务通常是那些不急于执行的任务，可以被推迟到其他任务完成后再执行。React 在空闲时间会处理这些任务，确保不会影响主要的用户交互或 UI 更新。
应用场景：定时器更新、非关键的数据加载等。
Idle Priority (空闲优先级)
描述：空闲优先级是最低的优先级，表示这些任务可以完全在浏览器的空闲时间里执行。当所有重要的任务都完成后，React 会在空闲时执行这些任务。空闲优先级任务通常对用户体验影响较小。
应用场景：如后台数据同步、页面渲染后的性能优化等。