【React】Fiber介绍

一、React Fiber特性

当提到 React Fiber 的原理时，我们指的是 React 16 引入的一种协调引擎，用于处理组件的更新和渲染。它的设计目标是提高 React 应用的性能和交互能力，特别是在大型应用或需要高度响应性的场景下。以下是 React Fiber 的一些核心原理：

1. 增量渲染：传统的 React 渲染是同步的，一旦开始渲染，需要一次性完成整个组件树的渲染，这样可能导致页面发生阻塞。而 React Fiber 将渲染任务划分为小块，允许渲染中断和恢复，以便在任务中间可以中止，响应更高优先级的任务，然后再恢复。

2. 优先级调度：Fiber 使用优先级调度，通过定义不同优先级的任务队列来决定任务的执行顺序。例如，用户交互或动画可能被赋予更高的优先级，以确保及时响应。优先级调度有助于提供更好的用户体验。

3. 可中断和恢复：由于任务被分割为小块，React Fiber 具备了可中断和恢复的能力。这使得应用在进行渲染的过程中，可以在适当的时候中断并恢复任务，以响应更高优先级的操作。

4. 工作单元：每个组件被映射到一个称为 Fiber 的数据结构，它包含了组件的状态、属性和其他信息。Fiber 结构可以让 React 更好地追踪组件的变化和更新。

当组件被映射成Fiber数据结构时，重要的属性有：

1、type and key：表示节点的类型以及key值

2、child and sibling：表示节点的孩子和兄弟

3、return：节点的返回地址，孩子节点的return为parent【因为函数组件的调用和渲染可以视为函数栈帧调用（栈帧中存放函数地址、函数参数、局部变量等）的一种特例】

1. Reconciliation（协调）：Fiber 使用一种可中断的协调机制，可以跳过不必要的渲染工作，避免了阻塞线程。其实其本质就是virtual Dom的Diff算法，其决定了此时什么节点应该被更新以及通过什么方式更新。

在老的架构之中，其diff基于Stack Reconciler实现，即通过递归遍历每个树上的节点，来查找需要更新的部分；而引入Fiber之后，diff算法变为基于fiber Reconciler。具体算法原理可见此文：

Vue diff VS React diff - 掘金

1. 渲染阶段和提交阶段：Fiber 的工作分为两个阶段，渲染阶段和提交阶段。渲染阶段会执行协调操作，构建 Fiber 树，而提交阶段会应用实际的 DOM 变更。

2. 错误处理：Fiber 引入了错误边界（Error Boundaries），可以在组件层级中捕获错误，以防止错误传播到整个应用。

3. 可中断时间片：为了避免渲染过程中长时间的中断，React Fiber 使用了时间分片的概念，将渲染任务划分为小的时间片，确保在时间片结束后有机会中断任务。

综上所述，React Fiber 是一种通过引入分层渲染、优先级调度和可中断机制来提高 React 应用性能和交互体验的引擎。它的目标是让应用在更多情况下都能够保持响应，并且更好地适应现代的 Web 开发需求。

二、React Fiber和Fiber tree

“React Fiber" 和 "Fiber Tree" 都与 React 中的性能优化和渲染机制有关，但它们指的是不同的概念。其实fiber tree是基于引入的新的react fiber框架引擎来做出的对virtual dom结构以及diff算法的优化，让我们来解释一下它们之间的区别：

1. React Fiber： React Fiber 是 React 16 中引入的新的协调引擎。它是用于管理组件更新和渲染的一种方式，旨在提高 React 应用的性能和交互能力。Fiber 引入了一种可中断和恢复的渲染过程，通过将渲染任务划分为小块并使用优先级调度来管理它们。这样可以在渲染任务中间进行中断，以响应更高优先级的任务（如用户输入或动画），然后再恢复未完成的任务。

2. Fiber Tree： Fiber Tree 是指 React 内部使用的虚拟 DOM 树的一种改进版本。在传统的渲染中，React 使用递归的方式遍历整个组件树，进行 DOM 的比对和更新，这可能会导致性能问题。Fiber Tree 采用一种可中断的、分层次的、逐步渲染的方式来构建组件树。每个组件都有一个对应的 Fiber 节点，它包含了组件的状态、属性和其他信息。React Fiber 使用 Fiber Tree 来管理组件更新流程，通过 Fiber Tree 的分层结构来实现渲染的可中断和优先级调度。

简而言之，React Fiber 是一种协调引擎，用于管理组件的更新和渲染，而 Fiber Tree 是一种改进的虚拟 DOM 树结构，用于支持 React Fiber 引擎的工作方式。这两者一起为 React 应用带来了更高的性能和更好的用户交互体验。