什么是 React Fiber？与之前的方案相比，它有哪些改进？

TL;DR

React Fiber 是对 React 渲染算法的完全重写，在 React 16 中引入。它通过将渲染工作分解成更小的单元来改进渲染过程，允许 React 暂停和恢复工作，从而使 UI 具有更高的响应速度。这种方法支持时间切片和 Suspense 等功能，而这些功能在之前的基于堆栈的算法中是不可能实现的。

什么是 React Fiber？与之前的方案相比，它有哪些改进？

React Fiber 简介

React Fiber 是 React 核心渲染和协调算法的重新实现。它在 React 16 中引入，用于解决之前基于堆栈的算法的局限性。Fiber 的主要目标是实现虚拟 DOM 的增量渲染，这使得 React 可以将渲染工作拆分成块，并在多个帧中分散开来。

与之前的方案相比的主要改进

增量渲染

之前的基于堆栈的算法在一个单一的、同步的传递中处理更新，这可能导致性能问题，尤其是在复杂的 UI 中。React Fiber 将渲染工作分解成更小的单元，称为“fiber”，允许 React 暂停和恢复工作。这使得 UI 具有更高的响应速度，并防止长时间阻塞主线程。

时间切片

React Fiber 引入了时间切片的概念，它允许 React 根据更新的紧急程度对其进行优先级排序。例如，用户交互（如点击和按键）可以优先于不太关键的更新。这确保了即使在繁重的渲染任务期间，UI 也能保持响应。

并发

使用 Fiber，React 可以同时处理多个任务。这意味着 React 可以在处理其他任务的同时开始渲染更新，从而带来更流畅、更具响应性的用户体验。

错误边界

React Fiber 引入了错误边界，允许开发人员优雅地捕获和处理组件树中的错误。这在之前的基于堆栈的算法中是不可能的，在之前的算法中，错误可能导致整个应用程序崩溃。

改进的动画支持

Fiber 的增量渲染和时间切片功能使得实现流畅的动画和过渡变得更容易。React 现在可以优先考虑动画帧并确保及时渲染它们，从而带来更好的用户体验。

代码示例

这里有一个简单的例子来说明 React Fiber 如何提高渲染性能：

class MyComponent extends React.Component {
  state = {
    items: Array.from({ length: 10000 }, (_, i) => i),
  };

  render() {
    return (
      <div>
        {this.state.items.map((item) => (
          <div key={item}>{item}</div>
        ))}
      </div>
    );
  }
}

使用之前的基于堆栈的算法，渲染此组件可能会导致 UI 冻结。使用 React Fiber，渲染工作被分解成更小的单元，允许 React 暂停和恢复工作，保持 UI 的响应性。

什么是 React Fiber？与之前的方案相比，它有哪些改进？

TL;DR