介绍 DOM 和虚拟 DOM 的概念|学习笔记

简介: 快速学习介绍 DOM 和虚拟 DOM 的概念

开发者学堂课程【React 入门与实战介绍 DOM 和虚拟 DOM 的概念】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/585/detail/8074


介绍 DOM 和虚拟 DOM 的概念


一、React中几个核心的概念

如果不了解虚拟 DOM Diff 算法,去学习 React 将很不好理解,理解完这两个概率就可以说 React 学完50%了。概念占50%语法占50%
虚拟
DOM (Virtual Document Object Model )

//文档对象模型
1、DOM 的本质是什么:只局限于浏览器端的概念,用 jS 对象来表示页面上的元素,并提供了操作 DOM 对象的 APIJS 对象除了可以来表示页面上的元素,还能操作元素)。
2
、什么是 React 中的虚拟 DOM :虚拟 DOM 是框架中的概念,是程序员用 JS 对象来模拟页面上的 DOM DOM 嵌套;

//特别标注程序员,虚拟 DOM API 是由框架提供的,而框架是由程序员自己写的。

3、为什么要实现虚拟 DOM (虚拟 DOM 的目的) :为了实现页面中,DOM 元素的高效更新
4
DOM 和虚拟 DOM 的区别:
>DOM:

>虚拟 DOM:

image.png

表格的每一列都提供了一个上下箭头,这就是说点击时间就可以进行排序,从大到小或从小到大排序。

image.png

Diffit 算法
tree diff:
combonent diff:

相关文章
|
6月前
|
JavaScript 前端开发 编译器
说说你对虚拟 DOM 的理解?
说说你对虚拟 DOM 的理解?
56 0
|
2月前
|
JavaScript 前端开发 算法
React技术栈-虚拟DOM和DOM diff算法
这篇文章介绍了React技术栈中的虚拟DOM和DOM diff算法,并通过一个实际案例展示了如何使用React组件和状态管理来实现动态更新UI。
41 2
|
1月前
|
JavaScript 前端开发 算法
真实DOM和虚拟DOM有哪些区别?
本文介绍了真实DOM和虚拟DOM的概念、使用方式、优势、劣势、使用场景、影响因素、开发效率和性能对比。真实DOM是浏览器提供的原生接口,直接操作简单直观,但频繁操作会导致性能损耗。虚拟DOM是真实DOM的抽象表示,通过比较差异减少DOM操作,适用于大规模数据变更和复杂交互的页面。开发者应根据具体需求选择合适的DOM操作方式,以提高页面性能和开发效率。
78 1
真实DOM和虚拟DOM有哪些区别?
|
1月前
|
JavaScript 前端开发
DOM的概念?获取html元素的方法有哪些?
DOM的概念?获取html元素的方法有哪些?
33 0
|
3月前
|
移动开发 JavaScript 前端开发
【Vue面试题二十二】、什么是虚拟DOM?如何实现一个虚拟DOM?说说你的思路
这篇文章深入探讨了虚拟DOM的概念、必要性以及在Vue中的实现方式,解释了虚拟DOM如何作为真实DOM的轻量级抽象,通过优化DOM操作提高性能,并实现跨平台渲染的能力。
【Vue面试题二十二】、什么是虚拟DOM?如何实现一个虚拟DOM?说说你的思路
|
3月前
|
JavaScript 算法 前端开发
"揭秘虚拟DOM的神奇魔法:从零开始打造高效渲染引擎,颠覆你的DOM操作认知!"
【8月更文挑战第20天】虚拟DOM是一种优化技术,通过在内存中构建DOM树的轻量级副本,减少浏览器重排和重绘,提升性能。本文简要介绍了DOM及其重要性,并深入解释了虚拟DOM的概念。虚拟DOM通过模拟真实DOM结构,在内存中进行数据更新,仅将变动部分同步到实际DOM。文中还提供了一个简易虚拟DOM的实现方案,包括虚拟节点创建、渲染函数及一个基本的diff算法,用于比对新旧虚拟DOM并高效更新实际DOM。通过示例展示了如何构建和渲染一个简单的虚拟DOM。这有助于理解虚拟DOM的基本工作原理和技术细节。
53 4
|
3月前
|
JavaScript 前端开发 API
区分 DOM 与虚拟 DOM
【8月更文挑战第24天】
104 0
|
3月前
|
JavaScript 前端开发
DOM的概念?获取html元素的方法有哪些?
DOM的概念?获取html元素的方法有哪些?
44 0
|
5月前
|
JavaScript 前端开发 算法
虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。
【6月更文挑战第27天】虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。当状态改变,React不直接修改DOM,而是先构建新的虚拟DOM树。通过 diff 算法比较新旧树,找到最小变更,仅更新必要部分,提高性能,避免频繁DOM操作。虚拟DOM还支持跨平台应用,如React Native。它优化了更新流程,简化开发,并提升了用户体验。
44 1
|
6月前
|
XML JavaScript 数据格式
Beautiful Soup 库的工作原理基于解析器和 DOM(文档对象模型)树的概念
【5月更文挑战第10天】Beautiful Soup 使用解析器(如 html.parser, lxml, html5lib)解析HTML/XML文档,构建DOM树。它提供方法查询和操作DOM,如find(), find_all()查找元素,get_text(), get()提取信息。还能修改DOM,添加、修改或删除元素,并通过prettify()输出格式化字符串。它是处理网页数据的利器,尤其在处理不规则结构时。
79 2