React 中虚拟DOM是什么,为什么需要它?

注意:本节主要讲React中的虚拟DOM,但是虚拟DOM并不是React中特有的内容。

1. React 中虚拟 DOM是什么?

虚拟DOM是对真实DOM的描述,虚拟DOM是JS对象,实际上就是 JSX 通过 babel 转换成 React.createElement(),然后这个函数执行后变成的 JS 对象。关于JSX的介绍可以参考我的这篇文章 JSX 代码是如何成为 DOM 的?。

2. React 中虚拟DOM是如何工作的?

虚拟DOM在组件挂载和更新阶段都会出现,工作流程如下:

  • 挂载阶段:React 将结合 JSX 的描述,构建出虚拟 DOM 树,然后通过 ReactDOM.render 实现虚拟 DOM 到真实 DOM 的映射。

  • 更新阶段:页面的变化在作用于真实 DOM 之前,会先作用于虚拟 DOM,虚拟 DOM 将在 JS 层借助算法先对比出具体有哪些真实 DOM 需要被改变,然后再将这些改变作用于真实 DOM。

3. React 中为什么需要虚拟DOM?

使用虚拟DOM主要有下面三方面的优势:

  1. 提升性能

    传统的web开发中都是直接操作真实DOM来更新页面,这些操作非常消耗性能,特别是在数据频繁变化的情况下。

  2. 提高开发效率

    手动操作DOM非常麻烦而且容易出错,通过使用虚拟 DOM可以将更新逻辑抽象为对虚拟DOM的操作,也就是对JS对象的操作。

  3. 跨平台兼容性

    虚拟 DOM 是对真实渲染内容的一层抽象。若没有这一层抽象,那么视图层将和渲染平台紧密耦合在一起,为了描述同样的视图内容,你可能要分别在 Web 端和 Native 端写完全不同的两套甚至多套代码。但现在中间多了一层描述性的虚拟 DOM,它描述的东西可以是真实 DOM,也可以是iOS 界面、安卓界面、小程序…同一套虚拟 DOM,可以对接不同平台的渲染逻辑,从而实现“一次编码,多端运行”,如下图所示。

完,如有不恰当地方欢迎指正。

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

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

相关文章

来自OpenAI的官方解释:ChatGPT中的GPTs与Assistants API的区别是什么?有什么差异?

本文原文来自DataLearnerAI的官方网站: 来自OpenAI的官方解释:ChatGPT中的GPTs与Assistants API的区别是什么?有什么差异? | 数据学习者官方网站(Datalearner)https://www.datalearner.com/blog/1051701996595465 OpenAI发布的产…

图解算法数据结构-LeetBook-查找01_第一个只出现一次的字符

某套连招动作记作仅由小写字母组成的序列 arr,其中 arr[i] 第 i 个招式的名字。请返回第一个只出现一次的招式名称,如不存在请返回空格。 示例 1: 输入:arr “abbccdeff” 输出:‘a’ 示例 2: 输入&…

3D Web轻量引擎HOOPS Communicator如何实现对大模型的渲染支持?

除了读取轻松外,HOOPS Communicator对超大模型的支持效果也非常好,它可以支持30GB的包含70万个零件和3.5亿个三角面的Catia装配模型! 那么它是如何来实现对大模型的支持呢? 我们将从以下几个方面与大家分享:最低帧率…

python核心阶段(五)—— 面向对象三大特性

1.封装 概念:封装主要是指将一些属性和相关方法封装在一个对象中,对外隐藏内部具体实现细节 作用:1)使用起来更加方便,类似于提供了一个工具箱 2)保证数据的安全(设置私有属性) 3&am…

高精度加法,减法,乘法,除法(下)(C语言)

前言 上一篇博客我们分享了高精度加法,减法,这一期我将为大家讲解高精度乘法和高精度除法。那让我们开始吧! 对加法和减法感兴趣的话就点我 文章目录 1,乘法2,除法3,尾声 1,乘法 让我们想想我们平时做数学…

openpyxl读取Excel文件忽略单元格公式仅读取所显示的值

目录 前言解决方案先不加:看读取信息加上参数:看读取信息完整代码 前言 我们在读取Excel文件时,假如某行或者某列是利用公式生成的,但是我们在利用openpyxl进行读取时,发现读取到的是公式,而非显示的值 解…

[⑧ADRV902x]: Digital Pre-Distortion (DPD)学习笔记

前言 DPD 数字预失真技术,是一种用于抑制功率放大器非线性失真的方法。 它通过在信号输入功率放大器(PA)之前插入一个预失真模块,对输入信号进行适当的调制,以抵消功率放大器引起的非线性失真,使功率放大器…

Ubuntu 安装 CUDA 和 cuDNN 详细步骤

我的Linux系统背景: 系统和驱动都已安装。 系统是centos 8。查看自己操作系统的版本信息:cat /etc/issue或者是 cat /etc/lsb-release 用nvidia-smi可以看到显卡驱动和可支持的最高cuda版本,我的是12.2。驱动版本是535.129.03 首先&#…

[足式机器人]Part2 Dr. CAN学习笔记-数学基础Ch0-9阈值选取-机器视觉中应用正态分布和6-sigma

本文仅供学习使用 本文参考: B站:DR_CAN Dr. CAN学习笔记-数学基础Ch0-9阈值选取-机器视觉中应用正态分布和6-sigma 5M1E——造成产品质量波动的六因素 人 Man Manpower 机器 Machine 材料 Material 方法 Method 测量 Measurment 环境 Envrionment DMAI…

模块电源(六):前馈电容

一、前馈电容: 前馈电容是与电阻分压的顶部电阻 并联的"可选电容器" 二、计算及仿真: 1、计算 无前馈电容时,输出电压:;有前馈电容时,输出电压:,(其中,&am…

crmeb本地开发配置代理

crmeb 是一个开源的商城系统, v5 版本是一个前后端分离的项目, 我们从git仓库中下载下来的是一个文件夹,其结构是这样的 我的系统没有使用docker ,使用的是 laragon 的系统 所以首先我们要在 nginx 中配置 之后, 我们…

WebStorm:Mac/Win上强大的JavaScript开发工具

WebStorm是JetBrains公司开发的针对Mac和Windows系统的JavaScript开发工具。它为开发者提供了一站式的代码编辑、调试、测试和版本控制等功能,帮助你更高效地进行Web开发。新版本的WebStorm 2023在性能和用户体验方面都做出了重大改进,让你的JavaScript开…

为什么感染HPV的人越来越多?劲松中西医结合医院专家发表看法

近年来,HPV感染率在我国呈现上升趋势,引起了社会的广泛关注。HPV是一种人乳头瘤病毒,主要通过性接触传播,也是引起宫颈癌的主要原因之一。那么,为什么我国的HPV感染率如此高呢? 首先,我们需要了…

深度学习疲劳检测 驾驶行为检测 - python opencv cnn 计算机竞赛

文章目录 0 前言1 课题背景2 相关技术2.1 Dlib人脸识别库2.2 疲劳检测算法2.3 YOLOV5算法 3 效果展示3.1 眨眼3.2 打哈欠3.3 使用手机检测3.4 抽烟检测3.5 喝水检测 4 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 **基于深度学习加…

远程服务器QEMU+Ubuntu+GRUB+VNC最佳实践

远程服务器QEMUUbuntuGRUBVNC最佳实践 1. 准备2. QEMU启动安装Ubuntu2.1 服务器端2.2 本地端 3. 从服务器终端控制虚拟机GRUB与虚拟机终端 这段时间参与大量内核切换测试工作,实体机需要硬件自检太过笨重,因此主要通过QEMU验证正确性。有一个很大的问题是…

JavaSE基础50题:11. 输出一个整数的每一位

概述 输出一个整数的每一位。 如:1234的每一位是4,3,2,1 。 个位:1234 % 10 4 十位:1234 / 10 123 123 % 10 3 百位:123 / 10 12 12 % 10 2 千位: 12 / 10 1 代码 ublic sta…

【小白专用】MySQL入门(详细总结)

3. 创建数据库 使用 create database 数据库名; 创建数据库。 create database MyDB_one; create database DBAliTest; 创建数据库成功后,数据库的数量变成了6个,多了刚才创建的 dbalitest 。 4. 创建数据库时设置字符编码 使用 create database 数据…

YouTube网红营销:出海品牌扩大影响力的关键

随着数字媒体的兴起,社交媒体已成为品牌与消费者之间建立联系的重要桥梁。其中,YouTube作为全球最大的视频分享平台,不仅拥有庞大的用户群体,还聚集了众多有影响力的网红。这些网红在各自的领域内拥有强大的话语权和号召力&#x…

虚拟化之指令的Trap和仿真

有时,虚拟机监控程序需要在虚拟机(VM)中模拟操作。例如,VM内的软件可能尝试配置与功耗管理或缓存一致性相关的低级处理器控件。通常,您不希望将VM直接访问这些控件,因为它们可能被用于突破隔离,或影响系统中的其他VM。 trap在执行给定操作(例如读取寄存器)时引发异常…

2023年全国职业院校技能大赛-大数据应用开发-数据可视化

可视化题目与以往相同,做法类似,我这里展示得到语句后处理优化以后的代码,以函数式来写可视化,比以前400-500多行代码简洁到100多行。其他题目见本栏目,那里面的代码都是没有优化后的,这次主要以效率和精简…