说说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值应该都是唯一的

相关文章
|
4月前
|
JavaScript 前端开发 算法
React 虚拟 DOM 深度解析
【10月更文挑战第5天】本文深入解析了 React 虚拟 DOM 的工作原理,包括其基础概念、优点与缺点,以及 Diff 算法的关键点。同时,分享了常见问题及解决方法,并介绍了作者在代码/项目上的成就和经验,如大型电商平台的前端重构和开源贡献。
81 3
|
5月前
|
XML JavaScript 前端开发
学习react基础(1)_虚拟dom、diff算法、函数和class创建组件
本文介绍了React的核心概念,包括虚拟DOM、Diff算法以及如何通过函数和类创建React组件。
54 3
|
5月前
|
机器学习/深度学习 JavaScript 算法
面试中的网红虚拟DOM,你知多少呢?深入解读diff算法
该文章深入探讨了虚拟DOM的概念及其diff算法,解释了虚拟DOM如何最小化实际DOM的更新,以此提升web应用的性能,并详细分析了diff算法的实现机制。
|
5月前
|
JavaScript 前端开发
react字符串转为dom标签,类似于Vue中的v-html
本文介绍了在React中将字符串转换为DOM标签的方法,类似于Vue中的`v-html`指令,通过使用`dangerouslySetInnerHTML`属性实现。
151 0
react字符串转为dom标签,类似于Vue中的v-html
|
4月前
|
前端开发 JavaScript 开发者
深入理解React Hooks:提升前端开发效率的关键
【10月更文挑战第5天】深入理解React Hooks:提升前端开发效率的关键
|
3月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
119 9
|
4月前
|
前端开发
深入解析React Hooks:构建高效且可维护的前端应用
本文将带你走进React Hooks的世界,探索这一革新特性如何改变我们构建React组件的方式。通过分析Hooks的核心概念、使用方法和最佳实践,文章旨在帮助你充分利用Hooks来提高开发效率,编写更简洁、更可维护的前端代码。我们将通过实际代码示例,深入了解useState、useEffect等常用Hooks的内部工作原理,并探讨如何自定义Hooks以复用逻辑。
|
4月前
|
前端开发 JavaScript API
探索React Hooks:前端开发的革命性工具
【10月更文挑战第5天】探索React Hooks:前端开发的革命性工具
|
3月前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
274 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
3月前
|
前端开发 JavaScript 开发者
使用React和Redux构建高效的前端应用
使用React和Redux构建高效的前端应用
71 1