DOM和Diff算法你应该知道的那些事，快收藏！

2024-06-06 18:25:08

我们在进行dom操作的时候可能会出现需要更新某一个dom元素，但如果不更新整个组件就无法生效，其实我们使用diff算法配合虚拟dom即可实现，下面小千就来给大家介绍一下。

虚拟DOM

本质上就是一个JS对象，用来描述你希望在屏幕上看到的内容

Diff算法

执行过程

初次渲染时，React会根据初始化的state（model），创建一个虚拟DOM对象（树）

根据虚拟DOM生成真正的DOM，渲染到页面

当数据变化后(setState())，会重新根据新的数据，创建新的虚拟DOM对象（树）

与上一次得到的虚拟DOM对象，使用Diff算法比对（找不同），得到需要更新的内容

最终，React只将变化的内容更新（patch）到DOM中，重新渲染到页面

代码演示

组件render()调用后，根据状态和JSX结构生成虚拟DOM对象(render()方法的调用并不意味着浏览器进行渲染，render方法调用时意味着Diff算法开始比对了)

示例中，只更新p元素的文本节点内容

初次渲染的DOM对象

数据更新之后的虚拟DOM对象

小结

工作角度：应用第一，原理第二

原理有助于更好的理解React的自身运行机制

setState() 异步更新数据

父组件更新导致子组件更新，纯组件提升性能

思路清晰简单为前提，虚拟DOM和Diff保效率（渲染变化的组件）

虚拟DOM -> state + JSX

虚拟DOM最大的特点是脱离了浏览器的束缚，也就是意味着只要是能支持js的地方都可以用到react，所以为什么说react是可以进行跨平台的开发

以上就是关于dom和diff算法的介绍了，希望能帮到大家！

原文来自千锋教育：http://wh.mobiletrain.org/，转载请注明出处。

DOM和Diff算法你应该知道的那些事，快收藏！相关推荐

虚拟DOM和Diff算法 - 入门级
什么是虚拟Dom 我们知道我们平时的页面都是有很多Dom组成,那虚拟Dom(virtual dom)到底是什么,简单来讲,就是将真实的dom节点用JavaScript来模拟出来,而Dom变化的对比,放 ...
diff算法_Virtual Dom和Diff算法
前言这是一篇很长的文章!!!坚持看到最后有彩蛋哦!!! 文章开篇,我们先思考一个问题,大家都说 virtual dom 这,virtual dom 那的,那么 virtual dom 到底是啥? 首 ...
【总结】1135- 图解虚拟 DOM 之 DIff 算法
原文: https://juejin.cn/post/7000266544181674014 1. 目录 1. 相关知识点: 2. 虚拟DOM(Virtual DOM) 2.1. 什么是虚拟DOM 2 ...
vue--mixin混入以及虚拟DOM和diff算法
mixin混入使用它的好处: 将 options 中的配置项可以单独抽离出来,单独管理,这样方便维护使用: 新建一个对象用来保存 options 中某一个配置项,比如: methods 接下来要将 ...
浏览器性能优化（2）React 虚拟 dom与diff算法
随着前端技术快速发展,现在的mvvm几大框架遍布前端行业,那么它们对浏览器的性能到底影响多大?与传统的jq相比做了哪些优化呢? 文章目录: React中的虚拟DOM是什么? 虚拟DOM的简单实现(di ...
【Vue源码解析】Vue虚拟dom和diff算法
Vue虚拟dom和diff算法 1. 简介 2. 搭建环境 1. 安装snabbdom 2. 安装webpack5并配置 3.函数 3.1 虚拟节点vnode的属性 3.2 使用h函数创建虚拟节点 ...
vue 虚拟dom和diff算法详解
虚拟dom是当前前端最流行的两个框架(vue和react)都用到的一种技术,都说他能帮助vue和react提升渲染性能,提升用户体验.那么今天我们来详细看看虚拟dom到底是个什么鬼虚拟dom的定义与 ...
vue之购物车案例升级版、v-model之lazy、number、trim的使用、fetch和axios、计算属性、Mixins、虚拟dom与diff算法 key的作用及组件化开发
文章目录 1.购物车案例升级版(含价格统计.全选/反选.商品增加减少) 2.v-model之lazy.number.trim的使用 3.fetch和axios 3.1.通过jquery+ajax实现v ...
Virtual DOM和diff算法概念理解
(1)vdom是什么? vdom是虚拟DOM(Virtual DOM)的简称,指的是用JS模拟的DOM结构,将DOM变化的对比放在JS层来做.换而言之,vdom就是JS对象. 如下DOM结构: < ...

最新文章

热门文章