image
标准的dom机制如下：
image
标准dom机制下，用户在对应用操作的时候是直接对真实的dom进行操作。
在react中，用户对dom操作是对虚拟dom的操作，用户操作产生的数据改变或者state变量改变（事件函数对dom的操作），都会保存到虚拟dom上，之后在批量的对这些更改进行diff算法计算。
image
处理方法： 对操作前后的dom树同一层的节点进行对比，一层一层对比。
在标准dom机制下：同一位置对比前后的dom节点，发现节点改变了，会继续比较节点的子节点，一层层对比，找到不同的节点，然后更新节点。
在react的diff算法下，同一位置对比前后dom节点，只要dom节点更改时，就会删除操作前的dom节点（包括子节点），替换为操作后的dom节点。
当dom节点更改是，会大大减少dom树的节点遍历，可以实现快速渲染。
虚拟DOM和diff算法 diff：精细化比对最小量更新 真实DOM和虚拟DOM 虚拟DOM：用JavaScrip...
visual Dom是什么? 虚拟DOM其实就是，像拥有类似dom的一系列属性的对象，包括：标签名，标签上的属性，...
DOM总结 虚拟DOM是什么 一个能代表DOM树的对象，通常含有标签名、标签上的属性、事件监听和子元素们，以及其它...
虚拟DOM是什么？ 一个能代表DOM树的对象，通常含有标签名、标签上的属性、事件监听和子元素们，以及其他属性。 虚...
概念 虚拟DOM 是什么：其实就是个js对象虚拟 dom 是相对于浏览器所渲染出来的真实 dom 的，在react...
1.虚拟 DOM 与页面DOM元素对应的对象。包含标签名、标签上的属性、事件监听及其子元素。本质是一个JS对象。 ...
概念 DOM diff 就是对比两棵虚拟 DOM 树的算法。当组件变化时，会得到一个新的虚拟 DOM，diff 算...
react diff diff算法的作用：数据更改，生成相应的虚拟DOM，与真实DOM作对比，通过diff算法，对...
标准的dom机制如下： 标准dom机制下，用户在对应用操作的时候是直接对真实的dom进行操作。在react中，用户...
文章结构： React中的虚拟DOM是什么？ 虚拟DOM的简单实现（diff算法） 虚拟DOM的内部工作原理 Re...
本文标题：虚拟DOM和diff
本文链接：https://www.haomeiwen.com/subject/ymoyxftx.html
网友评论