React入门

# React入门

# 简介

React：用于构建用户界面的 JavaScript 库，换句话说，是一个将数据渲染为HTML视图的开源JavaScript库。

React特点：

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

高效的原因：使用虚拟DOM，不总是直接操作真实DOM，操作真实DOM之前，会把两个虚拟DOM进行比较，比较出差异的部分再操作真实DOM。

React-JS:

babel.js：ES6转ES5，JSX转JS
prop-types.js：
react-dom.development.js：扩展库，提供操作 DOM 的功能
react.development.js：核心库

# 简单案例

使用Vs Code，快捷创建html的模板：!

引入 js 要有顺序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 准备好“容器” -->
    <div id="test"></div>

    <!-- 引入React核心库 -->
    <script type="text/javascript" src="../React-js/react.development.js"></script>
    <!-- 引入react-dom库 -->
    <script type="text/javascript" src="../React-js/react-dom.development.js"></script>
    <!-- 引入babel库 -->
    <script type="text/javascript" src="../React-js/babel.min.js"></script>

    <!-- 注意：下面写的是JSX 不是JS -->
    <script type="text/babel">
        // 1.创建虚拟DOM
        const VDOM = <h1>Hello React!</h1>
        // 2.渲染虚拟DOM到页面
        ReactDOM.render(VDOM,document.getElementById('test'))
    </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

# DOM

# 两种创建虚拟DOM的方式

const VDOM = React.createElement(标签名, 标签属性, 标签内容)

<!-- JSX -->
<script type="text/babel">
	// 1.创建虚拟DOM
	const VDOM = <h1 id="title">Hello React!</h1>
	// 2.渲染虚拟DOM到页面
	ReactDOM.render(VDOM,document.getElementById('test'))
</script>

<!-- JS -->
<script type="text/javascript">
	// 1.创建虚拟DOM
	const VDOM = React.createElement('h1', {id:'title'}, 'Hello React')
	// 2.渲染虚拟DOM到页面
	ReactDOM.render(VDOM,document.getElementById('test'))
</script>

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

为什么不用JS而用JSX？

如果虚拟DOM创建的内容有多层嵌套的标签，那么JS方法很复杂，而JSX却很简单，比如：

<script type="text/babel">
	// 1.创建虚拟DOM
	const VDOM = (
		<h1 id="title">
			<span>Hello React!</span>
		</h1>
	)
	// 2.渲染虚拟DOM到页面
	ReactDOM.render(VDOM,document.getElementById('test'))
</script>

<script type="text/javascript">
	// 1.创建虚拟DOM
	const VDOM = React.createElement('h1', {id:'title'}, React.createElement('span', {}, 'Hello React'))
	// 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

text/babel就是将我们写的VDOM从简单方法转换成了写起来复杂的方式。浏览器运行的就是这种复杂的方法。JSX就是语法糖，避免繁琐。

# 虚拟DOM与真实DOM

// 1.创建虚拟DOM
const VDOM = React.createElement('h1', {id:'title'}, React.createElement('span', {}, 'Hello React'))
// 2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))

console.log(VDOM)
console.log(typeof VDOM)
console.log(VDOM instanceof Object)

1
2
3
4
5
6
7
8

运行结果：

<script type="text/babel">
	// 1.创建虚拟DOM
	const VDOM = (
		<h1 id="title">
			<span>Hello React!</span>
		</h1>
	)
	const TDOM = document.getElementById('demo')

	console.log('虚拟DOM', VDOM)
	console.log('真实DOM',TDOM)
	debugger;
	// console.log(typeof VDOM)
	// console.log(VDOM instanceof Object)
</script>

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

通过打断点可以观察到，真实DOM的属性特别多，而虚拟DOM属性较少。

关于虚拟DOM：

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

# JSX语法规则

定义虚拟DOM时，不要写引号；
标签中混入JS表达式时要用{}；
样式的类名指定不要用class，要用className；
内联样式使用:
```
style={{xxx}}
```
1
虚拟DOM必须只有一个根标签；
标签必须闭合；
标签首字母：
1. 小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素则报错。
2. 大写字母开头，React就去渲染对应的组件，若组件没有定义则报错。

代码案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .title{
            background-color: orange;
            width: 200px;
        }
    </style>
  </head>
  <body>
    <!-- 准备好“容器” -->
    <div id="test"></div>

    <!-- 引入React核心库 -->
    <script type="text/javascript" src="../React-js/react.development.js"></script>
    <!-- 引入react-dom库 -->
    <script type="text/javascript" src="../React-js/react-dom.development.js"></script>
    <!-- 引入babel库 -->
    <script type="text/javascript" src="../React-js/babel.min.js"></script>

    <!-- 注意：下面写的是JSX 不是JS -->
    <script type="text/babel">
      const myId = "1234";
      const myData = "21234ZQC"; 
      
      // 1.创建虚拟DOM
      const VDOM = (
        <div>
            <h2 className="title" id={myId}>
                <span style={{color:'white', fontSize:'20px'}}>{myData.toLowerCase()}</span>
            </h2>
            <h2>哈哈哈哈</h2>
            <input type="text" />
        </div>
      );
      // 2.渲染虚拟DOM到页面
      ReactDOM.render(VDOM, document.getElementById("test"));
    </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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

js语句（代码）与js表达式

表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方。下面这些都是表达式

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

1
2
3
4
5

语句（代码）：

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

1
2
3

案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 准备好“容器” -->
    <div id="test"></div>

    <!-- 引入React核心库 -->
    <script type="text/javascript" src="../React-js/react.development.js"></script>
    <!-- 引入react-dom库 -->
    <script type="text/javascript" src="../React-js/react-dom.development.js"></script>
    <!-- 引入babel库 -->
    <script type="text/javascript" src="../React-js/babel.min.js"></script>

    <!-- 注意：下面写的是JSX 不是JS -->
    <script type="text/babel">
      // 1.创建虚拟DOM
      const data = ['Angular', "React", "Vue"]
      const VDOM = (
        <div>
          <h1>前端框架列表</h1>
          <ul>
            {
              // 每个li要不同，需要有一个唯一表示i，虚拟dom要使用它进行区分，提高
              data.map((item, index)=>{
                return <li key={index}>{item}</li>
              })
            }
          </ul>
        </div>
      );
      // 2.渲染虚拟DOM到页面
      ReactDOM.render(VDOM, document.getElementById("test"));
    </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
28
29
30
31
32
33
34
35
36
37
38
39
40

# 模块与组件

# 模块

理解：向外提供特定功能的 js程序，一般就是一个js 文件；
原因：随着业务逻辑增加，代码越来越多且复杂；
作用：复用jis,简化js 的编写，提高js运行效率。
模块化：当应用的 js 都以模块来编写的，这个应用就是一个模块化的应用

# 组件

理解：用来实现局部功能效果的代码和资源的集合(html/css/js/image 等等)；
原因：一个界面的功能更复架；
作用：复用编码，简化项目编码，提高运行效率。
组件化：当应用是以多组件的方式实现,这个应用就是一个组件化的应用

HeaderBar、MenuBar、卡片都是一个组件，都是可以复用的。

编辑

#前端 #React

上次更新: 2023/08/21, 20:05:58

← EcmaScript(ES) React组件→