Appearance
React Fiber
是什么
React Fiber 是 React 内部引擎的改变，是对协调算法的一次完全重写，在 React 16 及最新的版本中成为了默认的协调器。
目的是为了解决 React 在同步更新组件时可能造成阻塞的问题。
在 React 16 之前，React 使用的是同步栈帧协调器（synchronous stack reconciler），任务一旦开始则无法中断
Fiber 是异步的，使得 React 能够：
- 随着新更新的到来，进行暂停、恢复和重启组件的渲染工作。
- 重用之前完成的工作，甚至在不需要的时候中止它。
- 将任务分割成块（chunks），并且根据重要性确定优先级。
在旧的协调算法之下，React 创建了一个不可变的对象树（React Elements），并以递归方式遍历该树。
而当前的 Fiber 实现中，React 创建了一个可以修改的 Fiber 节点树，Fiber 节点保存了 state，props 和底层的 DOM 元素。
由于 Fiber 节点树可以修改，React 不必重新创建每个节点进行更新，它可以在有更新时简单的克隆和更新节点。
在 Fiber 树的情况下，React 不执行递归遍历。它会创建一个单向链表，执行父级优先和深度优先的遍历。
Fiber 节点的组成
一个 Fiber 节点由下列属性组成：
- type
- key
- child
- sibling
- return
- alternate
- output
- pendingProps
- memoizedProps
- pendingWorkPriority
type
如 div、span等标签名称，或者函数组件的函数名称和类组件的 Class 名称。
key
为开发者传递给 React 的值。
child
表示当我们在组件上调用的 render() 方法时返回的元素。
sibling
兄弟节点形成的单链表。
return
表示父 Fiber 节点。
alternate
在任何时候，一个组件实例最多有 2 个对应的 Fiber，Current fiber 和 In Progress Fiber。
Current fiber 的 alternate 属性指向 In Progress Fiber;
In Progress Fiber 的 alternate 属性指向 Current fiber。
pendingProps 和 memoizedProps
pendingProps 表示传递给组件的 props，memoizedProps 在执行栈的结尾进行初始化，存储该节点的 props。
当 pendingProps 和 memoizedProps 相等时，表示 Fiber 节点之前的 output 可以复用，从而避免不必要的工作
pendingWorkPriority
pendingWorkPriority 是一个数字，数字越大，表示优先级越低（数字 0 除外）
Current 树与 workInProgress 树
当前渲染在屏幕上的内容就是 current 树，每当有更改时，React 会在内存中开始构建 workInProgress 树。一旦在 UI 上呈现了 workInProgress，它就成为了 current 树。
Fiber 树的遍历
- Start：从 React 顶部元素开始进行遍历，并为其创建一个 Fiber 节点
- Child：如果当前节点有子节点，那么转到子节点创建一个 Fiber 节点，直到叶子节点为止。
- Sibling：如果有同级节点，那么遍历同级节点及其子节点，直到同级的叶子节点为止
- Return：如果没有同级，则返回到父级节点