hello react

react中文官网

一、什么是react

React是一个由Facebook开源的JavaScript库，用于构建用户界面。它基于组件化的思想，将界面拆分成多个独立的、可复用的组件，并通过组件之间的交互构建整个用户界面。React使用虚拟DOM（Virtual DOM）来实现高效的页面更新，通过比对更新前后的虚拟DOM树的差异，只对实际需要更新的部分进行操作，从而提高页面性能。

React还引入了JSX语法，使得开发者可以在JavaScript代码中直接编写HTML标签和组件，提高了代码的可读性和开发效率。React还提供了丰富的生命周期方法和状态管理机制，方便开发者管理和控制组件的生命周期和状态变化。

React具有跨平台的特点，可以用于开发Web应用、移动应用以及其他平台上的用户界面。它被广泛应用于各种规模的项目中，是目前最流行的前端开发框架之一。

二、React的发展史

React的发展历史可分为以下几个阶段：

  1. 诞生和引入：React最初由Facebook的工程师Jordan Walke于2011年创建。最初的版本是一个用于在Facebook内部使用的工具，用于解决其大规模应用中复杂的UI渲染问题。

  2. 开源：在2013年，Facebook将React开源，使其能够被更广泛的开发者使用和贡献。这一举措使React开始在开发者社区中流行起来。

  3. React Native：2015年，Facebook发布了React Native，这是一个使用React构建原生移动应用的框架。React Native使开发者可以使用React的编程模型和技术来构建跨平台的移动应用，从而大大简化了移动应用的开发过程。

  4. Hooks引入：2018年，React 16.8版本引入了Hooks，这是一种新的特性，使开发者可以在不使用类组件的情况下共享状态和逻辑代码。Hooks提供了更简单、更具可重用性的代码编写方式，进一步提升了React的开发效率。

  5. Concurrent Mode和Suspense：2021年，React 18版本引入了Concurrent Mode和Suspense。Concurrent Mode支持并发渲染，能够使React应用更加响应和流畅。Suspense则提供了一种简单的方式来处理异步加载和代码分割，使开发者可以更好地管理应用的性能和用户体验。

总体来说，React在过去的几年里经历了快速的发展和演进。它通过提供简单且高效的开发方式，成为了构建现代Web应用和移动应用的首选技术之一。同时，React的开源社区也非常活跃，不断为React提供新的功能和优化，使其能够满足不断变化的开发需求。

三、React特点

React是一个用于构建用户界面的JavaScript库，具有以下特点：

  1. 组件化：React的核心思想是将UI拆分成独立的可复用组件，并通过组件的组合构建复杂的用户界面。每个组件可以管理自己的状态，并通过props（属性）接收父组件传递的数据。

  2. 虚拟DOM：React使用虚拟DOM（Virtual DOM）机制来优化性能。它会将组件的状态变化转化为虚拟DOM的变化，并通过Diff算法计算最小的DOM操作，然后批量更新到真实DOM中，以减少DOM操作带来的性能损耗。

  3. 单向数据流：React采用了单向数据流的模式，即数据的流动是单向的，自上而下的单向流动。父组件通过props传递数据给子组件，子组件不能直接修改props中的数据，只能通过回调函数间接传递数据给父组件。

  4. JSX语法：React使用JSX语法，将HTML标记和JavaScript代码集成在一起，可以在JavaScript代码中直接写HTML标记，提高了代码的可读性和可维护性。

  5. 高效灵活：React具有高效和灵活的特点。它只更新必要的组件或DOM部分，提高了性能。同时，React可以与其他库或框架结合使用，如React Native用于构建移动应用。

  6. 生态丰富：React拥有庞大的开发者社区和丰富的插件生态系统，提供了大量的第三方库和资源，方便开发人员快速构建复杂的应用。

总的来说，React具有组件化、虚拟DOM、单向数据流、JSX语法、高效灵活和丰富的生态等特点，使得它成为构建用户界面的强大工具。

四、第一个react程序

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Hello react</title><script src="https://unpkg.com/react@18/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script></head><body><div id="root"></div><script type="text/babel">function MyApp() {return <h1>Hello, react!</h1>;}const container = document.getElementById('root');const root = ReactDOM.createRoot(container);root.render(<MyApp />);</script></body>
</html>

以上代码的运行效果是：
在这里插入图片描述

  1. <script>标签引入了React、ReactDOM和Babel的库文件。
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

  1. <div id="root"></div>是一个用于渲染React组件的容器。

  2. <script type="text/babel">标签中的代码是使用Babel解析的JavaScript代码。

  3. function MyApp()是一个React函数组件，它返回一个包含<h1>标签的内容。

  4. const container = document.getElementById('root');获取了具有’id’为’root’的元素的引用。

  5. const root = ReactDOM.createRoot(container);创建了一个根（Root）对象。

  6. root.render(<MyApp />);使用ReactDOM.createRoot()的render()方法将<MyApp />组件渲染到指定的容器中。

所以，这段代码的作用是在Web页面上渲染一个包含"Hello, react!"文本的H1标签。

五、bable能干什么

Babel是一个用于JavaScript编译的工具，它可以将新版本的JavaScript代码转换为向后兼容的旧版本，以保证在不同浏览器和环境下的运行。

举例来说，Babel可以将ES6（ES2015）或更新的JavaScript代码转换为ES5代码，这样在不支持ES6语法的旧浏览器中也可以正常运行。以下是一些Babel的应用示例：

  1. 语法转换：Babel可以将ES6/ES7的语法转换为ES5语法，如使用箭头函数、解构赋值等。
    示例代码：

    // ES6箭头函数转换为普通函数
const sum = (a, b) => a + b;
// 转换后的ES5代码
var sum = function(a, b) {return a + b;
};

  2. 模块转换：Babel可以将使用ES6模块的代码转换为CommonJS或AMD模块，以便在旧的模块系统下使用。
    示例代码：

    // 使用ES6模块系统导出和导入模块
export const foo = 'bar';
import { foo } from './module';// 转换后的CommonJS模块代码
exports.foo = 'bar';
const { foo } = require('./module');

  3. Polyfill：Babel可以根据浏览器的特性支持程度，自动添加缺失的API和功能，以实现向后兼容。
    示例代码：

    // 在不支持Promise的浏览器中使用Promise
// 安装"@babel/preset-env"并配置目标浏览器
new Promise((resolve, reject) => {setTimeout(() => resolve('Hello, Babel!'), 1000);
})
.then(message => console.log(message));
// Babel会将上面的代码转换为使用Promise的polyfill

  4. Babel可以编译JSX。
    JSX是一种JavaScript的扩展语法，它允许开发者在JavaScript中编写类似HTML的结构，用于构建用户界面。下面是一个使用Babel编译JSX的示例：

假设有如下的JSX代码：

const element = <h1>Hello, world!</h1>;

通过Babel进行编译，可以将其转换为普通的JavaScript代码：

const element = React.createElement("h1", null, "Hello, world!");

在这个例子中，JSX代码被Babel转换为了React.createElement函数的调用。这个函数用于创建一个React元素，表示一个虚拟的DOM节点

需要注意的是，Babel只是将JSX转换为普通的JavaScript代码，并不能直接运行。如果想要在浏览器中运行JSX代码，还需要引入对应的库，如React，并在项目中配置相应的构建工具，如Webpack。这样，JSX代码在构建过程中会被Babel转换为可以在浏览器中运行的代码。

总之，Babel作为一个强大的JavaScript编译工具，可以帮助开发者轻松编写兼容性更好的JavaScript代码。

六、jsx

JSX（JavaScript XML）是一种使用类似XML的语法扩展JavaScript的方式，用于构建React组件。它允许在JavaScript代码中编写类似HTML的标记，使得组件的结构更加清晰和易于理解。

举个例子，下面是一个使用JSX语法编写的React组件：

import React from 'react';function Greeting() {return (<div><h1>Hello, world!</h1><p>Welcome to my website.</p></div>);
}export default Greeting;

在这个例子中，我们使用了<div>、<h1>和<p>等HTML标签来构建组件的结构。JSX语法允许我们直接在JavaScript代码中使用这些标签，使得编写React组件更加直观和方便。

注意，上述代码中的JSX标记要用{}包裹起来，这样可以将JavaScript表达式嵌入到JSX语法中。例如，可以在标签中使用变量、表达式或函数调用，以动态地生成组件内容：

import React from 'react';function Greeting(props) {const name = props.name;return (<div><h1>Hello, {name}!</h1><p>Welcome to my website.</p></div>);
}export default Greeting;

在这个例子中，我们通过props对象传递了一个name属性给组件。并且用{name}的方式将该属性的值动态展示在组件中。

七、虚拟dom

React中的虚拟DOM（Virtual DOM）是一种用于改进Web应用性能的技术。它是一个轻量级的JavaScript对象表示，它映射了真实的DOM结构。当状态发生变化时，React会根据新状态生成新的虚拟DOM，并将其与旧的虚拟DOM进行比较，找出差异。然后，React会通过最小化DOM操作的方式，将差异应用于真实的DOM中，从而更新页面。

虚拟DOM具有以下优点：

  1. 提高性能：虚拟DOM可以批量更新真实DOM，而不是每次都进行单个更新，从而减少了真实DOM的操作次数，提高了效率。
  2. 实现简洁的编程模型：React将真实DOM的复杂性抽象成虚拟DOM的树结构，使开发者可以用声明式的方式来描述如何更新UI，而不需要手动操作DOM。
  3. 跨平台支持：虚拟DOM可以在浏览器以外的环境（如服务器端）中运行，实现了跨平台的开发和渲染。

虽然虚拟DOM可以提高性能，但在某些情况下会引入额外的开销。因此，React中的虚拟DOM的设计考虑了权衡，以平衡性能和开发体验。

以下图例，描述了使用虚拟DOM和直接操作真实DOM的区别：
列表组件
渲染虚拟DOM
比较新旧虚拟DOM
生成差异对象
更新真实DOM
直接操作真实DOM
手动更新DOM

这个图例中，左边部分描述了使用虚拟DOM的过程：首先在A步骤中创建列表组件，然后在B步骤中渲染虚拟DOM，接着在C步骤中比较新旧虚拟DOM的差异，生成差异对象，最后在E步骤中根据差异对象更新真实DOM。
右边部分描述了直接操作真实DOM的过程：在F步骤中直接操作真实DOM，然后手动更新DOM，即G步骤。
通过对比这两个过程，可以明显看出使用虚拟DOM的优势：通过在内存中创建虚拟节点并比较新旧节点的差异，React可以只对差异部分进行DOM操作，从而减少直接操作DOM带来的性能损耗。同时，虚拟DOM将底层的DOM操作抽象化，使得开发者可以更加专注于业务逻辑的编写。

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

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

相关文章

不拼花哨，只拼实用：unittest指南，干货为王！

不拼花哨，只拼实用：unittest指南，干货为王！

Python为开发者提供了内置的单元测试框架 unittest&#xff0c;它是一种强大的工具&#xff0c;能够有效地编写和执行单元测试。unittest 提供了完整的测试结构&#xff0c;支持自动化测试的执行&#xff0c;能够对测试用例进行组织&#xff0c;并且提供了丰富的断言方法。最终…
阅读更多...
接口自动化测试工具大全

接口自动化测试工具大全

在互联网时代&#xff0c;服务端测试已经成为一个重要的产品保障手段&#xff0c;各对此公司实施的方法和技术也不同&#xff0c;本文我们就来讨论一下。 互联网服务端接口自动化是各个公司都需要一部分业务&#xff0c;如何快速高效地完成接口测试呢&#xff1f; 以帮助大家实…
阅读更多...
redhat配置本地yum源（超详细，超简单）

redhat配置本地yum源（超详细，超简单）

目录 ​编辑 1、硬件配置 2、配置本地yum源 1、硬件配置 注意这里要使用iso文件&#xff0c;并且要选择启动时连接 2、配置本地yum源 创建本地源文件夹 mkdir -p /mnt/cdrom 挂载镜像文件至指定的目录 mount /dev/cdrom /mnt/cdrom 备份本地源 cp -rf /etc/yum.repos.d…
阅读更多...
星途星纪元 ES，用艺术思维表达工程技术

星途星纪元 ES，用艺术思维表达工程技术

10月8日&#xff0c;星途星纪元ES携手世界级成都爱乐首席乐团、旅德青年钢琴家王超&#xff0c;在成都打造了一场“万物星声”超舒适音乐会视听盛宴。这是星途星纪元首次跨界音乐圈、牵手音乐挚友&#xff0c;共同演绎音乐和汽车的美学协奏曲&#xff0c;开启高端超舒适美学新纪…
阅读更多...
如何解决git 发生冲突的场景？

如何解决git 发生冲突的场景？

一、是什么 一般情况下&#xff0c;出现分支的场景有如下&#xff1a; 多个分支代码合并到一个分支时多个分支向同一个远端分支推送 具体情况就是&#xff0c;多个分支修改了同一个文件&#xff08;任何地方&#xff09;或者多个分支修改了同一个文件的名称 如果两个分支中…
阅读更多...
Python树莓派开发

Python树莓派开发

欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和技术。关…
阅读更多...
卷积神经网络CNN学习笔记-卷积计算Conv2D函数的理解

卷积神经网络CNN学习笔记-卷积计算Conv2D函数的理解

目录 1.全连接层存在的问题2.卷积运算3.填充(padding)3.1填充(padding)的意义 4.步幅(stride)5.三维数据的卷积运算6.结合方块思考7.批处理8.Conv2D函数解析9.conv2d代码9.1 stride19.2 stride2 参考文章 1.全连接层存在的问题 在全连接层中&#xff0c;相邻层的神经元全部连接…
阅读更多...
vue3+ts父子组件以及单页面刷新的方法

vue3+ts父子组件以及单页面刷新的方法

父子组件刷新页面&#xff1a; 父组件定义函数reset&#xff0c;子组件props接收 示例一&#xff1a; 父组件 //ts删减部分&#xff1a; import { deleteCompanyById, findAllCompanys } from /api/company import { usePureFetch } from /nexus/useFetch import type Compa…
阅读更多...
CUDA学习笔记（十三） Shared Memory

CUDA学习笔记（十三） Shared Memory

CUDA SHARED MEMORY shared memory在之前的博文有些介绍&#xff0c;这部分会专门讲解其内容。在global Memory部分&#xff0c;数据对齐和连续是很重要的话题&#xff0c;当使用L1的时候&#xff0c;对齐问题可以忽略&#xff0c;但是非连续的获取内存依然会降低性能。依赖于…
阅读更多...
基于Pix4D使用无人机光学影像制作正射影像（DOM）和数字表面模型（DSM） 操作步骤

基于Pix4D使用无人机光学影像制作正射影像（DOM）和数字表面模型（DSM） 操作步骤

基于Pix4D使用无人机光学影像制作正射影像&#xff08;DOM&#xff09;和数字表面模型&#xff08;DSM&#xff09; 操作步骤 0. 前言1.获取无人机光学影像2.DOM和DSM3.操作步骤3.1 初始界面3.2 新建项目3.3查看处理过程报告3.4查看处理进度和成果 4.在ArcMap中打开DSM和DOM 0.…
阅读更多...
django基于Python的房价预测系统+爬虫+大屏可视化分析

django基于Python的房价预测系统+爬虫+大屏可视化分析

欢迎大家点赞、收藏、关注、评论 文章目录 前言一、项目介绍二、开发环境三、功能需求分析1 数据采集功能设计2数据管理功能设计3爬虫功能需求分析4 数据可视化功能需求分析数据库表的设计 四、核心代码五、效果图六、文章目录 前言 房价是一个国家经济水平的重要体现&#xff…
阅读更多...
找不到mfc140u.dll无法继续执行此代码的5个修复方法分享

找不到mfc140u.dll无法继续执行此代码的5个修复方法分享

是使用计算机的过程中&#xff0c;我们经常会遇到各种各样问题&#xff0c;其中丢失“mfc140u dll”&#xff08;动态链接库&#xff09;是最常见的一种。DLL文件是一种可在多个程序之间共享的代码库&#xff0c;它可以被应用程序在运行时动态加载和卸载。而“mfc140u dll”则是…
阅读更多...
熟练使用 Redis 的五大数据结构：Java 实战教程

熟练使用 Redis 的五大数据结构：Java 实战教程

入门 入门阶段主要记住 Redis 的命令&#xff0c;熟练使用 Redis 的 5 大数据结构就可以了。 如果没有 Redis 环境&#xff0c;可以直接通过这个网址https://try.redis.io/&#xff0c;很赞&#xff0c;它会给你模拟一个在线的环境可供你尽情使用&#xff01; 熟练使用Redis的…
阅读更多...
变分贝叶斯深度学习综述

变分贝叶斯深度学习综述

**©PaperWeekly 原创 作者 |**薛博阳 **单位 |**香港中文大学 **研究方向 |**语言模型 引言 近年来&#xff0c;贝叶斯深度学习&#xff08;Bayesian Deep Learn-ing&#xff09;在诸多领域得到广泛关注应用&#xff0c;效果显著。本文将针对贝叶斯深度学习框架进行系…
阅读更多...
测试老鸟总结，Allure测试报告-自动化测试详解，惊险避坑...

测试老鸟总结，Allure测试报告-自动化测试详解，惊险避坑...

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 1、Allure安装教程…
阅读更多...
实战：打造一个开箱即用的超丝滑超漂亮hexo博客网站-v4-(通过百度网盘同步空间来同步source核心数据)

实战：打造一个开箱即用的超丝滑超漂亮hexo博客网站-v4-(通过百度网盘同步空间来同步source核心数据)

实战&#xff1a;打造一个开箱即用的超丝滑超漂亮hexo博客网站-v4-(通过百度网盘同步空间来同步source核心数据) 目录 文章目录 实战&#xff1a;打造一个开箱即用的超丝滑超漂亮hexo博客网站-v4-(通过百度网盘同步空间来同步source核心数据)目录写在前面本次更新方案背景方案官…
阅读更多...
Homeassistant docker配置

Homeassistant docker配置

Homeassistant docker配置 【说明】本系列为自用教程&#xff0c;记录以便下次使用 【背景】一台J1900 4G64G的小主机&#xff0c;安装了OP系统&#xff0c;里面自带了Docker。为实现Homeassistant&#xff08;简称HA&#xff09;控制智能家居设备&#xff0c;进行如下配置。 【…
阅读更多...
汽车屏类产品（三）：抬头显示Head-Up Display(HUD)

汽车屏类产品（三）：抬头显示Head-Up Display(HUD)

前言 你的下一台车，一定要考虑加装一个HUD。 汽车抬头显示器或汽车抬头显示器（也称为汽车HUD）是任何透明的显示器，它可以在汽车中显示数据，而不需要用户将视线从平时的视角移开。这个名字的由来源于飞行员能够在头部“向上”并向前看的情况下查看信息，而不是向下倾斜查…
阅读更多...
[swift刷题模板] 树状数组(BIT/FenwickTree)

[swift刷题模板] 树状数组(BIT/FenwickTree)

[TOC]([swift刷题模板] 树状数组(BIT/FenwickTree) ) 一、 算法&数据结构 1. 描述 [python刷题模板] 树状数组 二、 模板代码 1. 单点赋值(增加)&#xff0c;区间求和(PURQ) 例题: 307. 区域和检索 - 数组可修改 class BIT {var c: [Int]var n: Int init(_ n: Int){c…
阅读更多...
OpenCV+QT实现的数字图像处理算法合集

OpenCV+QT实现的数字图像处理算法合集

源码下载地址&#xff1a; 基于OpenCV和QT的图像处理源码 图像预处理 灰度处理 灰度直方图 灰度均衡 梯度锐化 Laplace锐化 边缘检测 Roberts Sobel Laplace Prewitt canny Krisch 噪声 椒盐噪声 高斯噪声 滤波 均值滤波 中值滤波 双边滤波 形态学滤波 高斯滤波 图像变…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023