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

React是什么？

news 文章来源：https://blog.csdn.net/weixin_45215308/article/details/139786471 2025/2/8 18:47:00

theme: condensed-night-purple
highlight: atelier-cave-light

React是什么？

官方的解释是：A JavaScript library for building user interfaces用于构建用户界面的 JavaScript 库

那为什么要选择用React呢？

原生的HTML、CSS、JavaScrip的方式存在

  1. 大规模应用难以维护：原生的开发方式通常会使代码变得非常复杂，特别是在大规模应用中，这可能导致代码难以维护。
  2. 页面渲染效率低：在原生方式中，页面渲染通常需要进行大量的DOM操作，这会导致页面渲染效率低下，尤其是在处理大量数据或复杂交互时。
  3. 缺乏组件化：原生方式通常缺乏组件化的支持，这会使代码的可复用性和可维护性变得非常低。
  4. 开发效率低：在原生方式中，需要自己手动管理页面状态和事件处理，这会使开发效率变得非常低下。

React的优点

  1. 可以很好的跨浏览器兼容，同时兼容多端
  2. 虚拟 DOM：React 通过使用虚拟 DOM 技术，可以将对 DOM 的操作最小化，从而提高性能和响应速度。当数据变化时，React 会先将新的数据与旧的数据进行比较，然后只更新有变化的部分，而不是重新渲染整个页面。
  3. 组件化开发：React 的核心思想是将 UI 拆分为独立的组件，每个组件都有自己的状态和行为，并且可以嵌套使用。这种组件化开发方式可以使得代码更加模块化、可重用，也更易于维护和测试。
  4. 单向数据流：React 的数据流是单向的，即自上而下的单向数据流。这种数据流可以使得应用程序的数据变化更加可预测和稳定，也更容易排查和解决 bug。
  5. 生态系统和社区支持：React 已经成为了现代 Web 开发的主流技术之一，拥有庞大的社区和生态系统支持。React 生态系统中有许多优秀的库和工具可以帮助开发人员更加高效地开发和管理 Web 应用程序。

React开发依赖

开发React必须依赖三个库：

  • react：包含react所必须的核心代码
  • react-dom：react渲染在不同平台所需要的核心代码
  • babel：将jsx转换成React代码的工具

这三个库都是是各司其职的，每一个库实现的功能都是不同的。

但其实在React的0.14版本之前是没有react-dom这个概念的，所有功能都包含在react里。那为什么要进行拆分呢？

原因就是react-native。react包中包含了react和react-native所共同拥有的核心代码。但是react-dom针对web和native所完成的事情不同：

  • web端：react-dom会讲jsx最终渲染成真实的DOM，显示在浏览器中
  • native端：react-dom会讲jsx最终渲染成原生的控件（比如Android中的Button，iOS中的UIButton）。

引入React依赖

我们在编写React代码时，这三个依赖都是必不可少的。那么，如何添加这三个依赖呢？

  • 方式一：直接CDN引入
  • 方式二：下载后，添加本地依赖
  • 方式三：通过npm管理（通过脚手架创建项目后再使用）

CDN方式

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

相关文章：

React是什么？

theme: condensed-night-purple highlight: atelier-cave-light React是什么&#xff1f; 官方的解释是&#xff1a;A JavaScript library for building user interfaces用于构建用户界面的 JavaScript 库 那为什么要选择用React呢&#xff1f; 原生的HTML、CSS、JavaScrip的…...

编程日记 2024/6/20 5:57:43

创新入门 | 病毒循环Viral Loop是什么？为何能实现指数增长

今天&#xff0c;很多高速增长的成功创业公司都在采用”病毒循环“的策略去快速传播、并扩大用户基础。究竟什么是“病毒循环”&#xff1f;初创公司的创始人为何需要重视这个策略&#xff1f;这篇文章中将会一一解答与病毒循环有关的各种问题。 一、什么是病毒循环&#xff08…...

编程日记 2024/6/20 5:56:42

鸿蒙HarmonyOS实战：渲染控制、路由案例

条件渲染 简单来说&#xff0c;就是动态控制组件的显示与隐藏&#xff0c;类似于vue中的v-if 但是这里写法就是用if、else、else if看起来更像是原生的感觉 效果 循环渲染 我们实际开发中&#xff0c;数据一般是后端返回来的对象格式&#xff0c;对此我们需要进行遍历&#…...

编程日记 2024/6/20 5:55:40

【Linux】进程控制2——进程等待（waitwaitpid）

1. 进程等待必要性 我们知道&#xff0c;子进程退出&#xff0c;父进程如果不管不顾&#xff0c;就可能造成"僵尸进程”的问题&#xff0c;进而造成内存泄漏。另外&#xff0c;进程一旦变成僵尸状态&#xff0c;那就刀枪不入&#xff0c;“杀人不眨眼”的kill -9 也无能为…...

编程日记 2024/6/20 5:53:38

SpringBoot 统计接口调用耗时的多种方式

在实际开发中&#xff0c;了解项目中接口的响应时间是必不可少的事情。SpringBoot 项目支持监听接口的功能也不止一个&#xff0c;接下来我们分别以 AOP、ApplicationListener、Tomcat 三个方面去实现三种不同的监听接口响应时间的操作。 AOP 首先我们在项目中创建一个类 &am…...

编程日记 2024/6/20 5:50:34

Linux系统安装Ruby语言

Ruby是一种面向对象的脚本语言&#xff0c;由日本的计算机科学家松本行弘设计并开发&#xff0c;Ruby的设计哲学强调程序员的幸福感&#xff0c;致力于简化编程的复杂性&#xff0c;并提供一种既强大又易于使用的工具。其语法简洁优雅&#xff0c;易于阅读和书写&#xff0c;使…...

编程日记 2024/6/20 5:49:31

网络安全练气篇——OWASP TOP 10

1、什么是OWASP&#xff1f; OWASP&#xff08;开放式Web应用程序安全项目&#xff09;是一个开放的社区&#xff0c;由非营利组织 OWASP基金会支持的项目。对所有致力于改进应用程序安全的人士开放&#xff0c;旨在提高对应用程序安全性的认识。 其最具权威的就是“10项最严重…...

编程日记 2024/6/20 5:48:29

python实现进度条的方法和实现代码

在Python中&#xff0c;有多种方式可以实现进度条。这里&#xff0c;我将介绍七种常见的方法&#xff1a;使用tqdm&#xff08;这是一个外部库&#xff0c;非常流行且易于使用&#xff09;、rich、click、progressbar2等库以及纯Python的print函数与time库来模拟进度条。 目录…...

编程日记 2024/6/20 5:45:26

被拷打已老实！面试官问我 #{} 和 ${} 的区别是什么？

引言&#xff1a;在使用 MyBatis 进行数据库操作时&#xff0c;#{} 和 ${} 的区别是面试中常见的问题&#xff0c;对理解如何在 MyBatis 中安全有效地处理 SQL 语句至关重要。正确使用这两种占位符不仅影响应用的安全性&#xff0c;还涉及到性能优化。 题目 被拷打已老实&…...

编程日记 2024/6/20 5:44:24

C# —— while循环语句

作用 让顺序执行的代码 可以停下来 循环执行某一代码块 // 条件分支语句: 让代码产生分支 进行执行 // 循环语句 : 让代码可以重复执行 语法 while循环 while (bool值) { 循环体(条件满足时执行的代码块) …...

编程日记 2024/6/20 5:42:21

力扣第205题“同构字符串”

在本篇文章中&#xff0c;我们将详细解读力扣第205题“同构字符串”。通过学习本篇文章&#xff0c;读者将掌握如何使用哈希表来解决这一问题&#xff0c;并了解相关的复杂度分析和模拟面试问答。每种方法都将配以详细的解释&#xff0c;以便于理解。 问题描述 力扣第205题“…...

编程日记 2024/6/20 5:41:20

探索RESTful API开发，构建可扩展的Web服务

介绍 当我们浏览网页、使用手机应用或与各种互联网服务交互时&#xff0c;我们经常听到一个术语&#xff1a;“RESTful API”。它听起来很高深&#xff0c;但实际上&#xff0c;它是构建现代网络应用程序所不可或缺的基础。 什么是RESTful API&#xff1f; 让我们将RESTful …...

编程日记 2024/6/20 5:40:18

苹果安卓网页的H5封装成App的应用和原生开发的应用有什么不一样？

H5封装类成App的应用和原生应用有什么不一样&#xff1f;——一对比谈优缺点 1. 开发速度和复用性 H5封装的App优势&#xff1a;一次编写&#xff0c;多平台运行。你只需要使用一种语言编写代码&#xff0c;就可以发布到不同的平台&#xff0c;降低开发成本。 原生应用优势&…...

编程日记 2024/6/20 5:38:16

IO流2.

字符流-->字符流的底层其实就是字节流 public class Stream {public static void main(String[] args) throws IOException {//1.创建对象并关联本地文件FileReader frnew FileReader("abc\\a.txt");//2.读取资源read()int ch;while((chfr.read())!-1){System.out…...

编程日记 2024/6/20 5:37:15

详解MySQL中的PERCENT_RANK函数

目录 1. 引入1. 基本使用2&#xff1a;分组使用3&#xff1a;处理重复值4. 使用优势4.1 手动计算百分等级4.2 使用 PERCENT_RANK 的优势4.3 使用 PERCENT_RANK 5. 总结 在 MySQL 中&#xff0c;PERCENT_RANK 函数用于计算一个值在其分组中的百分等级。 它的返回值范围是从 0 …...

编程日记 2024/6/20 5:36:13

宏任务与微任务

一、宏任务 1、概念 指消息队列中等地被主线程执行的事件 2、种类 script主代码块、setTimeout 、setInterval 、nodejs的setImmediate 、MessageChannel&#xff08;react的fiber用到&#xff09;、postMessage、网络I/O、文件I/O、用户交互的回调等事件、UI渲染事件&#x…...

编程日记 2024/6/20 5:33:09

昇思大模型学习·第一天

mindspore快速入门回顾 导入mindspore包 处理数据集 下载mnist数据集进行数据集预处理 MnistDataset()方法train_dataset.get_col_names() 打印列名信息使用create_tuple_iterator 或create_dict_iterator对数据集进行迭代访问 网络构建 mindspore.nn: 构建所有网络的基类用…...

编程日记 2024/6/20 5:32:08

python调用chatgpt

简单写了一下关于文本生成接口的调用&#xff0c;其余更多的调用方法可在官网查看 import os from dotenv import load_dotenv, find_dotenv from openai import OpenAI import httpxdef gpt_config():# 为了安全起见&#xff0c;将key写到当前项目根目录下的.env文件中# find…...

编程日记 2024/6/20 5:31:07

YOLOV8 目标检测：训练自定义数据集

1、下载 yolov8项目&#xff1a;ultralytics/ultralytics&#xff1a;新增 - PyTorch 中的 YOLOv8 &#x1f680; > ONNX > OpenVINO > CoreML > TFLite --- ultralytics/ultralytics: NEW - YOLOv8 &#x1f680; in PyTorch > ONNX > OpenVINO > CoreM…...

编程日记 2024/6/20 5:30:05

动态更新自建的Redis连接池连接数量

/*** 定时更新Redis连接池信息&#xff0c;防止资源让费*/private static final ScheduledThreadPoolExecutor DYNAMICALLY_UPDATE_REDIS_POOL_THREAD new ScheduledThreadPoolExecutor(1, new ThreadFactory() {Overridepublic Thread newThread(Runnable r) {Thread thread …...

编程日记 2024/6/20 5:29:04

浅谈设计师的设计地位

在当今这个创意无限的时代&#xff0c;设计师的地位日益凸显。他们以独特的视角和精湛的技能&#xff0c;为我们的生活带来了无尽的色彩与灵感。然而&#xff0c;随着行业的不断发展&#xff0c;设计师如何在众多同行中脱颖而出&#xff0c;提升自己的设计地位呢&#xff1f;答…...

编程日记 2024/6/20 5:28:02

C/C++ string模拟实现

1.模拟准备 1.1因为是模拟string&#xff0c;防止与库发生冲突&#xff0c;所以需要命名空间namespace隔离一下&#xff0c;我们来看一下基本内容 namespace yx {class string{private://char _buff[16]; lunix下小于16字节就存buff里char* _str;size_t _size;size_t _capac…...

编程日记 2024/6/20 5:27:01

微信小程序学习（八）：behaviors代码复用

小程序的 behaviors 方法是一种代码复用的方式&#xff0c;可以将一些通用的逻辑和方法提取出来&#xff0c;然后在多个组件中复用&#xff0c;从而减少代码冗余&#xff0c;提高代码的可维护性。 如果需要 behavior 复用代码&#xff0c;需要使用 Behavior() 方法&#xff0c…...

编程日记 2024/6/20 5:26:00

【The design pattern of Attribute-Based Dynamic Routing Pattern (ADRP)】

In ASP.NET Core, routing is one of the core functionalities that maps HTTP requests to the corresponding controller actions. While “Route-Driven Design Pattern” is a coined name for a design pattern, we can construct a routing-centric design pattern base…...

编程日记 2024/6/20 5:24:59

2713. 矩阵中严格递增的单元格数

题目 给定一个 m x n 的整数矩阵 mat&#xff0c;我们需要找出从某个单元格出发可以访问的最大单元格数量。移动规则是可以从当前单元格移动到同一行或同一列的任何其他单元格&#xff0c;但目标单元格的值必须严格大于当前单元格的值。需要返回最大可访问的单元格数量。 示例…...

编程日记 2024/6/20 5:21:54

git创建子模块

有种情况我们经常会遇到&#xff1a;某个工作中的项目需要包含并使用另一个项目。 也许是第三方库&#xff0c;或者你独立开发的&#xff0c;用于多个父项目的库。 现在问题来了&#xff1a;你想要把它们当做两个独立的项目&#xff0c;同时又想在一个项目中使用另一个。 Git …...

编程日记 2024/6/20 5:20:53

把Deepin塞进U盘，即插即用！Deepin To Go来袭

前言 小伙伴之前在某篇文章下留言说&#xff1a;把Deepin塞进U盘的教程。 这不就来了吗&#xff1f; 事实是可以的。这时候你要先做点小准备&#xff1a; 一个大小为8GB或以上的普通U盘 一个至少64GB或以上的高速U盘 一个Deepin系统镜像文件 普通U盘的大概介绍&#xff1…...

编程日记 2024/6/20 5:18:50

​​给【AI硬件】创业者的论文、开源项目和产品整理

一、AI 硬件精选论文 《DrEureka: Language Model Guided Sim-To-Real Transfer》 瑜伽球上遛「狗」这项研究由宾夕法尼亚大学、 NVIDIA 、得克萨斯大学奥斯汀分校的研究者联合打造&#xff0c;并且完全开源。他们提出了 DrEureka&#xff08;域随机化 Eureka&#xff09;&am…...

编程日记 2024/6/20 5:16:47

模拟面试题卷二

1. 什么是JavaEE框架&#xff0c;你能列举一些常用的JavaEE框架吗&#xff1f; 答&#xff1a;JavaEE框架是一套用于开发企业级应用的技术规范和工具集合。常用的JavaEE框架有Spring、Hibernate、Struts、JSF等。 2. 请解释一下面向对象技术和设计原则是什么&#xff0c;你能…...

编程日记 2024/6/20 5:15:45

22种常用设计模式示例代码

文章目录 创建型模式结构型模式行为模式 仓库地址https://github.com/Xiamu-ssr/DesignPatternsPractice 参考教程 refactoringguru设计模式-目录 创建型模式 软件包复杂度流行度工厂方法factorymethod❄️⭐️⭐️⭐️抽象工厂abstractfactory❄️❄️⭐️⭐️⭐️生成器bui…...

编程日记 2024/6/20 5:13:42

wordpress商家插件/网站seo关键词优化

多个PDF文件合并成一个PDF文件&#xff0c;需要用到PDF合并功能&#xff0c;可以用奥凯丰 PDF转换大师中的合并功能。 【PDF转换大师】转为word_excel_ppt_txt_jpg等格式-奥凯丰okfonePDF转换大师是奥凯丰推出的一款可以把pdf文件格式转换成word&#xff0c;excel&#xff0c;…...

编程日记 2025/2/8 18:06:48

vs2013怎么做网站/百度seo推广工具

目录 1.概述 2.图解表格布局中的常用术语和概念 2.1 表格布局有哪些属性 2.2 Margin(边距) 2.3 Spacing(间隔) 2.4 Strech(纵向和横向拉伸系数)​ 2.5 最小行高与最小列宽 2.6 SizeConstraint(尺寸控制模式) 3.基础用法 3.1 使用Qt设计师创建布局 3.2 使用代码创建布…...

编程日记 2025/2/8 7:35:56

南京营销型网站建设/bt种子磁力搜索

我发现了这个程序http://baiyunmanor.com/blog/work/get-current-date-time-in-dos-batch-file/但是我不知道那行是什么:: datetime.bat到底是什么意思&#xff1f;在实践中&#xff0c;::是一个标签(也有可能不准确地用注释标签广为人知)&#xff0c;就像REM一样&#xff0c;它…...

编程日记 2025/2/8 5:30:12

wordpress置顶文章/上海谷歌优化

情况一&#xff1a;ng-click 和ng-if 一起使用 情况二&#xff1a;AngularJS中动态添加的ng-click 失效 正常情况&#xff08;即非动态插入 DOM 对象&#xff09;下&#xff0c;ng-click 这样的指令之所以有效&#xff08;即点击之后能调用注册在可见作用域里的方法&#xff09…...

编程日记 2025/2/8 3:57:28

网站百度权重怎么提升/外链网

一、背景 java中用循环是家常便饭&#xff0c;所以很有必要搞清楚终止循环的用法&#xff0c;这里做个总结。 二、介绍 break 作用&#xff1a;终止循环&#xff08;不再执行循环操作&#xff09; 代码示例&#xff1a; class Test{public static void main(String[]args){…...

编程日记 2025/2/8 3:40:18

东营seo网站推广费用/百度资源提交

总结自己的调试心得&#xff0c;总结如下&#xff1a; 　　1、Cisco29系列交换机可以做基于2层的端口安全&#xff0c;即mac地址与端口进行绑定。 　　2、 Cisco3550以上交换机均可做基于2层和3层的端口安全&#xff0c;即mac地址与端口绑定以及mac地址与ip地址绑定。 　　3、以…...

编程日记 2025/2/7 23:49:01