跳到主要内容

Fiber 相关

React Reconciler 为何要采用 fiber 架构？​

React Reconciler 采用 Fiber 架构主要是为了提升性能和用户体验。Fiber 是 React 16 引入的一种新的协调算法，它相对于旧版的 Reconciler 具备以下优势：

1. 增量渲染​

  • 旧版 Reconciler：一次性计算并更新整个 UI 树，可能会导致性能瓶颈，尤其是在大型应用中。
  • Fiber 架构：支持增量渲染，将渲染任务拆分为小的单元，分批执行。这样可以在长时间运行的任务中插入中断点，使得 UI 更响应式。

2. 中断和优先级​

  • 旧版 Reconciler：一旦开始更新，渲染过程无法中断，可能会阻塞用户交互。
  • Fiber 架构：允许中断和恢复工作，可以根据任务的优先级来调整渲染顺序。低优先级的任务可以在高优先级任务完成后再继续执行，提高了用户交互的流畅性。

3. 任务调度​

  • 旧版 Reconciler：没有任务调度机制，所有更新都按顺序执行。
  • Fiber 架构：使用任务调度机制（Scheduler）来管理和调度不同优先级的更新任务，确保重要任务（如用户输入、动画）优先处理。

4. 异常处理​

  • 旧版 Reconciler：异常处理能力有限，无法优雅地处理渲染过程中的错误。
  • Fiber 架构：允许局部错误处理，确保在渲染过程中即使发生异常，也能保证 UI 的部分更新和恢复。

5. 渲染中断与恢复​

  • 旧版 Reconciler：无法中断和恢复渲染。
  • Fiber 架构：支持在渲染过程中中断并恢复，能够平滑处理长时间运行的任务。

6. 事务管理​

  • 旧版 Reconciler：处理复杂的事务和操作较为困难。
  • Fiber 架构：将渲染任务分解为独立的事务，每个事务可以独立地管理和控制，简化了复杂操作的管理。

fiber 架构的工作原理？​

React 中的 Fiber 架构是一种新的协调算法，旨在提高 React 的性能和用户体验。它通过引入新的数据结构和机制，使得 React 能够更高效地处理 UI 更新。以下是 Fiber 架构的工作原理：

1. Fiber 数据结构​

  • Fiber 节点：Fiber 是一个表示组件的内部数据结构，每个 Fiber 节点对应一个 React 组件。它包含了组件的状态、更新信息和子组件的引用等。
  • Fiber 树：Fiber 节点形成了一棵 Fiber 树，类似于旧版的虚拟 DOM 树。每个 Fiber 节点指向其父节点、子节点和兄弟节点。

2. 工作单元和增量渲染​

  • 工作单元：渲染过程被分解为多个工作单元，每个单元代表一个小的渲染任务。这样可以将渲染过程拆分成可中断的任务，以避免长时间的阻塞。
  • 增量渲染：Fiber 允许将渲染任务拆分为增量的操作，逐步完成整个渲染过程。每次渲染会处理 Fiber 树的一部分，允许在任务之间插入中断点，从而提高了渲染的响应性。

3. 调度优先级​

  • 优先级调度：Fiber 引入了任务调度机制，允许根据任务的优先级来决定渲染的顺序。高优先级的任务（如用户输入、动画）会优先处理，而低优先级的任务（如数据加载）会在空闲时间处理。
  • 任务中断和恢复：Fiber 支持在渲染过程中中断并恢复任务。当重要任务需要处理时，当前的渲染任务可以被中断，待重要任务完成后再恢复继续。

4. 更新和协调​

  • 更新队列：每个 Fiber 节点都有一个更新队列，用于存储与组件相关的更新信息。更新队列可以包含多个更新，React 会根据更新的优先级和顺序进行协调。
  • 协调过程：Fiber 通过对比新旧 Fiber 树来决定哪些部分需要更新。这一过程称为协调（Reconciliation），它会检查节点的变更，生成更新的补丁。

5. 渲染阶段和提交阶段​

  • 渲染阶段：在渲染阶段，Fiber 架构会计算出需要更新的部分，但不会立即更新 DOM。这一阶段主要用于计算新的 Fiber 树，并生成更新任务。
  • 提交阶段：在提交阶段，Fiber 会将渲染阶段计算出的更新应用到实际的 DOM 上。这个阶段是同步的，确保所有的更改都被正确地应用。

6. 错误处理​

  • 错误边界：Fiber 提供了更好的错误处理机制，可以局部地处理渲染中的错误。即使在渲染过程中发生错误，也能保证 UI 的部分更新和恢复。

说说Fiber的含义与数据结构​

在 React 的 Fiber 架构中，“Fiber” 是一种表示组件及其状态的内部数据结构。它是对 React 组件的详细描述，旨在提高组件的渲染性能和用户体验。以下是 Fiber 的含义和数据结构的详细解释：

1. Fiber 的含义​

  • Fiber 是一种内部数据结构：它用于表示每个 React 组件的状态和属性。每个 Fiber 对象包含有关组件的信息，如更新状态、子组件、位置信息等。
  • Fiber 的目标：通过 Fiber 数据结构，React 可以更高效地处理 UI 更新，支持增量渲染、任务中断和优先级调度。

2. Fiber 数据结构​

Fiber 数据结构由多个字段组成，每个字段用于存储与组件相关的不同信息。主要字段包括：

  • tag：指示 Fiber 节点的类型，如函数组件、类组件或 DOM 元素。
  • key：唯一标识 Fiber 节点的键，用于优化子节点的匹配。
  • elementType：组件的类型，表示组件的类型（函数组件、类组件等）。
  • type：组件的具体类型或组件实例。例如，对于 DOM 元素，它可能是 'div' 或 'span'；对于类组件，它是类构造函数。
  • return：指向 Fiber 节点的父节点。形成 Fiber 树的父子关系。
  • child：指向 Fiber 节点的第一个子节点。用于构建 Fiber 树的结构。
  • sibling：指向 Fiber 节点的下一个兄弟节点。用于在同一层级遍历子节点。
  • stateNode：保存与组件关联的实际 DOM 节点或组件实例。例如，对于类组件，它是组件的实例；对于 DOM 元素，它是实际的 DOM 节点。
  • alternate：指向 Fiber 节点的旧版本（即上一次渲染时的 Fiber 节点）。用于比较新旧 Fiber 树，进行更新和协调。
  • updateQueue：保存组件的更新队列，包含需要应用的更新信息。每个更新记录可能包含一个新的状态或属性。
  • effectTag：用于标记 Fiber 节点的更新效果（如插入、更新或删除）。在提交阶段，React 会根据这些标记进行实际的 DOM 更新。
  • pendingProps 和 memoizedProps：分别表示待处理的属性和已记忆的属性。pendingProps 是新传入的属性，而 memoizedProps 是上一次渲染时的属性。

3. Fiber 树​

  • Fiber 树结构：Fiber 树类似于虚拟 DOM 树，表示组件的层级结构。每个 Fiber 节点代表一个组件或 DOM 元素。Fiber 树通过 return、child 和 sibling 字段构建成树形结构。
  • 更新和协调：在 Fiber 架构中，React 使用 Fiber 数据结构来处理组件更新和协调（Reconciliation）。通过比较新旧 Fiber 树，React 可以计算出需要更新的部分并生成补丁。

4. Fiber 的优势​

  • 增量渲染：Fiber 支持将渲染任务拆分为多个增量的工作单元，允许中断和恢复渲染，避免长时间的阻塞。
  • 优先级调度：Fiber 引入了任务优先级调度，允许高优先级的任务（如用户输入）优先处理，提高响应性。
  • 错误边界：Fiber 提供了更好的错误处理机制，可以局部地处理渲染中的错误，保证应用的稳定性。

说说 React render 阶段的执行过程​

在 React 的 Fiber 架构中，render 阶段是处理组件更新和生成虚拟 DOM 的关键阶段。

以下是 React 在 render 阶段的执行过程的详细步骤：

1. 触发渲染​

  • 更新请求：组件的状态或属性发生变化时，会触发一次渲染。更新可以由用户交互、网络请求响应或内部状态变化等引起。
  • 调度更新：React 会将渲染任务调度到 Fiber 树的更新队列中。调度过程使用 React 的调度器来确定任务的优先级。

2. 开始 Fiber 树的协调​

  • 创建 Fiber 节点：在 render 阶段，React 会为每个组件创建或更新 Fiber 节点。Fiber 节点用于表示组件及其状态，包括当前的属性、子节点和更新队列等。
  • 更新 Fiber 树：React 会将新的 Fiber 节点与旧的 Fiber 节点进行比较。这一步称为协调（Reconciliation）。React 会遍历 Fiber 树，对比新旧 Fiber 节点，计算出最小的更新集合。

3. 执行 render 方法​

  • 执行组件的 render 方法：对于每个 Fiber 节点，React 会执行组件的 render 方法。render 方法会返回一个虚拟 DOM 树，这个虚拟 DOM 树会被包装成新的 Fiber 节点。
  • 构建新的 Fiber 树：render 方法返回的虚拟 DOM 会被转换成新的 Fiber 节点，并替代旧的 Fiber 节点。新的 Fiber 节点将会作为子节点插入到父节点的子节点链中。

4. 更新 Fiber 节点​

  • 处理更新：在 Fiber 节点中，React 会处理更新队列，应用新的状态或属性。pendingProps 和 memoizedProps 分别表示待处理的属性和已记忆的属性。
  • 标记更新类型：React 会在 Fiber 节点中设置 effectTag，标记当前 Fiber 节点的更新类型，如插入、更新或删除。这些标记将用于提交阶段的实际 DOM 更新。

5. 构建 Fiber 树的副作用​

  • 保存副作用：在 render 阶段，React 会收集和保存副作用（side effects），例如需要在组件挂载或更新时执行的副作用操作（如数据获取、事件监听等）。这些副作用将在 commit 阶段应用到实际 DOM 上。

6. 完成 render 阶段​

  • 生成新的 Fiber 树：完成 render 阶段后，React 会生成一棵新的 Fiber 树，这棵树包含了所有更新后的 Fiber 节点。
  • 准备提交：新的 Fiber 树会被提交到 commit 阶段进行实际的 DOM 更新。提交过程包括应用副作用和实际的 DOM 操作。

React commit 阶段的执行过程​

在 React 的 Fiber 架构中，commit 阶段是将更新应用到实际 DOM 的关键步骤。这个阶段处理在 render 阶段中计算出的所有副作用，并实际更新页面内容。以下是 commit 阶段的详细执行过程：

1. 提交 Fiber 树​

  • 获取 Fiber 树：commit 阶段开始时，React 会获取从 render 阶段生成的 Fiber 树。这棵树包含所有需要更新的 Fiber 节点及其副作用标记。

2. 遍历 Fiber 树​

  • 递归遍历：React 会递归遍历 Fiber 树，从根节点开始，逐层处理每个 Fiber 节点。每个节点会根据其 effectTag 属性执行相应的操作。
  • 处理副作用：副作用包括插入、更新和删除 DOM 元素、执行生命周期方法、调用 useEffect 和 useLayoutEffect 的回调函数等。

3. 应用副作用​

  • 插入节点：对于标记为插入的 Fiber 节点，React 会在实际 DOM 中插入对应的节点。这包括创建新的 DOM 元素、设置属性和插入到正确的位置。
  • 更新节点：对于标记为更新的 Fiber 节点，React 会更新现有的 DOM 元素。这包括更新元素的属性、文本内容和样式等。
  • 删除节点：对于标记为删除的 Fiber 节点，React 会从实际 DOM 中移除对应的节点。这包括删除元素、清理事件监听器等。

4. 处理生命周期方法和副作用​

  • 调用生命周期方法：在 commit 阶段，React 会调用组件的生命周期方法，如 componentDidMount、componentDidUpdate 和 componentWillUnmount。
  • 执行 useEffect 和 useLayoutEffect：React 会执行 useEffect 和 useLayoutEffect 的回调函数。这些回调函数在组件挂载和更新后执行，用于处理副作用操作（如数据获取、事件绑定等）。

5. 更新 Fiber 树​

  • 更新 Fiber 节点：在 commit 阶段完成后，React 会更新 Fiber 节点的状态和属性，将 current 树指向新的 Fiber 树。
  • 清理工作：完成副作用处理后，React 会清理 Fiber 节点上的副作用标记和临时状态，为下一次渲染做好准备。

6. 浏览器布局和绘制​

  • 布局计算：在实际 DOM 更新后，浏览器会进行布局计算，确定元素的最终位置和尺寸。
  • 绘制：浏览器会根据布局计算结果绘制页面内容。这个过程包括将元素绘制到屏幕上，并处理样式、颜色和图像等。

React 中，fiber 是如何实现时间切片的？​

Fiber 的时间切片（Time Slicing）是一种优化 React 渲染性能的技术，它允许将长时间运行的任务分解成多个小任务，以便在主线程上交替执行其他任务，从而提高用户界面的响应性。以下是时间切片在 Fiber 架构中实现的主要原理和步骤：

1. 任务拆分和优先级​

  • 任务拆分：Fiber 架构允许将长时间运行的任务（如组件更新）拆分成多个小的 Fiber 节点处理单元。这些小任务可以在浏览器的空闲时间中逐步完成，而不是一次性处理所有任务。
  • 优先级调度：React 为不同的更新任务分配不同的优先级。例如，用户输入相关的更新（如点击和输入事件）通常会被赋予较高的优先级，而低优先级的更新（如数据预取）则可能在用户操作之后执行。优先级调度可以确保重要的任务优先处理。

2. 任务调度​

  • 调度器（Scheduler）：React 使用调度器来控制任务的执行。调度器决定何时执行 Fiber 节点的更新工作，以及在主线程上分配的时间片。调度器会根据任务的优先级和浏览器的空闲时间来安排任务执行。
  • 时间片切换：时间切片的核心思想是将长时间运行的任务分割成多个时间片（时间段），并在每个时间片内处理一部分任务。在每个时间片结束时，React 会检查是否有更高优先级的任务需要处理，或者是否需要将当前任务暂停，等待下一次时间片继续处理。

3. Fiber 节点的处理​

  • 工作单元：每个 Fiber 节点代表一个工作单元，处理 Fiber 节点的任务被称为“工作单元”。在时间切片过程中，React 会逐步处理这些工作单元，以便将渲染任务拆分成较小的部分。
  • 中断与恢复：如果在处理 Fiber 节点的过程中，浏览器遇到用户交互（如点击或滚动），React 可以中断当前任务，并优先处理这些用户交互相关的高优先级任务。一旦用户交互处理完成，React 会恢复中断的任务，继续处理剩余的 Fiber 节点。

4. 流程实现​

  1. 任务开始：当 React 开始执行更新任务时，它会将任务拆分成多个 Fiber 节点的处理单元，并根据优先级安排这些任务。
  2. 调度执行：调度器会分配时间片来处理这些 Fiber 节点。每个时间片内，React 会处理一定数量的 Fiber 节点，更新虚拟 DOM 和实际 DOM。
  3. 检查任务状态：在每个时间片结束时，React 会检查是否有高优先级任务需要处理，或者是否需要暂停当前任务。调度器决定是否继续执行当前任务或切换到其他任务。
  4. 恢复执行：如果任务被中断，React 会在下一次时间片中恢复执行，继续处理未完成的 Fiber 节点。

5. 用户交互​

  • 响应用户操作：时间切片技术确保用户操作（如输入、点击）能够及时响应。React 在处理高优先级任务时，能够快速响应用户交互，提高页面的交互性能。
  • 优化渲染：通过将长时间运行的任务分解成多个时间片，React 能够避免阻塞主线程，提高页面的整体性能和响应性。

总结​

Fiber 的时间切片实现使得 React 能够高效地处理长时间运行的渲染任务，通过将任务拆分成多个小任务，并在主线程上分配时间片来逐步完成这些任务。这种方法可以显著提高用户界面的响应性和性能，确保高优先级任务能够及时处理，并优化页面渲染体验。