第一章-React入门

🕗 发布于 12-03 13:13 react.js 前端

一、React简介

1. React是什么？

是一个将数据渲染为HTML视图的开源Javascript库。

官网地址：

英文官网：https://reactjs.org/
中文官网：https://react.docschina.org/

2. React是谁开发的？

由Facebook开发，且开源。

3. 为什么要学React？

原生JS的痛点：

原生JavaScript操作DOM繁琐、效率低(DOM-API操作 UI)；
使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排；
原生JavaScript没有组件化编码方案，代码复用率低。

4. React的特点

采用组件化模式、声明式编码，提高开发效率及组件复用率；
在React Native中可以使用React语法进行移动端开发；
使用虚拟DOM+优秀的Diffing 算法，尽量减少与真实DOM的交互。

React会进行虚拟DOM的比较，不再生成原有的DOM，只生成变化的DOM。

5. 学习React之前你要掌握的JavaScript基础知识

判断this的指向；
class(类)
ES6语法规范
npm包管理器
原型、原型链
数组常用方法
模块化

二、Hello React 案例

1. 效果

在这里插入图片描述

2. 相关js库

react.js：React核心库；
react-dom.js：提供操作 DOM 的react 扩展库；
babel.min.js:：解析JSX语法代码转为JS 代码的库；

3. 创建虚拟DOM示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello react</title>
</head>
<body>
<!-- 0.准备好一个容器 -->
<div id="test"></div>
<!-- 1.注意引入顺序 -->
<!-- 1.1 引入react核心库 -->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!-- 1.2 引入react-dom，用于支持react操作DOM -->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- 1.3 引入babel，用于将jsx转为js -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- 2. 此处必须注明类型为babel -->
<script type="text/babel">
    // 3. 创建虚拟DOM
    const VDOM = <h1>Hello React</h1> /*此处一定不要写引号，因为不是字符串 */
    // 4.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'));
</script>
</body>
</html>

三、虚拟DOM的两种创建方式

效果：
在这里插入图片描述

1. 纯 JS 方式（一般不用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯js方式实现虚拟DOM</title>
</head>
<body>
<div id="test"></div>
<!-- 引入react核心库 -->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/javascript">
    // React.createElement(标签名, 标签属性, 标签内容)
    const VDOM = React.createElement('h1', {id: 'title'}, React.createElement('span', {}, 'Hello,React'))
    ReactDOM.render(VDOM, document.getElementById('test'));
</script>
</body>
</html>

2. JSX 方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jsx方式实现虚拟DOM</title>
</head>
<body>
<div id="test"></div>
<!-- 引入react核心库 -->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- 此处必须注明类型为babel -->
<script type="text/babel">
    /*此处一定不要写引号，因为不是字符串 */
    const VDOM = (
        <h1 id="title">
            <span>Hello,React</span>
        </h1>
    )
    ReactDOM.render(VDOM, document.getElementById('test'));
</script>
</body>
</html>

四. 虚拟DOM与真实DOM

<script type="text/babel">
    const VDOM = (
        <h1 id="title">
            <span>Hello,React</span>
        </h1>
    )
    ReactDOM.render(VDOM, document.getElementById('test'));
    // 打印对比虚拟DOM和真实DOM
    const TDOM = document.getElementById("title");
    console.log('VDOM', VDOM);
    console.log('TDOM', TDOM);
    debugger
</script>

我们从控制台可以看到：

VDOM：是一个对象，上面挂载的属性较少；

在这里插入图片描述

TDOM：上面挂载的属性更加繁琐；

关于虚拟DOM：

本质是 object 类型的对象(一般对象)；
虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性；
虚拟DOM最终会被 React 转化为真实 DOM，呈现在页面上。

五. JSX 语法规则

1. 效果

在这里插入图片描述

2. JSX

全称：JavaScript XML；

什么是 XML 呢？
XML 是早期用于存储和传输数据的一种可扩展标记语言，结构如下所示：

<student>
<name>Tom</name>
<age>19</age>
</student>

但是我们现在更多的是使用JSON来代替上面的XML：

"{'name': "Tom", 'age' : 19}"

react 定义的一种类似于 XML 的JS扩展语法：JS + XML；
本质是 React.createElement(component, props, ...children) 方法的语法糖；
作用是用来简化创建虚拟DOM：
a. 写法：const ele = <h1>Hello jSX!</h1>；
b. 注意1：它不是字符串，也不是 HTML/XML标签；
c. 注意2：它最终产生的就是一个JS对象；
标签名任意：HTML标签或其它标签；

3. JSX语法规则

<script type="text/babel">
    const myId='aTgUiGu'
    const myData = 'hello,rEact'
    const num = 50
    // 1. 创建虚拟DOM
    const VDOM = (
        <>
            <h1 id={myId.toLowerCase()} className="orange">
                <span style={{color: 'white', fontSize: num + 'px'}}>{myData.toLowerCase()}</span>
            </h1>
            <h1 id={myId.toUpperCase()} className="orange">
                <span style={{color: 'white', fontSize: num + 'px'}}>{myData.toUpperCase()}</span>
            </h1>
            <input type="text" />
            // <good /> 或者 <Good /> 会导致报错
        </>
    )
    // 2.渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'));
</script>

定义虚拟DOM时，不要写引号；
标签中混入JS表达式时要用 {} ；
样式的类名指定不要用class，要用className；
内联样式，要用style={{key:value}}的形式去写（第一层{}代表解析为JS表达式，第二层{}代表对象）；
只有一个根标签；
标签必须闭合；
标签首字母：
(1) 若以小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错；
(2) 若以大写字母开头，就去渲染对应的组件，若组件没有定义，则报错。

六. JSX 小练习

1. 需求

动态展示如下列表：
在这里插入图片描述
我们可以用下面代码实现效果：

const VDOM = (
<>
<h1>前端js框架列表</h1>
<ul>
<li>Angular</li>
 <li>React</li>
<li>Vue</li>
</ul>
</>
)
ReactDOM.render(VDOM, document.getElementById("test"))

现在我们是将数据写死，而真实的项目开发是读取从后台传过来的数据，然后去遍历，所以我们先模拟一些数据，再考虑如何实现动态渲染。

2. 渲染数组和对象的区别

如果我们把数据直接以表达式的形式渲染到页面上，是什么效果呢？

代码：

// 模拟一些数据
const list = ['Angular', 'React', 'Vue']
const VDOM = (
    <>
        <h1>前端js框架列表</h1>
        <ul>
            {list}
        </ul>
    </>
)
ReactDOM.render(VDOM, document.getElementById("test"))

效果：

在这里插入图片描述
我们发现直接渲染数组list，虽然 react 还是帮我们遍历了，但是却丢失了<ul><li>的结构。我们把<li>标签拼接到模拟数据中再试一下。

代码：

// 模拟一些数据
// const list = ['Angular', 'React', 'Vue']
const list = [<li>Angular</li>, <li>React</li>, <li>Vue</li>]
const VDOM = (
    <>
        <h1>前端js框架列表</h1>
        <ul>
            {list}
        </ul>
    </>
)
ReactDOM.render(VDOM, document.getElementById("test"))

效果：

这次实现了我们想要的效果，但是在平时的开发中，后台并不会返回带有标签的数据，一般返回的都是纯数据，所以我们要想办法自己进行拼接。

从上面例子中我们还可以发现一个规律，如果现在给 react 传入一个数组，react 会自动帮你遍历当前数组，且数组里有什么就往页面放什么。那如果传入一个对象呢？

我们把list从数组调整为对象再试一下。

代码：

// 模拟一些数据
const obj = {name1: 'Angular', name2: 'React', name3: 'Vue'}
const VDOM = (
    <>
        <h1>前端js框架列表</h1>
        <ul>
            {obj}
        </ul>
    </>
)
ReactDOM.render(VDOM, document.getElementById("test"))

效果：

通过上面的例子中，我们明确了两件事情：

你给 react 一个数组，react 可以帮你遍历；
你给 react 一个对象，react 根本展示不了东西，而且还会报错；

3. 【js表达式】与【js语句】

接下来，我们继续研究如何将数组动态展示成列表，说到循环遍历，我们第一个想到的就是for循环。

代码：

// 模拟一些数据
const list = ['Angular', 'React', 'Vue']
const VDOM = (
    <>
        <h1>前端js框架列表</h1>
        <ul>
            {
                for (let i; i < list.length; i++){
                    return <li>{list[i]}</li>
                }
            }
        </ul>
    </>
)
ReactDOM.render(VDOM, document.getElementById("test"))

但是我们发现代码从for循环的位置开始报错了，那我们把for循环去掉，写一个console.log(1)呢？

const VDOM = (
    <>
        <h1>前端js框架列表</h1>
        <ul>
            {
                console.log(1)
            }
        </ul>
    </>
)
ReactDOM.render(VDOM, document.getElementById("test"))

神奇的是，代码非但不报错了，还可以成功运行。
在这里插入图片描述

这个是因为 react 的机制，我们可以在{}里面写 js表达式，但是却不可以写 js语句。

【js表达式】 与 【js语句(代码)】 的区别：

js表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方。

下面这些都是表达式：

.a
a+b
demo(1)
arr.map()
function test(){}

最简单的判断方法就是，在左侧定义一个变量去接右面的值，例如：const x = function test(){}，只要能接到值的都是js表达式，接不到的就是js语句。

js语句(代码)：

下面这些都是语句(代码)：

if(){}
for(){}
switch(){case:xxxx}

我们会发现上面的示例都是控制代码走向的，没有值，所以不属于js表达式。

4. map实现数组遍历

基于如上我们的了解，最后选择使用map来进行数组的遍历和加工。

代码：

// 模拟一些数据
const list = ['Angular', 'React', 'Vue']

const VDOM = (
    <>
        <h1>前端js框架列表</h1>
        <ul>
            {
                list.map((item, i) => {
                    return <li key={i}>{item}</li>
                })
            }
        </ul>
    </>
)
ReactDOM.render(VDOM, document.getElementById("test"))

注意：key是数组遍历的唯一标识，是必须要写的，不写会报错。

效果：

在这里插入图片描述

到这里我们动态加载列表数据的需求就完成啦！

七. 模块与组件、模块化与组件化的理解

1. 模块

理解：向外提供特定功能的 js 程序，一般就是一个 js 文件。
为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。
作用：复用 js，简化 js 的编写，提高 js 运行效率。

2. 组件

理解：用来实现局部功能效果的代码和资源的集合(htmI/css/js/image 等等)。
为什么拆成组件：一个界面的功能更复杂。
作用：复用编码，简化项目编码，提高运行效率。

3. 模块化

当应用的 js 都是以模块来编写的，这个应用就是一个模块化的应用。

4. 组件化

当应用是以多组件的方式来实现的，这个应用就是一个组件化的应用。

原文地址：https://blog.csdn.net/qq_38374286/article/details/155239711

免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：MATLAB基于响应面方法与NSGA-II的液体静压转台工况参数匹配
下一篇：JavaEE初阶10.0

Nlp教程资源合集
阅读更多2025-12-15
MinIO停更背后：后MinIO时代，为什么RustFS是开源存储的最优解？
MinIO开源版进入维护模式，标志着开源存储生态向专精化转型。企业面临性能瓶颈、商业化风险和生态锁定三大痛点。RustFS凭借性能优势（Rust语言底层优化）、开源可持续性（Apache2.0许可证）
阅读更多2025-12-15
junit自定义ArgumentsSource以自定义ParameterizedTest参数加载方式
junit提供了注解以便于用户自定义t参数加载方式。
阅读更多2025-12-15
RHCSE--SHELL--LNMP+LAMP脚本实验
1、下载所需软件：lrzsz、zip、httpd、mariadb-server、php、php-fpm、php-mysqlnd;2、转换到httpd目录：cd /var/www/html/3、将Dis
阅读更多2025-12-15
Spring Cloud Alibaba 微服务整合自定义日志注解完整教程
Spring Cloud全栈实战：手撸企业级项目，从入门到架构师！二、项目初始化Spring Cloud全栈实战：手撸企业级项目，从入门到架构师！三、日志注解模块 (logging-annotatio
阅读更多2025-12-15
【毕业设计】SpringBoot+Vue+MySQL 大学生平时成绩量化管理系统平台源码+数据库+论文+部署文档
【毕业设计】SpringBoot+Vue+MySQL 大学生平时成绩量化管理系统平台源码+数据库+论文+部署文档，拿走直接用（附源码，数据库，视频，可提供说明文档（通过*AIGC*）*技术包括：MyS
阅读更多2025-12-15
计算机网络试题分类及解析完整版
答案：UDP解析：知识点出自第 1 章概述 ——1.7 计算机网络体系结构 ——1.7.3 具有五层协议的体系结构，属于识记类考点，难度易。
阅读更多2025-12-15
Kafka 和springboot 整合Logback日志
Spring Boot 整合 Kafka 进行日志处理是一个常见的任务，可以帮助你更好地管理和分析应用程序的日志。以下是一个基本的步骤指南，帮助你完成这个整合。本文介绍了如何在SpringBoot应用
阅读更多2025-12-15
SIMULINK/MATLAB仿真内嵌式永磁同步电机弱磁控制：从MTPA到前馈弱磁
SIMULINK/MATLAB仿真内嵌式永磁同步电机弱磁控制；前馈弱磁最大转矩电流比控制mtpa MTPA有详细文档讲解在电机控制领域，内嵌式永磁同步电机（IPMSM）凭借其高效、高功率密度等优点得
阅读更多2025-12-15
LLM API Gateway：使用Comate Spec Mode创建大模型调用中转服务器
摘要：本文档描述了一个本地大模型API网关(LLMAPIGateway)的开发方案，该网关基于Node.js+Express实现，旨在统一管理多个大模型供应商的API调用。系统包含配置管理、请求转发、
阅读更多2025-12-15

第一章-React入门

第一章-React入门

一、React简介

1. React是什么？

2. React是谁开发的？

3. 为什么要学React？

4. React的特点

5. 学习React之前你要掌握的JavaScript基础知识

二、Hello React 案例

1. 效果

2. 相关js库

3. 创建虚拟DOM示例

三、虚拟DOM的两种创建方式

1. 纯 JS 方式（一般不用）

2. JSX 方式

四. 虚拟DOM与真实DOM

五. JSX 语法规则

1. 效果

2. JSX

3. JSX语法规则

六. JSX 小练习

1. 需求

2. 渲染数组和对象的区别

3. 【js表达式】 与 【js语句】

4. map实现数组遍历

七. 模块与组件、模块化与组件化的理解

1. 模块

2. 组件

3. 模块化

4. 组件化

相关文章

3. 【js表达式】与【js语句】