React Fiber: 从 Reconciliation 到 Concurrent Mode

React Fiber 是 React 中的一种新的协调算法，它的主要目的是提高 React 的性能和可维护性。在 React Fiber 之前，React 使用了一种叫做 Stack Reconciliation 的算法来处理组件的更新和渲染。但是 Stack Reconciliation 存在一些问题，比如无法中断和恢复、无法处理优先级等，这导致了一些性能问题。为了解决这些问题，React 团队引入了 React Fiber。

Reconciliation

在 React 中，当组件的 props 或者 state 发生变化时，React 会重新计算组件的 Virtual DOM，并将其与上一次计算的 Virtual DOM 进行比较，找出需要更新的部分，然后将这些部分更新到浏览器中。这个过程就叫做 Reconciliation。

在 React 中，Reconciliation 有两个阶段：Diffing 和 Committing。

Diffing 阶段：React 会将当前的 Virtual DOM 与上一次的 Virtual DOM 进行比较，找出需要更新的部分。
Committing 阶段：React 会将需要更新的部分更新到浏览器中。
Stack Reconciliation

在 React 15 及之前的版本中，React 使用了一种叫做 Stack Reconciliation 的算法来处理组件的更新和渲染。Stack Reconciliation 是一种递归算法，它会从根节点开始递归遍历整个 Virtual DOM 树，找出需要更新的部分，并将这些部分更新到浏览器中。

Stack Reconciliation 存在一些问题：

无法中断和恢复：由于 Stack Reconciliation 是递归算法，所以无法中断和恢复。如果一个组件的更新需要很长时间，那么整个更新过程都会被阻塞。
无法处理优先级：由于 Stack Reconciliation 是递归算法，所以无法处理优先级。如果有一个高优先级的更新需要被处理，那么整个更新过程都会被阻塞。
Concurrent Mode

为了解决 Stack Reconciliation 存在的问题，React 团队引入了 React Fiber。React Fiber 是一种新的协调算法，它是一个基于链表的、可中断的、可恢复的算法。

React Fiber 的主要特点包括：

可中断：React Fiber 是基于链表的算法，可以在任何时候中断和恢复。
可恢复：React Fiber 可以在任何时候恢复之前被中断的工作。
优先级：React Fiber 可以处理不同优先级的更新。
React Fiber 的工作流程可以概括为以下几个步骤：

构建 Fiber 树：React 会根据组件树构建一个 Fiber 树，Fiber 树是一个基于链表的数据结构。

Diffing 阶段：React 会从根节点开始遍历 Fiber 树，并找出需要更新的部分。

Reconciliation 阶段：React 会根据需要更新的部分构建一个 Effect List，并将这个 Effect List 保存到 Fiber 节点中。

Committing 阶段：React 会遍历 Effect List，并将需要更新的部分更新到浏览器中。

总结

React Fiber 是 React 中的一种新的协调算法，它可以提高 React 的性能和可维护性。相比于 Stack Reconciliation，React Fiber 是一种基于链表的、可中断的、可恢复的算法，并且可以处理不同优先级的更新。通过引入 React Fiber，React 团队为我们提供了更好的工具来构建高性能、可维护的应用程序。