说说react中虚拟DOM 在虚拟DOM中diff和key之间有什么关系

简介: 说说react中虚拟DOM 在虚拟DOM中diff和key之间有什么关系

Virtual DOM 也就是虚拟DOM 是一种编程概念 虚拟DOM是一颗虚拟JS对象树 它就是模拟真实DOM 把真实DOM模拟成了一个一个的js对象 并且以树形结构的方式 保存在内存中


       虚拟DOM实现的流程:


               1. 首先就是对初始化创建的页面进行分析然后创建出一个js对象格式的虚拟DOM树


               2. 然后再进一步根据虚拟DOM生成真实DOM然后渲染到页面中


               3. 如果后续DOM节点发生改变(例如删除修改等) 则会生成一颗全新的js对象格式的虚拟DOM树


               4. 然后会去和上一次生成的树进行diff算法比较 比较出有哪些不同 然后生成一个只有不同元素信息的patch


               5. 然后再将这个patch 传递给真实DOM进行针对性的修改 然后再将修改后的页面渲染到屏幕中

272ef21d33d34c8e8b8457e2450a0d1d.png

diff与key之间的关系在于 虚拟DOM通过设置key值的方式 在需要diff比较节点差异的时候 可以更快更准确的找到DOM节点


 所以在这里key值不能设置为index 因为设置index的话 如果我们删除了一个元素则所有的index都发生了变化就会造成影响 所以一般设置的key值应该都是唯一的

相关文章
|
1月前
|
JavaScript 前端开发 算法
React 虚拟 DOM 深度解析
【10月更文挑战第5天】本文深入解析了 React 虚拟 DOM 的工作原理,包括其基础概念、优点与缺点,以及 Diff 算法的关键点。同时,分享了常见问题及解决方法,并介绍了作者在代码/项目上的成就和经验,如大型电商平台的前端重构和开源贡献。
57 3
|
2月前
|
XML JavaScript 前端开发
学习react基础(1)_虚拟dom、diff算法、函数和class创建组件
本文介绍了React的核心概念,包括虚拟DOM、Diff算法以及如何通过函数和类创建React组件。
28 2
|
2月前
|
JavaScript 前端开发
react字符串转为dom标签,类似于Vue中的v-html
本文介绍了在React中将字符串转换为DOM标签的方法,类似于Vue中的`v-html`指令,通过使用`dangerouslySetInnerHTML`属性实现。
92 0
react字符串转为dom标签,类似于Vue中的v-html
|
1月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
1月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
26天前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。
|
26天前
|
JavaScript
HTML DOM 节点
HTML DOM(文档对象模型)将HTML文档视为节点树,其中每个部分都是节点:文档本身是文档节点,HTML元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。节点间存在父子及同胞关系,形成层次结构。
|
1月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
1月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
1月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)