一文读懂 React 的 Fiber 架构到底是什么？

React 的 Fiber 架构是 React 16 版本引入的一种新的架构，旨在改善 React 的渲染性能和用户体验。以下是 Fiber 架构的主要特点和工作原理：

核心概念

• Fiber 节点：Fiber 是 React 中的一个基本工作单元，每个组件或元素都对应一个 Fiber 节点。这些节点通过链表结构连接起来，形成一个 Fiber 树，与组件树的结构相对应。
• 双缓存机制：React 使用双缓存机制，包括“current”和“workInProgress”两个树。当前显示在屏幕上的 UI 对应于“current”树，而正在构建的新 UI 树对应于“workInProgress”树。当“workInProgress”树构建完成后，它将替换“current”树。

工作原理

• 工作循环（Work Loop）：Fiber 引入了一个工作循环机制，它以合作式调度的方式处理工作单元。这意味着 React 可以在执行过程中暂停和恢复工作，优先处理更紧急的更新，以保持用户界面的响应性。
• 优先级调度：Fiber 为不同类型的更新分配了不同的优先级。高优先级的更新（如用户交互）会先于低优先级的更新（如网络请求响应）被处理。
• 增量渲染：Fiber 允许 React 将渲染工作分解为更小的单元，并在多个帧之间分配这些工作。这样可以避免长时间占用主线程，从而提高应用的交互性和性能。

优势

• 提高响应性：通过允许 React 在渲染过程中暂停和恢复工作，Fiber 使得应用能够更及时地响应用户的输入和其他高优先级任务。
• 优化性能：Fiber 的增量渲染和优先级调度机制使得 React 在处理复杂应用和频繁更新时更加高效。
• 更好的错误处理：Fiber 引入了错误边界（Error Boundaries）的概念，允许开发者捕获组件树中的错误并显示备用 UI，而不会导致整个应用崩溃。

与 React16 之前有哪些改进

• 渲染过程可以中断
• 区分了任务的优先级，可以按优先级执行
• 支持异步渲染
• 支持增量渲染
• 传统架构渲染过程中发生错误会崩溃，而Fiber架构不会，它引入了错误边界，可以捕获追踪错误信息
• 允许外部系统（如浏览器或服务器）控制 React 的渲染过程