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

相关文章
|
JavaScript 前端开发 算法
React技术栈-虚拟DOM和DOM diff算法
这篇文章介绍了React技术栈中的虚拟DOM和DOM diff算法,并通过一个实际案例展示了如何使用React组件和状态管理来实现动态更新UI。
138 2
|
JavaScript 前端开发 算法
react中虚拟dom和diff算法
在React中,虚拟DOM(Virtual DOM)和Diff算法是两个核心概念,它们共同工作以提高应用的性能和效率。
127 4
|
JavaScript 前端开发
react学习(3)创建虚拟dom的两种方式
react学习(3)创建虚拟dom的两种方式
226 67
|
12月前
|
JavaScript 前端开发 算法
真实DOM和虚拟DOM有哪些区别?
本文介绍了真实DOM和虚拟DOM的概念、使用方式、优势、劣势、使用场景、影响因素、开发效率和性能对比。真实DOM是浏览器提供的原生接口,直接操作简单直观,但频繁操作会导致性能损耗。虚拟DOM是真实DOM的抽象表示,通过比较差异减少DOM操作,适用于大规模数据变更和复杂交互的页面。开发者应根据具体需求选择合适的DOM操作方式,以提高页面性能和开发效率。
534 1
真实DOM和虚拟DOM有哪些区别?
|
12月前
|
JavaScript 前端开发 算法
React 虚拟 DOM 深度解析
【10月更文挑战第5天】本文深入解析了 React 虚拟 DOM 的工作原理,包括其基础概念、优点与缺点,以及 Diff 算法的关键点。同时,分享了常见问题及解决方法,并介绍了作者在代码/项目上的成就和经验,如大型电商平台的前端重构和开源贡献。
159 3
|
XML JavaScript 前端开发
学习react基础(1)_虚拟dom、diff算法、函数和class创建组件
本文介绍了React的核心概念,包括虚拟DOM、Diff算法以及如何通过函数和类创建React组件。
158 3
|
JavaScript 前端开发
react字符串转为dom标签,类似于Vue中的v-html
本文介绍了在React中将字符串转换为DOM标签的方法,类似于Vue中的`v-html`指令,通过使用`dangerouslySetInnerHTML`属性实现。
366 0
react字符串转为dom标签,类似于Vue中的v-html
|
12月前
|
JavaScript 前端开发 算法
写 React / Vue 项目时为什么要在列表组件中写 key
在React或Vue项目中,为列表组件中的每个元素添加唯一的key属性,有助于框架高效地更新和渲染列表。Key帮助虚拟DOM识别哪些项已更改、添加或删除,从而优化性能并减少不必要的重新渲染。
|
JavaScript 前端开发 API
区分 DOM 与虚拟 DOM
【8月更文挑战第24天】
315 0
|
14天前
|
缓存 前端开发 JavaScript
React Hooks深度解析与最佳实践:提升函数组件能力的终极指南
🌟蒋星熠Jaxonic,前端探索者。专注React Hooks深度实践,从原理到实战,分享状态管理、性能优化与自定义Hook精髓。助力开发者掌握函数组件的无限可能,共赴技术星辰大海!
React Hooks深度解析与最佳实践:提升函数组件能力的终极指南

热门文章

最新文章