React fiber 架构介绍

Question

Fiber 解决的问题

React 16 以前，react 更新是 深度优先的递归更新，任务不能中断，层级较深时，更新时间较长，引起页面卡断
Fiber 就是虚拟 DOM, 本身是一个链表结构，返回了 return、children、sibling，表示父子兄弟的 fiber，更新时随时可以中断，避免更新阻塞 UI

怎么实现的可中断、可恢复

fiber 是一个链表结构，它有三个指针，分别记录了当前节点的下一个兄弟节点，子节点，父节点。当遍历中断时，它是可以恢复的，只需要保留当前节点的索引，就能根据索引找到对应的节点。

双缓存

在 React 中最多会同时存在两棵Fiber树。当前屏幕上显示内容对应的 Fiber 树称为 current Fiber 树，正在内存中构建的 Fiber 树称为 workInProgress Fiber 树。current Fiber 树中的 Fiber 节点被称为 current fiber，workInProgress Fiber 树中的 Fiber 节点被称为 workInProgress fiber，他们通过 alternate 属性连接