当前位置： 首页 > news >正文

React ：一、简单概念

news 2025/12/28 15:46:10

目录

1.什么是React？

2.谁开发的

3.为什么要学React？

4.React的特点？

5.React依赖包

 6.第一个React程序

7.虚拟DOM的两种创建方法

8.虚拟DOM和真实DOM

1.什么是React？

用于构建用户界面的JavaScript库，是一个将数据渲染成HTML视图的开源JavaScript库。

以前处理一个页面：

1.发送请求获取数据，

2.处理数据（过滤、整理格式等）

3.操作DOM呈现页面

现在第三步交给React去做。

2.谁开发的

3.为什么要学React？

1.原生JavaScript操作DOM繁琐，效率低（DOM-API操作UI）。

2.使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排。

3.原生JavaScript没有组件化的编码方案，代码服用效率低。

4.React的特点？

1.采用组件化模式、声明式编码，提高开发效率及组件复用率。

声明式：就是直接说你要干什么，不用一步步命令对方起身，穿衣服，刷牙，而是直接让对方刷牙。

2.在React Native中可以使用React语法进行移动端开发。

3.使用虚拟DOM+优秀Diffing算法，尽量减少与真实DOM的交互。

 原先是直接对真实DOM进行操作，现在是对应一个虚拟DOM，它存在内存里，当加一个数据时，原先是把全部的数据都加载一遍，现在虚拟DOM会进行比较，重复数据的就不会重新提交，只有新增的数据操作真实DOM。

5.React依赖包

React 是用jsx写的不是js

babel.main.js 的作用  ES6 ==> ES5  、jsx ==> js

react.devolopment.js ==> react核心库

react.dom.development.js ==>react操作DOM，react拓展库

 6.第一个React程序

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>hello react</title>
</head>
<body><!-- 准备好一个"容器" --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-DOM，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入bable，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">/* 此处一定要写babel*///1.创建虚拟DOMconst VDOM = <h1>Hello react!!!</h1> /*此处一定不要写引号，因为不是字符串 *///2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))</script>
</body>
</html>

 

7.虚拟DOM的两种创建方法

开发过程中使用jsx方式，jsx就是js在创建虚拟DOM时太繁琐，而出现的技术，但是浏览器识别不了babel，在浏览器运行时也是把jsx转换为js运行，只是方便了我们操作。

语法糖：就是一种技术的简化方式。

1.jsx的方式

 2.js方式

 

8.虚拟DOM和真实DOM

<div id="demo"></div>：这就是一个真实DOM。

const TDOM = document.getElementById('demo');

TDOM 就是一个真实DOM

下如就是虚拟DOM，虚拟DOM就是一个object类型的对象。

 

虚拟DOM身上的属性很少，所以较轻，真实则很多重。

 

相关文章：

React ：一、简单概念

目录 1.什么是React&#xff1f; 2.谁开发的 3.为什么要学React&#xff1f; 4.React的特点&#xff1f; 5.React依赖包 6.第一个React程序 7.虚拟DOM的两种创建方法 8.虚拟DOM和真实DOM 1.什么是React&#xff1f; 用于构建用户界面的JavaScript库&#xff0c;是一个将…...

编程日记 2023/4/17 0:09:53

Actipro WinForms Studio Crack

Actipro WinForms Studio Crack 已验证Microsoft.NET 7兼容性。 添加了MetroDark配色方案。 添加了支持MetroLight和MetroDark颜色方案的MetroScrollBarRenderer。 添加了IWindowsColorScheme接口&#xff0c;该接口将替换对WindowsColorScheme的大多数引用。 添加了IWindowsCo…...

编程日记 2023/4/17 0:09:49

英伦四地到底是什么关系？

英格兰、苏格兰、威尔士和北爱尔兰四地到底是什么关系&#xff0c;为何苏格兰非要独立&#xff1f;故事还要从中世纪说起。大不列颠岛位于欧洲西部&#xff0c;和欧洲大陆隔海相望。在古代&#xff0c;大不列颠岛和爱尔兰属于凯尔特人的领地。凯尔特人是欧洲西部一个庞大的族群…...

编程日记 2023/4/17 0:09:43

Google三大论文之GFS

Google三大论文之GFS Google GFS&#xff08;Google File System&#xff09; 文件系统&#xff0c;一个面向大规模数据密集型应用的、可伸缩的分布式文件系统。GFS 虽然运行在廉价的普遍硬件设备上&#xff0c;但是它依然了提供灾难冗余的能力&#xff0c;为大量客户机提供了…...

编程日记 2023/3/9 10:46:06

嵌入式安防监控项目——exynos4412主框架搭建

目录 一、模块化编程思维 二、安防监控项目主框架搭建 一、模块化编程思维 其实我们以前学习32使用keil的时候就是再用模块化的思维。每个硬件都单独有一个实现功能的C文件和声明函数&#xff0c;进行宏定义以及引用需要使用头文件的h文件。 比如简单的加减乘除取余操作我们…...

编程日记 2023/3/9 10:44:56

YOLOv5s网络模型讲解(一看就会)

文章目录前言1、YOLOv5s-6.0组成2、YOLOv5s网络介绍2.1、参数解析2.2、YOLOv5s.yaml2.3、YOLOv5s网络结构图3、附件3.1、yolov5s.yaml 解析表3.2、 yolov5l.yaml 解析表总结前言 最近在重构YOLOv5代码&#xff0c;本章主要介绍YOLOv5s的网络结构 1、YOLOv5s-6.0组成 我们熟知YO…...

编程日记 2023/3/9 10:43:52

kkfileView linux 离线安装

文章目录前言一、安装 LiberOffice二、安装kkfileView1.下载安装包2.启动总结前言 一、安装 LiberOffice 下载https://kkfileview.keking.cn/LibreOffice_7.1.4_Linux_x86-64_rpm.tar.gz 安装 tar -zxvf LibreOffice_7.1.4_Linux_x86-64_rpm.tar.gz cd LibreOffice_7.1.4.2_L…...

编程日记 2023/3/9 10:42:44

如何编写BI项目之ETL文档

XXXXBI项目之ETL文档 xxx项目组 ------------------------------------------------1---------------------------------------------------------------------- 目录 一 、ETL之概述 1、ETL是数据仓库建构/应用中的核心…...

编程日记 2023/3/9 10:41:38

【LeetCode】剑指 Offer 24. 反转链表 p142 -- Java Version

题目链接&#xff1a;https://leetcode.cn/problems/fan-zhuan-lian-biao-lcof/submissions/ 1. 题目介绍&#xff08;24. 反转链表&#xff09; 定义一个函数&#xff0c;输入一个链表的头节点&#xff0c;反转该链表并输出反转后链表的头节点。 【测试用例】&#xff1a; 示…...

编程日记 2023/3/9 10:40:33

LAY-EXCEL导出excel并实现单元格合并

通过lay-excel插件实现Excel导出&#xff0c;并实现单元格合并&#xff0c;样式设置等功能。更详细描述&#xff0c;请去lay-excel插件文档查看&#xff0c;地址&#xff1a;http://excel.wj2015.com/_book/docs/%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B.html一、安装这里使用Vue…...

编程日记 2023/3/9 10:39:31

配置VM虚拟机Centos7网络

配置VM虚拟机Centos7网络 第一步&#xff0c;进入虚拟机设置选中【网络适配器】选择【NAT模式】 第二步&#xff0c;进入windows【控制面板\网络和 Internet\网络连接】设置网络状态。 我们选择【VMnet8】 点击【属性】查看它的网络配置 2 .我们找到【Internet 协议版本 4(TCP…...

编程日记 2023/3/9 10:38:25

Kafka 位移主题

Kafka 位移主题位移格式创建位移提交位移删除位移Kafka 的内部主题 (Internal Topic) : __consumer_offsets (位移主题&#xff0c;Offsets Topic) 老 Consumer 会将位移消息提交到 ZK 中保存 当 Consumer 重启后&#xff0c;能自动从 ZK 中读取位移数据&#xff0c;继续消费…...

编程日记 2023/3/9 10:37:22

详细讲解零拷贝机制的进化过程

一、传统拷贝方式&#xff08;一&#xff09;操作系统经过4次拷贝CPU 负责将数据从磁盘搬运到内核空间的 Page Cache 中&#xff1b;CPU 负责将数据从内核空间的 Page Cache 搬运到用户空间的缓冲区&#xff1b;CPU 负责将数据从用户空间的缓冲区搬运到内核空间的 Socket 缓冲区…...

编程日记 2023/3/9 10:36:20

2023年场外个股期权研究报告

第一章 概况 场外个股期权&#xff08;Over-the-Counter Equity Option&#xff09;&#xff0c;是指由交易双方根据自己的需求和意愿&#xff0c;通过协商确定行权价格、行权日期等条款的股票期权。与交易所交易的标准化期权不同&#xff0c;场外个股期权的合同内容可以根据交…...

编程日记 2023/3/9 10:35:18

k8s pod,ns,pvc 强制删除

一、强制删除pod$ kubectl delete pod <your-pod-name> -n <name-space> --force --grace-period0解决方法&#xff1a;加参数 --force --grace-period0&#xff0c;grace-period表示过渡存活期&#xff0c;默认30s&#xff0c;在删除POD之前允许POD慢慢终止其上的…...

编程日记 2023/4/18 1:20:06

力扣第99场双周赛题目记录（复盘）

第一题 2578.最小和分割 给你一个正整数 num &#xff0c;请你将它分割成两个非负整数 num1 和 num2 &#xff0c;满足&#xff1a; num1 和 num2 直接连起来&#xff0c;得到 num 各数位的一个排列。 换句话说&#xff0c;num1 和 num2 中所有数字出现的次数之和等于 num 中所…...

编程日记 2023/4/18 1:20:05

spring事务失效原因

一.抛出事务不支持的异常 原理&#xff1a; Spring事务默认支持RuntimeException异常&#xff0c;抛出的异常为RuntimeException异常及其子类异常事务均可生效&#xff0c;而我们日常常见的异常基本都继承自RuntimeException&#xff0c;所以无需指定异常类型事务也能生效。 但…...

编程日记 2023/4/18 1:20:03

pikachu靶场CSRF之TOKEN绕过

简介 Pikachu靶场中的CSRF漏洞环节里面有一关CSRF TOKEN&#xff0c;这个关卡和其余关卡稍微有点不一样&#xff0c;因为表单里面存在一个刷新就会变化的token&#xff0c;那么这个token是否能绕过呢&#xff1f;接下来我们来仔细分析分析 实战过程 简单尝试 先利用任意一个…...

编程日记 2023/4/18 1:20:01

Windows中配置docker没有hyper-v功能解决方案

&#x1f468; 作者简介&#xff1a;大家好&#xff0c;我是Taro&#xff0c;前端领域创作者 ✒️ 个人主页&#xff1a;唐璜Taro &#x1f680; 支持我&#xff1a;点赞&#x1f44d;&#x1f4dd; 评论 ⭐️收藏 文章目录前言解决步骤&#xff1a;1.新建文档2. 另存为3. 功能…...

编程日记 2023/4/18 1:19:59

电子台账：模板制作之五——二级过滤与多条件组合

1 前言工作中&#xff0c;经常会遇到很复杂的数据&#xff0c;比如内销产品和出口产品、正常产品和报废产品都混在一块儿。电子台账中&#xff0c;需要把这些数据都区分开&#xff0c;分别汇总。这种情况&#xff0c;可以用台账软件的二级过滤功能来处理&#xff0c;实际上就是…...

编程日记 2023/4/18 1:19:57

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2025/12/27 18:24:49

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

编程新知 2025/9/22 15:46:39

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/10/27 21:25:04

安宝特方案丨XRSOP人员作业标准化管理平台：AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

编程新知 2025/12/22 23:04:25

Frozen-Flask ：将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

编程新知 2025/12/5 20:57:13

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/9/6 16:47:17

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/12/16 23:25:05

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

编程新知 2025/10/15 12:45:18

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

编程新知 2025/8/22 13:56:38

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

编程新知 2025/12/9 4:11:09