争怎路由网/网站教程/内容

React中虚拟dom与diff算法的讲解(附代码)

网站教程2024-05-20 阅读
网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。

本篇文章给大家带来的内容是关于React中虚拟dom与diff算法的讲解(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

虚拟dom

Jsx 表面写的是html,其实内部执行的是一段js
createElement

React.createElement(
  type,
  [props],
  [...children]
)

createElement把这个树形结构,存在内存里面
Jsx最终以这样的一个个对象递归的存在内存中,执行diff算法。

306717310-5bc6fc7e159f4_articlex.png

多层结构

892133419-5bc6fd17ee5a8_articlex.png

简单的createElement实现

3737341543-5bc6fdede8a39_articlex.png

reactElement - 生成的是一个对象来描述这个节点

3295061980-5bc6fe38e482d_articlex.png

react diff

与传统树的diff的区别

计算一棵树形结构转换成另一棵树形结构的最少操作,是一个复杂且值得研究的问题。传统 diff 算法通过循环递归对节点进行依次对比,效率低下,算法复杂度达到 O(n^3)

react diff策略

tree diff

基于策略一,对树进行分层比较,两棵树只会对同一层次的节点进行比较。
React 通过 updateDepth 对 Virtual DOM 树进行层级控制,同一个父节点下的所有子节点。

2092719422-5bc70375640ab_articlex.png

什么是 DOM 节点跨层级的移动操作?

A 节点(包括其子节点)整个被移动到 D 节点下

2390318234-5bc703adc1cc4_articlex.png

如果出现了 DOM 节点跨层级的移动操作,React diff 会有怎样的表现呢?

React 只会简单的考虑同层级节点的位置变换,而对于不同层级的节点,只有创建和删除操作。

当根节点发现子节点中 A 消失了,就会直接销毁 A;当 D 发现多了一个子节点 A,则会创建新的 A(包括子节点)作为其子节点。此时,React diff 的执行情况:create A -> create B -> create C -> delete A。

注意:

在开发组件时,保持稳定的 DOM 结构会有助于性能的提升。例如,可以通过 CSS 隐藏或显示节点,而不是真的移除或添加 DOM 节点。

component diff

依据策略二

React 判断 D 和 G 是不同类型的组件,就不会比较二者的结构,而是直接删除 component D,重新创建 component G 以及其子节点,即使D 和 G的结构很相似

819270245-5bc704e048286_articlex.png

element diff

当节点处于同一层级时,React diff 提供了三种节点操作,分别为:INSERT_MARKUP(插入)、MOVE_EXISTING(移动)和 REMOVE_NODE(删除)。

eg: 新老集合进行 diff 差异化对比,发现 B != A,则创建并插入 B 至新集合,删除老集合 A;以此类推,创建并插入 A、D 和 C,删除 B、C 和 D。

2137072873-5b87afe759e2d_articlex.png

带来的问题:都是相同的节点,但由于位置发生变化,导致需要进行繁杂低效的删除、创建操作,其实只要对这些节点进行位置移动即可

react优化策略:允许开发者对同一层级的同组子节点,添加唯一 key 进行区分

1004496651-5b87b01634851_articlex.png

优化后diff实现:

  1. 对新集合的节点进行循环遍历,通过唯一 key 可以判断新老集合中是否存在相同的节点

  2. 如果存在相同节点,则进行移动操作,但在移动前需要将当前节点在老集合中的位置child._mountIndex与lastIndex(访问过的节点在老集合中最右的位置即最大的位置)进行比较,if (child._mountIndex < lastIndex),则进行节点移动操作

分析:

element  _mountIndex  lastIndex  nextIndex  enqueueMove
B        1            0          0          false
A        0            1          1          true
D        3            1          2          false
C        2            3          3          true

step:

从新集合中取得 B,判断老集合中存在相同节点 B
B 在老集合中的位置 B._mountIndex = 1
初始 lastIndex = 0
不满足 child._mountIndex < lastIndex 的条件,因此不对 B 进行移动操作
更新 lastIndex = Math.max(prevChild._mountIndex, lastIndex) lastIndex更新为1
将 B 的位置更新为新集合中的位置prevChild._mountIndex = nextIndex,此时新集合中 B._mountIndex = 0,nextIndex++

以上主要分析新老集合中存在相同节点但位置不同时,对节点进行位置移动的情况,如果新集合中有新加入的节点且老集合存在需要删除的节点,那么 React diff 又是如何对比运作的呢?

2010104353-5b87b02fbf31f_articlex.png

    element  _mountIndex  lastIndex  nextIndex  enqueueMove
    B        1            0          0          false
    E        no exist
    C        2            1          2          false
    A        0            2          3          true

step

新建:从新集合中取得 E,判断老集合中不存在相同节点 E,则创建新节点 E
lastIndex不做处理
E 的位置更新为新集合中的位置,nextIndex++
删除:当完成新集合中所有节点 diff 时,最后还需要对老集合进行循环遍历,判断是否存在新集合中没有但老集合中仍存在的节点,发现存在这样的节点 D,因此删除节点 D

react diff的问题

理论上 diff 应该只需对 D 执行移动操作,然而由于 D 在老集合的位置是最大的,导致其他节点的 _mountIndex < lastIndex,造成 D 没有执行移动操作,而是 A、B、C 全部移动到 D 节点后面的现象

821358523-5bc7f4d346acd_articlex.png

建议:在开发过程中,尽量减少类似将最后一个节点移动到列表首部的操作,当节点数量过大或更新操作过于频繁时,在一定程度上会影响 React 的渲染性能。

总结:

以上就是React中虚拟dom与diff算法的讲解(附代码)的详细内容,更多请关注php中文网其它相关文章!

  • 微信

  • 网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



    ……

    标签:React中虚拟dom与diff算法的讲解(附代码)
    相关阅读