1. 虚拟dom
在学习 Fiber 之前,首先回顾下 虚拟Dom
1. 什么是虚拟Dom?
虚拟DOM可以看做一棵模拟了真实DOM树的JavaScript对象树, 它其实是一个js对象,对象中所包含的信息会告诉页面上需要渲染什么样的节点,包括及其子节点的描述信息。
但虚拟dom并不会完全复刻真实dom,虚拟dom只承载必要的信息,这也是使用虚拟dom的原因之一,因为一个真实的dom对象实际上有很多属性与方法,如果在进行diff算法时是对真实dom进行对比,会产生不必要的消耗。
2. 为什么使用 虚拟Dom?
以查找js对象的方式代替以往递归dom树的操作,将频繁更新dom的行为优先转为js对象的增删改查;通过diff算法保证最小化的DOM操作;减少重绘重排的次数。
2. React Fiber
1. 什么是 Fiber ?
Fiber 是一个分片执行单元,每执行完一个单元,React会检查现在还剩多少时间,如果没有时间则交出控制权。
Fiber是一个链表数据结构:
Child 指向 当前Fiber的第一个子节点
Sibling 指向当前Fiber的的下一个兄弟节点
Return 指向当前 Fiber 节点的 父节点
由于要实现低优先级任务的暂停更新,但是在高优先级任务执行完成之后还要回来继续执行低优先级任务,因此使用链表数据结构,通过指针和地址对任务进行关联。
2. 为什么使用 Fiber?