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.hqwc.cn/news/145419.html

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

相关文章

2024王道考研计算机组成原理——指令系统

2024王道考研计算机组成原理——指令系统

零、本章概要 指令寻址&#xff1a;解决的是PC"1"的问题 数据寻址&#xff1a;使用寄存器/内存/结合 基址寻址&#xff1a;用于多道程序的并发执行 直接寻址&#xff1a;call 0x12345678 变址寻址&#xff1a;esi edi用于循环&#xff0c;因为使用直接寻址需要一堆…
阅读更多...
数据结构详细笔记——树

数据结构详细笔记——树

文章目录 树的定义和基本术语结点、树的属性描述有序树与无序树树与森林 树的常考性质树的存储结构双亲表示法&#xff08;顺序存储&#xff09;孩子表示法&#xff08;顺序链式存储&#xff09;孩子兄弟表示法&#xff08;链式存储&#xff09; 树和森林的遍历树的遍历森林的遍…
阅读更多...
【vSphere 8 自签名证书】企业 CA 签名证书替换 vSphere Machine SSL 证书Ⅱ—— 创建和添加证书模板

【vSphere 8 自签名证书】企业 CA 签名证书替换 vSphere Machine SSL 证书Ⅱ—— 创建和添加证书模板

目录 博文摘要3. 使用 Microsoft 证书颁发机构创建 Machine SSL 和 Solution User 证书模板3.1 打开 Certificate Template Console3.2 复制模板3.3 修改 Compatibility 选项卡3.4 修改 General 选项卡3.5 修改 Extensions 选项卡3.6 修改 Subject Name 选项卡3.7 确认新模板 4…
阅读更多...
如何开发一个 Safari 插件

如何开发一个 Safari 插件

本文字数&#xff1a;2493字 预计阅读时间&#xff1a;15分钟 由于常用浏览器是Safari&#xff0c;而Safari浏览器的插件比不上Chrome&#xff0c;所以就有了自己开发常用的Safari插件的想法。 打算开发当前页面生成二维码的Extension&#xff0c;因为网络原因&#xff0c;AirD…
阅读更多...
【milkv】internal codec -- mic

【milkv】internal codec -- mic

文章目录 一、硬件二、dts三、配置引脚board_initpin 四、makefile五、config六、添加tinyalsa七、测试结果7.1 查看录制device信息7.2 录制音频7.3 pc端获取录制好的设备7.4 使用audacity查看波形 一、硬件 i2s0 —— adc i2s1 —— pdm i2s3 —— dace spk_en存疑 i2s2 ——…
阅读更多...
分类预测 | MATLAB实现基于BiLSTM-AdaBoost双向长短期记忆网络结合AdaBoost多输入分类预测

分类预测 | MATLAB实现基于BiLSTM-AdaBoost双向长短期记忆网络结合AdaBoost多输入分类预测

分类预测 | MATLAB实现基于BiLSTM-AdaBoost双向长短期记忆网络结合AdaBoost多输入分类预测 目录 分类预测 | MATLAB实现基于BiLSTM-AdaBoost双向长短期记忆网络结合AdaBoost多输入分类预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.MATLAB实现基于BiLSTM-…
阅读更多...
rust学习——引用与借用（references-and-borrowing）

rust学习——引用与借用（references-and-borrowing）

引用与借用&#xff08;references-and-borrowing&#xff09; 先看一个返回参数的所有权的代码 fn main() {let s1 String::from("hello");let (s2, len) calculate_length(s1);println!("The length of {} is {}.", s2, len); }fn calculate_length(…
阅读更多...
云服务的划分IaaS，PaaS，SaaS 的区别

云服务的划分IaaS，PaaS，SaaS 的区别

云服务只是一个统称&#xff0c;可以分成三大类。 三部分的命名&#xff1a; IaaS&#xff1a;基础设施服务&#xff0c;Infrastructure-as-a-servicePaaS&#xff1a;平台服务&#xff0c;Platform-as-a-serviceSaaS&#xff1a;软件服务&#xff0c;Software-as-a-service
阅读更多...
yakit使用爆破编码明文_dnslog使用

yakit使用爆破编码明文_dnslog使用

yakit使用爆破编码密码 文章目录 yakit使用爆破编码密码yakit使用1 yakit编码密码进行爆破2 准备eval.php文件放入web3 访问http://192.168.225.206/eval.php,使用bp抓包,测试后环境准本好4 使用yakit4.1 进入页面&#xff0c;点击这里进行配置默认端口80834.2 发送到模糊测试4…
阅读更多...
外汇天眼：重磅！WikiEXPO与澳大利亚计算机与法律协会达成战略合作

外汇天眼：重磅！WikiEXPO与澳大利亚计算机与法律协会达成战略合作

2023年10月19日&#xff0c;作为WikiGlobal旗下的知名品牌WiKiFX与澳大利亚计算机与法律协会&#xff08;AUSCL&#xff09;正式达成战略合作。对于整个金融行业来说&#xff0c;此次合作是双方共同推动技术和社会进步的一步&#xff0c;也是促进金融行业安全和创新方面迈出的重…
阅读更多...
barzilar_borwein算法微调函数的优化收敛

barzilar_borwein算法微调函数的优化收敛

import optimtool as oo from optimtool.base import np, sp, pltpip install optimtool>2.4.2加载barzilar_borwein算法 import optimtool.unconstrain as ou barzilar_borwein ou.gradient_descent.barzilar_borwein初始化输入数据 f ( x ) ∑ i 1 n / 2 c ( x 2 i −…
阅读更多...
Java数据结构之稀疏数组

Java数据结构之稀疏数组

目录 线性结构与非线性结构线性结构非线性结构 稀疏数组应用场景 代码实现二维数组转稀疏数组稀疏数组转二维数组 线性结构与非线性结构 线性结构 数据结构分两种&#xff0c;线性与非线性&#xff0c;线性结构的数据元素之间存在一对一的关系。 一对一指的是每个数据元素都…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023