您的当前位置:首页正文

React Fiber 虚拟 DOM 实现原理与Diff 算法实现原理

2025-01-16 来源:个人技术集锦

React Fiber 虚拟 DOM 实现

Fiber是react执行渲染时的一种新的调度策略,是虚拟DOM的一种实现方式,帮助我们管理DOM更新的优先级。

fiber是个链表,有type,props,return,child 和 sibing 属性,指向第一个子节点和相邻的兄弟节点,从而构成 fiber tree;return 属性指向其父节点。

因为JavaScript是单线程的,一旦组件开始更新,主线程就一直被React控制,当js在处理大型计算的时候会导致页面出现卡帧的现象,更严重的会出现页面“假死”;而 Fiber 能将大型的计算拆分成一个个小型计算,然后按照执行顺序异步调用,这样就不会长时间霸占线程,UI也能在俩次小型计算的执行间隙进行更新,从而给与用户及时的反馈。

Diff 算法实现原理

  1. Dif算法的特点:

① Diff 算法在进行比较时,会根据树形结构从上往下一层一层进行查找,当发现需要更新的数据,从而进行局部更新。

举个例子,在我们开发中常常会在组件中添加key属性,是为了添加一个标识,并且能快速精准的找到所需修改的DOM节点。能减少页面重绘和回流的频率,进而提高页面更新的效率。

② 当对同一个响应式数据对象进行多次修改时,DOM不会立即更新而是将若干次的更新保存到 js 对象中,进行采集依赖,将最后一次修改的数据渲染到DOM树上。

显示全文