3回答

一天宏图

提问者

2020-12-07

我再详细说下我理解中的问题，先说理解：

1.虚拟DOM和state变化后的虚拟DOM进行对比,diff后只更新变化的那一小部分页面DOM

2.虚拟DOM 避免了把真实DOM对象全部信息更新全部html元素的“回流和重绘"，所以更快

我的问题是:我的问题是:   是拿DocumentFragment对象和虚拟DOM比效率

 2.1 JQuery3.3后使用DocumentFragment对象渲染过程

    1.页面加载,会获取到JS-DOM对象

    2.页面数据发生变化  然后比较新旧DOM 

    3.两个JS-->DOM对象比较后生成的 DocumentFragment对象, 

       DocumentFragment对象也是记录了差异部分的对象,

    4.然后再去渲染页面变化了部分

 2.2 React虚拟DOM比较如下：

   1.页面加载,会生成虚拟DOM

    2.页面数据发生变化  生成新的虚拟DOM,然后比较新旧虚拟DOM 

    3.DIFF比较虚拟DOM的差异部分,只去渲染页面变化了的部分数据

问题：2.1 和2.2 都是对象比较差异后 渲染页面  2.2比2.1快是不是仅仅只是快在虚拟DOM的同层比较Diff算法上呢?

      

0

0

Dell

2020-12-05

1. 不会用js对象和html比，而是两个js对象比，比较晚之后再生成DocumentFragment

0

1

一天宏图

我再详细说下我理解中的问题，先说理解： 1.虚拟DOM和state变化后的虚拟DOM进行对比,diff后只更新变化的那一小部分页面DOM 2.虚拟DOM 避免了把真实DOM对象全部信息更新全部html元素的“回流和重绘"，所以更快 我的问题是:我的问题是: 是拿DocumentFragment对象和虚拟DOM比效率 2.1 JQuery3.3后使用DocumentFragment对象渲染过程 1.页面加载,会获取到JS-DOM对象 2.页面数据发生变化 然后比较新旧DOM 3.两个JS-->DOM对象比较后生成的 DocumentFragment对象, DocumentFragment对象也是记录了差异部分的对象, 4.然后再去渲染页面变化了部分 2.2 React虚拟DOM比较如下： 1.页面加载,会生成虚拟DOM 2.页面数据发生变化 生成新的虚拟DOM,然后比较新旧虚拟DOM 3.DIFF比较虚拟DOM的差异部分,只去渲染页面变化了的部分数据 问题：2.1 和2.2 都是对象比较差异后 渲染页面 2.2比2.1快是不是仅仅只是快在虚拟DOM的同层比较Diff算法上呢?

2020-12-07

共1条回复

_Jack_Han_

2020-12-05

个人理解：

1. Dom对象也是对象，也拥有属性名称和值，以及子元素，获取到DOM元素后可以拿来和虚拟DOM对象做比对；

2. 在state或者props更新后，render函数会再次执行，render函数的返回值就是虚拟DOM对象。

0

1

一天宏图

谢谢你的回答

2020-12-07

共1条回复