01 【react入门】

# 1.React 简介

react 是什么？

React 是一个用于构建用户界面的 JavaScript 库。

是一个将数据渲染为 HTML 视图的开源 JS 库
它遵循基于组件的方法，有助于构建可重用的 UI 组件
它用于开发复杂的交互式的 web 和移动 UI

React 有什么特点？

使用虚拟 DOM 而不是真正的 DOM
它可以用服务器渲染
它遵循单向数据流或数据绑定
高效
声明式编码，组件化编码

React 的一些主要优点？

它提高了应用的性能
可以方便在客户端和服务器端使用
由于使用 JSX，代码的可读性更好
使用 React，编写 UI 测试用例变得非常容易

为什么学？

1.原生 JS 操作 DOM 繁琐，效率低

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

3.原生 JS 没有组件化编码方案，代码复用低

在学习之前最好看一下关于 npm 的知识：下面是我在网上看见的一个写的还不错的 npm 的文章

npm (opens new window)

# 2.React 基础案例

首先需要引入几个 react 包

React 核心库、操作 DOM 的 react 扩展库、将 jsx 转为 js 的 babel 库

【先引入 react.development.js，后引入 react-dom.development.js】

react.development.js

react 是 react 核心库，只要使用 react 就必须要引入

下载地址：https://unpkg.com/react@18.0.0/umd/react.development.js

react-dom.development.js

react-dom 是 react 的 dom 包，使用 react 开发 web 应用时必须引入

下载地址：https://unpkg.com/react-dom@18.0.0/umd/react-dom.development.js

babel.min.js

由于 JSX 最终需要转换为 JS 代码执行，所以浏览器并不能正常识别 JSX，所以当我们在浏览器中直接使用 JSX 时，还必须引入 babel 来完成对代码的编译。

babel 下载地址：https://unpkg.com/babel-standalone@6/babel.min.js

react.development.js
react-dom.development.js
babel.min.js

1
2
3

2.创建一个容器

3.创建虚拟 DOM，渲染到容器中

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <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>
    <!-- 引入babel，用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
      /* 此处一定要写babel */
      //1.创建虚拟DOM
      const VDOM = <h1>Hello</h1> /* 此处一定不要写引号，因为不是字符串 */
      //2.渲染虚拟DOM到页面
	const root = ReactDOM.createRoot(document.querySelector('#test'));
      root.render(VDOM);
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

后面很多地方没有用createRoot这种方式是因为一开始学的课程是 2020 年的，这是现在新的创建方式。

这里我就只把第一个案例改成新方式了

这样，就会在页面中的这个 div 容器上添加这个 h1.

React.createElement()
React.createElement(type, [props], [...children])

用来创建 React 元素

React 元素无法修改

ReactDOM.createRoot()
createRoot(container[, options])

用来创建 React 的根容器，容器用来放置 React 元素

ReactDOM.render()
root.render(element)

用来将 React 元素渲染到根元素中

根元素中所有的内容都会被删除，被 React 元素所替换

当重复调用 render()时，React 会将两次的渲染结果进行比较，

它会确保只修改那些发生变化的元素，对 DOM 做最少的修改

# 3.jsx 语法

JSX 是 JavaScript 的语法扩展，JSX 使得我们可以以类似于 HTML 的形式去使用 JS。JSX 便是 React 中声明式编程的体现方式。声明式编程，简单理解就是以结果为导向的编程。使用 JSX 将我们所期望的网页结构编写出来，然后 React 再根据 JSX 自动生成 JS 代码。所以我们所编写的 JSX 代码，最终都会转换为以调用React.createElement()创建元素的代码。

定义虚拟 DOM，JSX 不是字符串，不要加引号
标签中混入 JS 表达式的时候使用{}

id = {myId.toUpperCase()}

样式的类名指定不能使用 class，使用className
内敛样式要使用{{}}包裹

style={{color:'skyblue',fontSize:'24px'}}

不能有多个根标签，只能有一个根标签
JSX 的标签必须正确结束（自结束标签必须写/）
JSX 中 html 标签应该小写，React 组件应该大写开头。如果小写字母开头，就将标签转化为 html 同名元素，如果 html 中无该标签对应的元素，就报错；如果是大写字母开头，react 就去渲染对应的组件，如果没有就报错
如果表达式是空值、布尔值、undefined，将不会显示

关于 JS 表达式和 JS 语句：

JS 表达式：返回一个值，可以放在任何一个需要值的地方 a a+b demo(a) arr.map() function text(){}

JS 语句：if(){} for(){} while(){} swith(){} 不会返回一个值

其它

注释

写在花括号里

ReactDOM.render(
  <div>
    <h1>小丞</h1>
    {/*注释...*/}
  </div>,
  document.getElementById("example")
);

1
2
3
4
5
6
7

class需要使用className代替
style中必须使用对象设置

` style={{background:'red'}}`;

<style>
	.title{
		background-color: orange;
		width: 200px;
	}
</style>

<!-- 准备好一个“容器” -->
<div id="test"></div>

<script type="text/babel" >
	const myId = 'aTgUiGu'
	const myData = 'HeLlo,rEaCt'

	//1.创建虚拟DOM
	const VDOM = (
		<div>
			<h2 className="title" id={myId.toLowerCase()}>
				<span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span>
			</h2>
			<h2 className="title" id={myId.toLowerCase()}>
				<span style={{color:'white',fontSize:'29px'}}>{myData.toUpperCase()}</span>
			</h2>
			<input type="text"/>
		</div>
	)
	//2.渲染虚拟DOM到页面
	ReactDOM.render(VDOM,document.getElementById('test'))
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

数组

JSX 允许在模板中插入数组，数组自动展开全部成员

{} 只能用来放 js 表达式，而不能放语句（if for）在语句中是可以去操作 JSX

var arr = [<h1>小丞</h1>, <h2>同学</h2>];
ReactDOM.render(<div>{arr}</div>, document.getElementById("example"));

1
2

tip: JSX 小练习

根据动态数据生成 li

const data = ["A", "B", "C"];
const VDOM = (
  <div>
    <ul>
      {data.map((item, index) => {
        return <li key={index}>{item}</li>;
      })}
    </ul>
  </div>
);
ReactDOM.render(VDOM, document.querySelector(".test"));

1
2
3
4
5
6
7
8
9
10
11

# 4.两种创建虚拟 DOM 的方式

使用 JSX 创建虚拟 DOM

//1.创建虚拟DOM
const VDOM = (
  /* 此处一定不要写引号，因为不是字符串 */
  <h1 id="title">
    <span>Hello,React</span>
  </h1>
);
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.querySelector(".test"));

1
2
3
4
5
6
7
8
9

这个在上面的案例中已经演示过了，下面看看另外一种创建虚拟 DOM 的方式

2.使用 JS 创建虚拟 DOM

/*
 * React.createElement()
 *   - 用来创建一个React元素
 *   - 参数：
 *        1.元素的名称（html标签必须小写）
 *        2.标签中的属性
 *           - class属性需要使用className来设置
 *           - 在设置事件时，属性名需要修改为驼峰命名法
 *       3.元素的内容（子元素）
 *   - 注意点：
 *       React元素最终会通过虚拟DOM转换为真实的DOM元素
 *       React元素一旦创建就无法修改，只能通过新创建的元素进行替换
 * */

1
2
3
4
5
6
7
8
9
10
11
12
13

//1.创建虚拟DOM,创建嵌套格式的dom
const VDOM = React.createElement(
  "h1",
  { id: "title" },
  React.createElement("span", {}, "hello,React")
);
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.querySelector(".test"));

1
2
3
4
5
6
7
8

使用 JS 和 JSX 都可以创建虚拟 DOM，但是可以看出 JS 创建虚拟 DOM 比较繁琐，尤其是标签如果很多的情况下，所以还是比较推荐使用 JSX 来创建。

# 5.两种 DOM 的区别

    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <script type="text/babel">
      /* 此处一定要写babel */
      //1.创建虚拟DOM
      const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 */
      //2.渲染虚拟DOM到页面
      ReactDOM.render(VDOM, document.getElementById('test'))
      const TDOM = document.querySelector('#test')
      console.log('虚拟DOM', VDOM)
      console.dir('真实DOM')
      console.dir(TDOM)
      //   debugger
      console.log(typeof VDOM)
      console.log(VDOM instanceof Object)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

关于虚拟 DOM：

1. 本质是 Object 类型的对象（一般对象）

2. 虚拟 DOM 比较“轻”，真实 DOM 比较“重”，因为虚拟 DOM 是 React 内部在用，无需真实 DOM 上那么多的属性。

3. 虚拟 DOM 最终会被 React 转化为真实 DOM，呈现在页面上。

上次更新: 2024-09-30 05:35:28

← 18 【Vue3组件通信方总结式】 02 【面向组件编程】→