React Fiber 架构

React Fiber 是 React 16 版本引入的一种新的架构，解决了以前的更新机制的问题，即在长时间的更新过程中，主线程会被阻塞，导致应用无法及时响应用户输入。

一、架构背景和动机

为什么需要 Fiber？

在 React 16 之前的版本中，是使用递归的方式处理组件树更新，称为堆栈调和（Stack Reconciliation），这种方法一旦开始就不能中断，直到整个组件树都被遍历完。这种机制在处理大量数据或复杂视图时可能导致主线程被阻塞，从而使应用无法及时响应用户的输入或其他高优先级任务。

Fiber 的引入改变了这一情况。Fiber 可以理解为是 React 自定义的一个带有链接关系的 DOM 树，每个 Fiber 都代表了一个工作单元，React 可以在处理任何 Fiber 之前判断是否有足够的时间完成该工作，并在必要时中断和恢复工作。

Fiber 架构解决的问题是什么？

Fiber 架构主要解决了 React 在处理大型应用程序时可能出现的性能问题以及用户交互响应的延迟问题。

Fiber 架构引入了任务优先级的概念，可以根据任务的紧急程度和重要性对任务进行优先级排序，确保优先级高的任务能够更快地被处理。这样，即使在进行复杂的组件渲染时，也可以中断渲染过程去处理高优先级的用户交互事件，从而提高了应用的响应性和性能。

具体来说，Fiber 架构解决了以下问题：

提高用户交互的响应性：通过允许渲染过程可以被中断，Fiber 架构使得 React 能够更快地响应用户的操作，减少了页面卡顿和无响应的情况。
优化任务调度：Fiber 架构通过引入任务优先级，使得 React 能够更智能地安排任务的执行顺序，优先处理那些对用户体验影响最大的任务。
提升动画和交互的流畅度：在 Fiber 架构下，React 可以更好地处理动画和连续的用户交互，因为这些任务可以被赋予更高的优先级，从而减少掉帧和卡顿现象。
支持异步渲染：Fiber 架构使得 React 能够支持异步渲染，这意味着 React 可以在不阻塞主线程的情况下进行 DOM 的更新，从而提升了应用的性能。

Fiber 架构与传统 React 架构的对比

	Fiber 架构	传统架构（基于 Stack Reconciler）
渲染过程	可中断，优先处理紧急的任务	不可中断，一旦开始必须渲染完成整个组件树，导致用户界面在渲染期间无响应
任务优先级	根据任务的紧急程度和重要性来调度它们的执行	任务的执行顺序是固定的，没有区分任务的优先级。
异步渲染	支持异步渲染，可以在不阻塞主线程的情况下进行 DOM 的更新	渲染过程是同步，当前任务完成后才能开始下一个任务的
错误恢复	渲染过程中发生错误导致应用崩溃	引入了错误边界（Error Boundaries）的概念，将错误抛给错误边界处理
控制反转	允许外部系统（如浏览器或服务器）控制 React 的渲染过程	React 负责整个渲染过程的控制

Fiber 工作原理中最核心的点就是：可以中断和恢复，这个特性增强了 React 的并发性和响应性。

实现可中断和恢复的原因就在于：Fiber 的数据结构里提供的信息让 React 可以追踪工作进度、管理调度和同步更新到 DOM

现在我们来聊聊 Fiber 工作原理中的几个关键点：