1. 前言
什么是Fiber，这是React面试中不可避免的一个问题，假设你不了解Fiber属性、优点及原理，就很难去理解React的运行机制。
2. 简介
2.1. Fiber解决了什么问题？
React16前:
React的reconciliation过程，是需要完整的遍历vdom找出Diff，之后传递给renderer做渲染。
但当更新执行的时候，中途就无法中断。当渲染层级很深时、递归更新事件超了 1000 / 60 = 16m，用户交互就会卡顿。
React16后:
引进了Fiber架构，添加了Scheduler调度器，它能调度任务的优先级、高优先级的任务会优先进入Reconciler。也就是说，新的架构能够让更新工作从递归变成了可以中断的循环过程。
3. Fiber属性
3. 1. 静态属性
key、tag、type等： 描述节点信息，在diff过程中优化(key)
3.2. 树信息
return、child、sibling: 遍历树的过程中优化了性能，从递归变成迭代
3.3. 工作单元属性
pendingProps、updateQueue、memorizeState等: 保存本次更新的信息
3.4. Effect信息
firstEffect、nextEffect、lastEffect、effectTag: 形成effect list的关键, 在commit阶段可以通过遍历effect list去更新节点信息。
3.5. 调度信息
lane、childLanes等: 调度信息配合scheduler使fiber的操作可中断，并能根据优先级去重点更新的节点信息
4. 与Vue的对比
vue在进行数据更新时，只会触发当前component重新执行render，不会影响子元素，实现精准更新。
react节点更新时，会自顶向下更新。
5. 总结
- Fiber是一种架构，让
render阶段可以中断 以及 可以调度任务的优先级。 - Fiber是一种数据结构，通过双缓存两棵树
current Fiber和workInProgress Fiber，一个用于展示，一个用于操作，当一轮操作完成后，react才会切换到操作完成的fiber节点上，另一棵树则会销毁重新构建并用于操作。每个节点进行对比时会进行一次shouldYield()判断，利用空闲的时间去更新。
ps: 高优先级任务使用RequestAnimationFrame，低优先级使用RequestIdleCallback(React 自己实现)
