浅谈React的Diff算法,简单易懂!

react16之前,主要是通过递归遍历Vdom树来查找不同。对有变化的部分重新生成真实的DOM。

在react16之后,则是引入了新的架构Fiber架构 ,在Reconciler(协调器)中会进行Diff算法。流程如下:

  1. 第一次渲染的时候,不进行diff,而是直接将vdom转成Fiber,在内存中构workInProgressFiber 树,构建完成之后用它来替换currenFiber,再去通知渲染器进行渲染。

  2. 后续更新渲染时,会将生成的VDOM和旧的Fiber进行对比,决定生成怎样的新的Fiber(就是能复用的复用,多余的删除,新增的新增)。完成之后对新生成的Fiber再进行DOM操作。

具体的diff是如何比对的呢?

其实一句话总结就是, Fiber中diff算法的核心是查找复用节点。

如:我们有一个父节点,底下有四个节点。VDOM如下:

开始渲染的时候,第一次,会被协调器转换为Fiber树。然后进行渲染到页面。

如果这时候组件更新了,新的VDOM是 A C E F后。

这时候diff算法就要开始操作了。

复制代码
​1. 先循环让新的VDOM跟旧的第一次的Fiber来进行对比,看看有没有能复用的点。如果有,就继续遍历,如果没有,则停止遍历。 

2. 判断新的VDOM有没有遍历结束,如果结束了,就把旧的Fiber中的节点删除即可。若新的没有遍历完,则会进行第二次遍历。 

3. 第二次遍历的时候,把旧的中的fiber剩下的节点,放入一个map中,然后遍历新的Vdom剩下的节点。看看当前遍历的Vdom有没有存在于这个Map里面,若存在,则表明可以复用,打上更新的标记。 

4. 遍历完新的Vdom后,旧的Fiber剩下的节点都可以打上删除标记,新的Vdom中新增的节点则打上新增的编辑。
​

详细说明:

第一次循环:

进行的是新Vdom跟旧Fiber中第一个节点的对比。发现这时候是可以复用的,则打上更新标记。然后继续遍历,新的VDOM的下一个节点C,发现跟旧的Fiber中的节点B不能复用。这时候,第一次遍历结束。 然后判断新的Vdom中的节点是否遍历结束了,如果没有,则进行第二次遍历。

第二次循环:

  1. 把旧的Fiber中,剩下的节点中的 B C D 放入一个map中,key就是当前节点的可以。

  2. 继续遍历 新的VDOM中剩下的节点,同样去找能不能复用的节点,斌如发现只有C节点能在Map中找到,则打上更新标记。

整体遍历结束后。

map就剩下 B D两个节点。(新的中没有) 打上删除标记。

新的VDOM中 E跟 F 则为新增节点。(旧中没有。)打上新增标记。

最后去执行渲染。就是 A与 C为更新复用。 B跟 D为删除。 E 跟 F 为新增。

总体来说:

复制代码
diff核心就是查找复用节点:
 第一轮遍历时,线性一一对比,若新Vdom的当前节点和旧的Fiber当前节点不能复用,则终止遍历。
 第二次遍历时,将旧的Fiber剩余节点放入Map,继续遍历新的VDom中的节点,寻找 复用节点,打上更新标记,  遍历结束后,map中剩余的打上删除标记,新的VDOM中,没有找到复用的则为新增标记。
 
 最后根据变化,生成新的Fiber。然后执行阶段渲染。
相关推荐
weixin_472339465 小时前
高效处理大体积Excel文件的Java技术方案解析
java·开发语言·excel
zwjapple6 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
枯萎穿心攻击6 小时前
响应式编程入门教程第二节:构建 ObservableProperty<T> — 封装 ReactiveProperty 的高级用法
开发语言·unity·c#·游戏引擎
Eiceblue7 小时前
【免费.NET方案】CSV到PDF与DataTable的快速转换
开发语言·pdf·c#·.net
m0_555762908 小时前
Matlab 频谱分析 (Spectral Analysis)
开发语言·matlab
像风一样自由20208 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
伍哥的传说8 小时前
React 各颜色转换方法、颜色值换算工具HEX、RGB/RGBA、HSL/HSLA、HSV、CMYK
深度学习·神经网络·react.js
aiprtem8 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊8 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术9 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端