React Fiber是什么

先贴一下GIthub的文档：

React Fiber is an ongoing reimplementation of React's core algorithm. It is the culmination of over two years of research by the React team.
The goal of React Fiber is to increase its suitability for areas like animation, layout, and gestures. Its headline feature is incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames.
Other key features include the ability to pause, abort, or reuse work as new updates come in; the ability to assign priority to different types of updates; and new concurrency primitives.

Fiber是一次对核心算法的重新实现，主要特性是增量式渲染，另外的关键特性包括更新时暂停、中断、重启工作，为不同类型的资源分配优先级，新的并发原语。

Fiber的本质

在本质上，Fiber是一个JavaScript对象,代表了React的一个工作单元。一个简化的Fiber对象结构如下:

{
type: 'div', // 组件类型
key: null, // React key
props: { ... }, // 组件的props
state: { ... }, // 组件的state
child: Fiber | null, // 第一个子元素
sibling: Fiber | null, // 下一个兄弟元素
return: Fiber | null, // 父元素
// ...其他属性
}


## 为什么需要Fiber?

在React 16之前,React使用递归的方式处理虚拟DOM的更新,这种方式被称为堆栈调和(Stack Reconciliation)。这种递归一旦开始就无法中断,当组件树层级很深时,递归更新时间超过了16ms,就会出现掉帧的现象,导致用户交互体验不佳。

Fiber架构的重要特性:

1. **可中断与恢复**: Fiber将渲染工作分解成小单元,可以根据优先级中断和恢复

2. **优先级控制**: 能够为不同类型的更新分配优先级

3. **并发渲染**: 支持同时执行多个渲染任务

## Fiber的工作流程

Fiber的工作流程主要分为两个阶段:

### 第一阶段: Reconciliation(调和)

这个阶段是可中断的,包括:
- 构建Fiber树
- 对比新旧节点
- 给需要更新的节点打上标记

### 第二阶段: Commit(提交) 

这个阶段是不可中断的,主要工作是:
- 将第一阶段的结果渲染到DOM上
- 调用生命周期方法
- 触发变更

## Fiber树的构建

Fiber树采用了双缓存技术:
- current树: 当前显示在页面上的树
- workInProgress树: 正在构建的新树

这种机制让React能够在构建新树的同时,保持旧树上的UI显示,提供了更好的用户体验。

## 总结

Fiber架构通过将更新分解成小单元,实现了对更新过程的控制,解决了React在处理大型应用时的性能问题。同时,Fiber还解决了React在处理动画、布局等复杂场景时的问题。

Fiber架构是React的一次重要革新,它通过可中断的更新机制和优先级控制,解决了React在大型应用中的性能问题。理解Fiber的工作原理,对于深入理解React的运行机制和优化React应用都有重要帮助。