React中的Virtual DOM(看这一篇就够了)

文章目录

  • 前言
  • 了解Virtual DOM
  • react创建虚拟dom的方式
  • React Element
  • 虚拟dom的流程
  • 虚拟dom和真实dom的对比
  • 后言

前言

hello world欢迎来到前端的新世界


😜当前文章系列专栏:react合集
🐱‍👓博主在前端领域还有很多知识和技术需要掌握,正在不断努力填补技术短板。(如果出现错误,感谢大家指出)🌹
💖感谢大家支持!您的观看就是作者创作的动力

了解Virtual DOM

虚拟 DOM(Virtual DOM)是 React 中的一种技术,它是一个轻量级的 JavaScript 对象树,用于描述真实 DOM 的结构和属性。虚拟 DOM 可以作为中间层存在,用于优化页面渲染的性能和效率。

作用

  • 虚拟 DOM 的基本思想是将整个 DOM 结构抽象成一个 JavaScript 对象树,通过对这个对象树的操作来更新实际的 DOM。当组件的状态或属性发生变化时,React 会生成一个新的虚拟 DOM 树,并通过比较新旧虚拟 DOM 树的差异,找出需要更新的部分。然后,React 会将这些差异转化为最小的 DOM 操作,只更新实际 DOM 中需要变化的部分,从而提高页面渲染的性能。
  • 虚拟 DOM 的主要优势在于它可以避免频繁地直接操作实际 DOM。相比于直接修改实际 DOM,虚拟 DOM 的操作更加轻量级,因为它是在内存中进行的。只有当需要更新实际 DOM 时,React 才会将变化应用到实际 DOM 上,从而减少了对实际 DOM 的操作次数,提高了性能。
  • 此外,虚拟 DOM 还可以简化开发流程。开发者可以将关注点集中在组件的逻辑和状态管理上,而不需要过多地关注实际 DOM 的操作。这样可以提高开发效率,并使代码更易于维护和理解。

总结来说,虚拟 DOM 是 React 中的一个重要概念,通过在内存中构建和操作 JavaScript 对象树,它可以优化页面渲染的性能和效率,同时简化开发流程。虚拟 DOM 在 React 中的应用使得前端开发更加高效和便捷。

react创建虚拟dom的方式

第一种:jsx来创建虚拟dom

const VDOM = (<div><h1>我是张三</h1><p>今年28岁了</p></div>
)

使用 React.createElement() 方法:

React 提供了一个名为 createElement() 的方法,用于创建虚拟 DOM 元素。这个方法接受三个参数:元素类型、属性对象和子元素。

const element = React.createElement('div', { className: 'my-class' }, 'Hello, React!');

总结

上述代码中,createElement() 方法创建了一个

元素的虚拟 DOM,其中包含了 className 属性和文本内容。

无论使用 JSX 还是 createElement() 方法,最终都会生成一个虚拟 DOM 对象,它是一个普通的 JavaScript 对象,包含了元素类型、属性、子元素等信息。这个虚拟 DOM 对象可以被 React 用于进行组件的渲染和更新操作。

需要注意的是,创建虚拟 DOM 只是在内存中构建了一个 JavaScript 对象,并没有直接操作实际的 DOM。要将虚拟 DOM 渲染到实际的 DOM 上,需要使用 React 的渲染方法,如 ReactDOM.render()。这个方法会将虚拟 DOM 转化为实际的 DOM 并插入到指定的容器中。

React Element

  • Virtual DOM 是真实 DOM 的模拟,真实 DOM 是由真实的 DOM 元素构成,Virtual DOM 也是由虚拟的 DOM 元素构成。
  • 真实 DOM 元素我们已经很熟悉了,它们都是 HTML 元素(HTML Element)。
  • 那虚拟 DOM 元素是什么呢?React 给虚拟 DOM 元素取名叫 React 元素(React Element)。

在这里插入图片描述

虚拟dom的流程

初始化:当创建一个 React 组件时,React 会生成一个虚拟 DOM 树,它是由轻量级的 JavaScript 对象构成的,与实际的 DOM 结构相对应。

渲染虚拟 DOM:通过调用组件的 render 方法,React 将虚拟 DOM 树转换为真实的 DOM 元素。这个过程会根据组件的状态和属性,生成一个新的虚拟 DOM 树。

Diff 算法:在每次更新组件时,React 会使用 Diff 算法比较新旧虚拟 DOM 树的差异,找出需要更新的部分。Diff 算法通过比较节点的类型、属性和顺序等信息,尽可能地减少对实际 DOM 的操作。

更新实际 DOM:根据 Diff 算法的结果,React 会将需要更新的部分转化为最小的 DOM 操作,然后将其应用到实际的 DOM 结构中。这样可以避免全量更新整个页面,提高页面渲染的效率。

监听数据变化:React 使用了单向数据流的模型,当组件的状态或属性发生变化时,React 会重新执行渲染流程,生成新的虚拟 DOM 树,并更新实际的 DOM 结构。

销毁组件:当组件被销毁时,React 会清除对应的虚拟 DOM 树和实际的 DOM 结构,释放相关资源。

虚拟dom和真实dom的对比

  • 性能更好:虚拟DOM可以减少对真实DOM的操作次数,从而提高应用程序的性能。当组件状态发生变化时,React会使用虚拟DOM来计算出最小化的DOM操作,然后只更新需要更新的部分,而不是整个页面。

  • 更容易维护:由于React使用虚拟DOM,我们可以将组件的状态和UI分离开来。这使得代码更加模块化,易于维护和重构。

  • 跨平台:React Native使用虚拟DOM来构建原生应用程序,因此可以在多个平台上使用相同的代码。

  • 更好的开发体验:React使用JSX语法来描述UI,这使得代码更加简洁、易读、易写,并且可以通过组件化的方式来组织代码。

  • 更好的可测试性:由于React组件是纯函数,它们的输出仅取决于输入,因此可以更容易地编写自动化测试。

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/118803.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在pycharm中创建python模板文件

File——>Setting——>File and Code Templates——>Python Scripts 在文本框中输入模板内容

vue首页多模块布局(标题布局)

<template><div class"box"><div class"content"><div class"box1" style"background-color: rgb(245,23,156)">第一个</div><div class"box2" style"background-color: rgb(12,233,…

windows下使用FFmpeg开源库进行视频编解码完整步聚

最终解码效果: 1.UI设计 2.在控件属性窗口中输入默认值 3.复制已编译FFmpeg库到工程同级目录下 4.在工程引用FFmpeg库及头文件 5.链接指定FFmpeg库 6.使用FFmpeg库 引用头文件 extern "C" { #include "libswscale/swscale.h" #include "libavdevic…

composer安装thinkphp6报错

composer安装thinkphp6报错&#xff0c; 查看是否安装了对应的PHP扩展&#xff0c;我这边使用的是宝塔的环境&#xff0c;全程可以可视化操作 这样就可以安装完成了

【AIGC】百度文库文档助手之 - 一键生成PPT

百度文库文档助手之 - 一键生成PPT 引言一、文档助手&#xff1a;体验一键生成PPT二、文档助手&#xff1a;进阶用法三、其它生成PPT的方法3.1 ChatGPT3.2 文心一言 引言 就在上个月百度文库升级为一站式智能文档平台&#xff0c;开放四大AI能力&#xff1a;智能PPT、智能总结、…

【Ansible自动化运维工具 第一部分】Ansible常用模块详解(附各模块应用实例和Ansible环境安装部署)

Ansible常用模块 一、Ansible1.1 简介1.2 工作原理1.3 Ansible的特性1.3.1 特性一&#xff1a;Agentless&#xff0c;即无Agent的存在1.3.2 特性二&#xff1a;幂等性 1.4 Ansible的基本组件 二、Ansible环境安装部署2.1 安装ansible2.2 查看基本信息2.3 配置远程主机清单 三、…

计算机中了mallox勒索病毒怎么办,勒索病毒解密,数据恢复

最近一段时间&#xff0c;云天数据恢复中心陆续收到很多企业的求助&#xff0c;企业的计算机服务器遭到了mallox勒索病毒攻击&#xff0c;导致企业的数据库无法正常使用&#xff0c;严重影响了企业的正常生产生活&#xff0c;为此&#xff0c;云天数据恢复中心的工程师通过对此…

【Java笔记+踩坑】设计模式——原型模式

导航&#xff1a; 【Java笔记踩坑汇总】Java基础JavaWebSSMSpringBootSpringCloud瑞吉外卖/黑马旅游/谷粒商城/学成在线设计模式面试题汇总性能调优/架构设计源码-CSDN博客​ 目录 零、经典的克隆羊问题&#xff08;复制10只属性相同的羊&#xff09; 一、传统方案&#xff1…

酒类商城小程序怎么做

随着互联网的快速发展&#xff0c;线上购物越来越普及。酒类商品也慢慢转向线上销售&#xff0c;如何搭建一个属于自己的酒类小程序商城呢&#xff1f;下面就让我们一起来看看吧&#xff01; 一、登录乔拓云平台 首先&#xff0c;我们需要进入乔拓云平台的后台&#xff0c;点击…

使用boost.mysql来操作mysql 数据库

准备条件 1. visual studio 2019 2. boost库 3. 安装本地的mysql 服务器&#xff0c;boost.mysql对mysql有版本要求最好8.0&#xff0c;具体参考官方文档 安装 使用Nuget安装boost 要安装 openssl&#xff0c;否则的话编译其他项目会产生依赖ssl的错误 安装mysql 省略 …

Java操作Excel

一、Java操作Excel 二、Excel根据单元格状态自动变更行背景颜色 用excel记录和跟进工作的时候&#xff0c;设置背景颜色&#xff0c;以此让记录更加突出&#xff0c;方便查看&#xff0c;但是手动修改背景颜色一来麻烦容易漏&#xff0c;也可能颜色不统一&#xff0c;我们可以试…

PHP 数据库交互优化,根据传参查询

接上文 修改以下内容 将查询的 uid 改为 username&#xff0c;同时在 user 和 message 两张表中查询 $sql "select m.id,u.username,m.title,m.content from user u,message m where u.idm.uid;"根据 message 中的 id 查询&#xff0c;形式为 http://127.0.0.1/m…

数学与经济管理

数学与经济管理&#xff08;2-4分&#xff09; 章节概述 最小生成树问题 答案&#xff1a;23 讲解地址&#xff1a;74-最小生成树问题_哔哩哔哩_bilibili 最短路径问题 答案&#xff1a;81 讲解地址&#xff1a;75-最短路径问题_哔哩哔哩_bilibili 网络与最大流量问题 真题 讲解…

【STL】:vector用法详解

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关vector的基础用法&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入门到精通 数…

k8s-----24、亲和力Affinity

1、应用场景 pod和节点间的关系&#xff1a; 某些Pod优先选择有ssdtrue标签的节点&#xff0c;如果没有在考虑部署到其它节点;某些Pod需要部署在ssdtrue和typephysical的节点上&#xff0c;但是优先部署在ssdtrue的节点上; pod和pod间的关系&#xff1a; 同一个应用的Pod不…

Wt库的C++下载器程序

以下是一个使用Wt库的C下载器程序&#xff0c;用于下载音频文件。此程序使用了的代码。 #include <Wt/Wt.h> #include <Wt/Http/DiskCache.h> #include <Wt/Http/HttpClient.h> ​ // 定义一个函数来获取服务器 static std::string get_proxy() {// 使用Wt:…

idea免费插件分享

分享一些在开发中常用到的idea插件&#xff0c;都是一些我自己常用的&#xff0c;希望对各位程序员有帮助吧。 1、Chinese Language 汉化插件&#xff1a;中文语言包将为您的 IntelliJ IDEA, AppCode, CLion, DataGrip, GoLand, PyCharm, PhpStorm, RubyMine, WebStorm, 和Rid…

js创建 ajax 过程

目录 前言&#xff1a;AJAX 技术的重要性 详解&#xff1a;创建 AJAX 请求的步骤 1. 创建 XMLHttpRequest 对象 2. 配置请求 3. 处理响应 4. 发送请求 5. 处理异步请求 解析&#xff1a;AJAX 请求的重要性和限制 总结&#xff1a; 前言&#xff1a;AJAX 技术的重要性 …

漏洞复现--用友 畅捷通T+ .net反序列化RCE

免责声明&#xff1a; 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直…

javaEE -8(9000字详解网络编程)

一&#xff1a;网络编程基础 1.1 网络资源 所谓的网络资源&#xff0c;其实就是在网络中可以获取的各种数据资源&#xff0c;而所有的网络资源&#xff0c;都是通过网络编程来进行数据传输的。 用户在浏览器中&#xff0c;打开在线视频网站&#xff0c;如优酷看视频&#xff…