是什么
-
在数据更新时,react生成了一棵更大的虚拟dom树,找到真正变化的部分,这需要花费更长的时间。js占据主线程去做比较,渲染线程便无法做其他工作,用户的交互得不到响应,所以便出现了react fiber
-
react fiber 使得diff的过程被分成一小段一小段的,因为它有了“保存工作进度”的能力。js会比较一部分虚拟dom,然后让渡主线程,给浏览器去做其他工作,然后继续比较,依次往复,等到最后比较完成,一次性更新到视图上
怎么做到
-
链表
-
在 fiber 架构中,每个节点有三个指针:分别指向第一个子节点、下一个兄弟节点、父节点
-
从根节点开始,依次遍历该节点的子节点、兄弟节点,如果两者都遍历了,则回到它的父节点
-
当一个节点的所有子节点遍历完成,才认为该节点遍历完成
-
-
当遍历发生中断时,只要保留下当前节点的索引,断点是可以恢复的——因为每个节点都保持着对其父节点的索引
-
通过 requestIdleCallback 去控制的组件渲染的“进度条”