Fiber

什么是fiber

• Fiber 是一个执行单元。

fiber是react16 对核心算法的依次重写，fiber会使原本同步的渲染过程变成异步的。
同步渲染的递归调用栈是非常深的，且是漫长而不可打断的更新过程。因此将会带来很大的风险：同步渲染一旦开始将会牢牢的抓住主线程不放，直到递归完成。这段时间浏览器无法处理任何渲染之外的事情，会进入一种无法处理用户交互的状态

• Fiber 是一种数据结构，支撑 Fiber 构建任务的运转。
  当某一个 Fiber 任务执行完成后，怎样去找下一个要执行的 Fiber 任务呢？
  React 通过链表结构找到下一个要执行的任务单元。
  要构建链表结构，需要知道每一个节点的父级节点是谁，要知道他的子级节点是谁，要知道他的下一个兄弟节点是谁。
  Fiber 其实就是 JavaScript 对象，在这个对象中有 child 属性表示节点的子节点，有 sibling 属性表示节点的下一个兄弟节点，有 return 属性表示节点的父级节点。

type Fiber = {
  // 组件类型 div、span、组件构造函数
  type: any,
  // DOM 对象
  stateNode: any,  
  // 指向自己的父级 Fiber 对象
  return: Fiber | null,
  // 指向自己的第一个子级 Fiber 对象
  child: Fiber | null,
  // 指向自己的下一个兄弟 iber 对象
  sibling: Fiber | null,

Fiber 的作用

Filter 会将一个大的更新任务拆分成很多小的任务。每当执行完成一个小的任务时，filber会将主线程交回去，看看有没有优先级更高的任务需要处理。
react 将生命周期划分为render 和 commit 两个阶段，commit又被划分为pre-commit和commit

• pre-commit：读取dom
• commit：使用dom，运行副作用，安排更新

副作用：如果一个函数需要依赖外部状态就无法保证输出相同，从而让函数变得不纯，就会带来副作用

render阶段可以被打断，commit阶段需要同步执行。因为render阶段的操作对用户来说是不可见的，就算打断重启，对用户来说也是无感知的。而commit阶段涉及到操作真实dom，所以不可被打断

react16 组件的生命周期更改

在fiber机制下，render阶段是允许被暂停，终止，重启的，因此render阶段的生命周期有可能被重复执行

• componentWillMount
• componentWillUpdate
• componentWillReceiveProps
  这些生命周期函数都是处于render阶段，都有可能被重复执行