能详细说一下React 中的fiber架构是什么

Question

在React中进行进行虚拟Dom的更新，采用的更新策略是什么？同时能详细说一下React 中的fiber架构是什么？

Answer 1

在 React 中进行虚拟 DOM 的更新，采用的是一种叫做“协调”（Reconciliation）的更新策略。具体来说，React 构建了一个虚拟 DOM 树，每当状态发生变化时，React 会比较前后两棵虚拟 DOM 树的差异，并计算出最小的更新操作来更新实际的 DOM。这个过程在 React 中称为“协调”。

React 的 fiber 架构是一种基于链表实现的调度算法，它的主要目的是提高 React 的渲染性能和响应性。在 React 中，每个组件都对应着一个 fiber 对象，这个对象中保存了组件的类型、props、状态等信息，同时还包含了与渲染相关的信息，比如父子关系、兄弟关系、DOM 节点信息等。

React 的 fiber 架构通过将更新任务分解成较小的单元来实现增量更新，从而提高了 React 的渲染性能和响应性。具体来说，React 将更新任务分解成一些小的工作单元，然后将这些工作单元按照优先级排序，并放入一个任务队列中。React 使用一个叫做“调度器”（Scheduler）的模块来管理任务队列，并根据优先级来决定哪些任务应该先执行，哪些任务可以暂停或推迟执行。

当 React 开始执行工作单元时，它会根据当前的时间片（Time Slice）来判断是否需要暂停或推迟执行。React 会将工作单元分成多个小的时间片，然后在每个时间片结束时检查是否还有未执行的任务，如果有，则将当前任务挂起，等待下一个时间片再继续执行。这个过程在 React 中称为“异步渲染”。

通过 fiber 架构和异步渲染，React 能够更加高效地处理大型应用程序和复杂的 UI 界面，并提高用户的响应性和交互性。