react源码解密8-fiber架构

fiber架构的由来

以前咱们实现的react源码，他初始mount和二次update都是一个递归的树的渲染过程。这个任务消耗其实不小，对于单线程的js来说很容易可能就卡住主线程了。

如果用requestIdleCallback来空闲时间执行：

1. 他无法区分任务优先级。因为并不是所有渲染都是低优先级的。可能也有一些要赶紧执行render的东西。
2. mount和update一旦启动他就是一个完整的递归任务，你即使用了requestIdleCallback也没办法在里面判断TimeRemaining不够的时候就停下来让出主线程。因为update同步任务一旦开始了就停不下来了。

于是：

1. fiber架构能把react的任务分成片。
2. 他能按优先级调度。

他通过重新组织渲染过程，使得react能更有效的执行渲染任务。
最终解决渲染和交互的调度问题，让页面看起来更流畅了，性能更好了。

同时fiber架构也让react源码更清晰好维护。

一些概念

Fiber->Fiber树
双缓冲
工作循环
并发模式

fiber是什么

是一种数据结构。类似 {props, type, sibling, return, child}

双缓冲：新旧2个fiber树，一个渲染树一个工作树，一个是当前渲染的一个是内存里进行工作计算的。

工作循环：协调+提交。

并发模式：将原本大的单独任务拆分成多个小任务[task1, task2, task3]。 从而可以借助时间切片机制(类似requestidleCallback)来分时间片来执行前面拆分的任务；然后优先级角度是指的给task设置了不同的轻重缓急优先级。

优先级：例如用户交互后要执行的任务那就是高优的；非用户交互的任务例如请求完后台数据后的更新可能就不那么需要及时（因为后台数据本来就是异步花时间返回的）。

Fiber 本质上是一个运行在浏览器中的操作系统。 时间切片对应时间片轮转，Lane 对应优先级队列，双缓冲对应进程上下文保存，Render/Commit 对应用户态/内核态。