Fiber

Fiber架构是什么

JavaScript引擎和页面渲染引擎两个线程是互斥的，当其中一个线程执行时，另一个线程只能挂起等待

如果JavaScript线程长时间地占用了主线程，那么渲染层面的更新就不得不长时间地等待，界面长时间不更新，会导致页面响应度变差，用户可能会感觉到卡顿

而这也正是 React 15 的 Stack Reconciler 所面临的问题，当React在渲染组件时，从开始到渲染完成整个过程是一气呵成的，无法中断的

如果组件较大，那么js线程会一直执行，然后等到整棵VDOM树计算完成后，才会交给渲染的线程

这就会导致一些用户交互、动画等任务无法立即得到处理，导致卡顿的情况

所以在React 16中，Facebook推出了Fiber架构

简单说一下Fiber架构做了什么：

• 为每一个任务增加了优先级，优先级高的任务会中断优先级低的任务，无论优先级低的任务执行到哪里，只要被中断了，再次执行这个任务的时候就需要重新执行。
• DOM diff 树变为了两条链表，即一个DOM对应两个队列，目的是为了找到优先级低的被中断的任务，将其重新开始执行
• 增加了异步任务，调用requestIdleCallback api，浏览器空闲的时候执行

总结，因为 JavaScript 单线程的特点，每个同步任务不能耗时太长，不然就会让程序不会对其他输入作出相应，React 的更新过程就是犯了这个禁忌，而 React Fiber 就是要改变现状。

Fiber是如何解决的

Fiber解决每一个任务耗时事件过长的方法就是分片，即把一个耗时很长的任务分为很多很多小任务，完成了一个小任务，就检查是否存在优先级更高的任务，如果有，转而去执行优先级高的任务，如果没有就继续进行下一步的小任务；

如果一个任务还没完成（时间到了），就会被另一个更高优先级的更新过程打算，这个时候，优先级高的更新任务会优先处理，而低优先级更新任务所作的工作则会完全作废，然后等待机会重头再来；

Fiber节点

从架构角度而言，Fiber是对于React核心算法的重写，我理解为把不可中断的代码解析过程变为可中断的；

从编码角度而言，Fiber是React内部定义的一种数据结构，他是Fiber树的节点单位，也就是React 16新架构下的虚拟DOM

一个Fiber节点就是一个Javasrcipt对象，里面包含了元素的信息、该元素的更新操作队列、类型，其数据结构：

type Fiber = {
  // 用于标记fiber的WorkTag类型，主要表示当前fiber代表的组件类型如FunctionComponent、ClassComponent等
  tag: WorkTag,
  // ReactElement里面的key
  key: null | string,
  // ReactElement.type，调用`createElement`的第一个参数
  elementType: any,
  // The resolved function/class/ associated with this fiber.
  // 表示当前代表的节点类型
  type: any,
  // 表示当前FiberNode对应的element组件实例
  stateNode: any,

  // 指向他在Fiber节点树中的`parent`，用来在处理完这个节点之后向上返回
  return: Fiber | null,
  // 指向自己的第一个子节点
  child: Fiber | null,
  // 指向自己的兄弟结构，兄弟节点的return指向同一个父节点
  sibling: Fiber | null,
  index: number,

  ref: null | (((handle: mixed) => void) & { _stringRef: ?string }) | RefObject,

  // 当前处理过程中的组件props对象
  pendingProps: any,
  // 上一次渲染完成之后的props
  memoizedProps: any,

  // 该Fiber对应的组件产生的Update会存放在这个队列里面
  updateQueue: UpdateQueue<any> | null,

  // 上一次渲染的时候的state
  memoizedState: any,

  // 一个列表，存放这个Fiber依赖的context
  firstContextDependency: ContextDependency<mixed> | null,

  mode: TypeOfMode,

  // Effect
  // 用来记录Side Effect
  effectTag: SideEffectTag,

  // 单链表用来快速查找下一个side effect
  nextEffect: Fiber | null,

  // 子树中第一个side effect
  firstEffect: Fiber | null,
  // 子树中最后一个side effect
  lastEffect: Fiber | null,

  // 代表任务在未来的哪个时间点应该被完成，之后版本改名为 lanes
  expirationTime: ExpirationTime,

  // 快速确定子树中是否有不在等待的变化
  childExpirationTime: ExpirationTime,

  // fiber的版本池，即记录fiber更新过程，便于恢复
  alternate: Fiber | null,
}

运行过程

首先 React 中任务切割为多个步骤，分批完成。在完成一部分任务之后，将控制权交回给浏览器，让浏览器有时间再进行页面的渲染。等浏览器忙完之后有剩余时间，再继续之前 React 未完成的任务，是一种合作式调度。

从这种设计上可以去参考生成器函数，原理类似于这种控制权移交方案；

该实现过程是基于Fiber节点实现，作为静态的数据结构来说，每个 Fiber节点对应一个 React element，保存了该组件的类型（函数组件/类组件/原生组件等等）、对应的 DOM 节点等信息。

作为动态的工作单元来说，每个 Fiber节点保存了本次更新中该组件改变的状态、要执行的工作。

每个 Fiber 节点有个对应的React element，多个 Fiber节点根据如下三个属性构建一颗树：

// 指向父级Fiber节点
this.return = null
// 指向子Fiber节点
this.child = null
// 指向右边第一个兄弟Fiber节点
this.sibling = null

通过这些属性就能找到下一个执行目标