了解了解React Fiber的起源和架构，为后续的源码阅读做准备！

# React Fiber

在React15中，有虚拟DOM这样一个概念，负责视图，而Reconciler在对虚拟DOM树做diff算法的时候不允许外界打断的，这是一个递归的过程，而fiber的提出就很好的解决了这个问题。

在React16中，虚拟DOM有个正式的称呼——Fiber，不再是曾经用于递归的虚拟DOM数据结构了。

# Fiber的目标

为了满足React16的Scheduler调度，核心概念就是可以随心所欲的控制我们的代码，具体来说则是：

  • 可以暂停工作，稍后再回来
  • 为不同类型工作分配优先级
  • 重用之前完成的工作
  • 如果不再需要，则中止工作

# Fiber是什么

Fiber的含义有几种：

  1. 可以理解为一种架构，也就是常说的FIber树。实现了“双缓存技术”；
  2. 本质上可以理解为一种数据结构，是个最小的工作单元，每一个Fiber节点都对应一个 React element，保存了对应的DOM节点信息，大量的Fiber节点组成了一个链表，这是虚拟DOM树的另外一种表示。

# Fiber作为架构的工作原理

就像前面提到的那样，React使用“双缓存技术”来完成Fiber树的构建和替换，对应着的就是DOM树的创建与更新。

在内存中构建并直接替换的技术叫做双缓存 (opens new window)

在React中最多会同时存在两棵Fiber树：

  • 当前屏幕上显示内容对应的Fiber树称为current Fiber树

  • 正在内存中构建的Fiber树称为workInProgress Fiber树。

两棵树对应着两种不同的节点：

  • current Fiber树中的Fiber节点被称为`current fiber``
  • ``workInProgress Fiber树中的Fiber节点被称为workInProgress fiber`
  • 他们通过alternate属性连接。

替换原理：

React应用的根节点通过使current指针在不同Fiber树的rootFiber间切换来完成current Fiber树指向的切换。

即当workInProgress Fiber树构建完成交给Renderer渲染在页面上后，应用根节点的current指针指向workInProgress Fiber树，此时workInProgress Fiber树就变为current Fiber树。

每次状态更新都会产生新的workInProgress Fiber树，通过current与workInProgress的替换，完成DOM更新。

# 总结

了解了Fiber的起源与架构，Fiber节点，链表结构，存储DOM信息，可以构成Fiber树，而Fiber树又通过双缓存技术进行替换和更新。