第一章-React入门

一、React简介
- [1. React是什么？](#1. React是什么？)
- [2. React是谁开发的？](#2. React是谁开发的？)
- [3. 为什么要学React？](#3. 为什么要学React？)
- [4. React的特点](#4. React的特点)
- [5. 学习React之前你要掌握的JavaScript基础知识](#5. 学习React之前你要掌握的JavaScript基础知识)
[二、Hello React 案例](#二、Hello React 案例)
- [1. 效果](#1. 效果)
- [2. 相关js库](#2. 相关js库)
- [3. 创建虚拟 DOM 的两种方式](#3. 创建虚拟 DOM 的两种方式)
三、虚拟DOM的两种创建方式
- [1. 纯 JS 方式（一般不用）](#1. 纯 JS 方式（一般不用）)
- [2. JSX 方式](#2. JSX 方式)
[四. 虚拟DOM与真实DOM](#四. 虚拟DOM与真实DOM)
[五. JSX 语法规则](#五. JSX 语法规则)
- [1. 效果](#1. 效果)
- [2. JSX](#2. JSX)
- [3. JSX语法规则](#3. JSX语法规则)
[六. JSX 小练习](#六. JSX 小练习)
- [1. 需求](#1. 需求)
- [2. 渲染数组和对象的区别](#2. 渲染数组和对象的区别)
- [3. 【js表达式】与【js语句】](#3. 【js表达式】与【js语句】)
- [4. map实现数组遍历](#4. map实现数组遍历)
[七. 模块与组件、模块化与组件化的理解](#七. 模块与组件、模块化与组件化的理解)
- [1. 模块](#1. 模块)
- [2. 组件](#2. 组件)
- [3. 模块化](#3. 模块化)
- [4. 组件化](#4. 组件化)

一、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 的两种方式

javascript 复制代码

<!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>
</script>
</body>
</html>

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

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

javascript 复制代码

<!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 方式

javascript 复制代码

<!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

javascript 复制代码

<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 是早期用于存储和传输数据的一种可扩展标记语言，结构如下所示：

javascript 复制代码

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

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

javascript 复制代码

"{'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语法规则

javascript 复制代码

<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) 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

六. JSX 小练习

1. 需求

需求：需要动态展示如下列表。

我们可以用下面代码实现效果：

javascript 复制代码

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

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

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

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

代码：

javascript 复制代码

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

效果：

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

代码：

javascript 复制代码

// 模拟一些数据
// 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从数组调整为对象再试一下。

代码：

javascript 复制代码

// 模拟一些数据
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循环。

代码：

javascript 复制代码

// 模拟一些数据
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)，再次试验一下：

javascript 复制代码

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

神奇的是，代码非但不报错了，还可以成功运行：

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

一定注意区分：【js表达式】 与 【js语句(代码)】

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

下面这些都是表达式：

javascript 复制代码

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

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

js语句(代码)：

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

javascript 复制代码

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

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

4. map实现数组遍历

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

代码：

javascript 复制代码

// 模拟一些数据
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. 组件化

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

第一章-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语句】