React fiber

76 阅读1分钟

是什么

  • 在数据更新时,react生成了一棵更大的虚拟dom树,找到真正变化的部分,这需要花费更长的时间。js占据主线程去做比较,渲染线程便无法做其他工作,用户的交互得不到响应,所以便出现了react fiber

  • react fiber 使得diff的过程被分成一小段一小段的,因为它有了“保存工作进度”的能力。js会比较一部分虚拟dom,然后让渡主线程,给浏览器去做其他工作,然后继续比较,依次往复,等到最后比较完成,一次性更新到视图上

怎么做到

  • 链表

  • 在 fiber 架构中,每个节点有三个指针:分别指向第一个子节点、下一个兄弟节点、父节点

    1. 从根节点开始,依次遍历该节点的子节点、兄弟节点,如果两者都遍历了,则回到它的父节点

    2. 当一个节点的所有子节点遍历完成,才认为该节点遍历完成

  • 当遍历发生中断时,只要保留下当前节点的索引,断点是可以恢复的——因为每个节点都保持着对其父节点的索引

  • 通过 requestIdleCallback 去控制的组件渲染的“进度条”

链接:juejin.cn/post/707754…