# 一、关于React

英文官网：reactjs.org/

中文官网：zh-hans.reactjs.org/

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

react在发展过程中，一直跟随原生js的脚步，特别是从v16.0版本开始（用到了class来创建组件）

2015年推出了使用react来编写移动端的app ---- react-native

重要版本发版时间

| 序号 | 版本号 | 发版时间 | 重要更新 |

| ---- | ------ | -------------- | -------------------------- |

| 1 | 16 | 2017年9月26 | 引入es6的类组件 |

| 2 | 16.3 | 2018年4月3日 | 生命周期更新 |

| 3 | 16.4 | 2018年5月23日 | 生命周期更新 |

| 4 | 16.8 | 2019年2月6日 | 引入 react hooks |

| 5 | 17.0 | 2020年10月20日 | 过渡版本 |

| 6 | 18.0 | 2022年3月29日 | 写法改变，严格模式发生改变 |

# 二、脚手架

英文官网：create-react-app.dev/

中文官网：create-react-app.bootcss.com/

> 补充：react的脚手架并不是只有 `create-react-app`，还有`dva-cli`,`umi`等

## 2.1 create-react-app脚手架的使用

> Create React App 让你仅通过一行命令，即可构建现代化的 Web 应用。

> 本文档之后称之为cra

创建项目的方式:

> 需要保证电脑安装node版本在14以上，系统在win7以上

> node14以上才会自带npx

```sh

# 方式1:使用npx

$ npx create-react-app react-basic

# 方式2:使用npm

$ npm init react-app react-basic

# 方式3:使用yarn

$ yarn create react-app react-basic

```

如果需要使用ts开发项目，创建项目时可以通过`--template typescript`指定模版

```sh

$ npx create-react-app myapp --template typescript

```

react脚手架不像vue,有那么多选项，只会给你创建一个基本的

如果出现如下内容，即代表项目创建成功

```sh

Success! Created react-basic at /Users/wudaxun/Desktop/workspace/code/bk2207A/code/react-course/react-basic

Inside that directory, you can run several commands:

npm start

Starts the development server.

npm run build

Bundles the app into static files for production.

npm test

Starts the test runner.

npm run eject

Removes this tool and copies build dependencies, configuration files

and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd react-basic

npm start

Happy hacking!

```

该项目使用的react+webpack，react项目基本上都是用webpack做的构建工具

## 2.2 项目目录解析

项目创建完毕生成目录结构如下：

```sh

react-basic

├── README.md

├── node_modules

├── package.json

├── .gitignore

├── public

│ ├── favicon.ico

│ ├── index.html

│ ├── logo192.png

│ ├── logo512.png

│ ├── manifest.json

│ └── robots.txt

└── src

├── App.css

├── App.js

├── App.test.js

├── index.css

├── index.js

├── logo.svg

├── reportWebVitals.js // 做性能测试

└── setupTests.js // 测试

```

`src/reportWebVitals.js`

```js

const reportWebVitals = onPerfEntry => {

if (onPerfEntry && onPerfEntry instanceof Function) {

import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {

getCLS(onPerfEntry); // 衡量视觉稳定性。为了提供一个好的用户体验，CLS应该小于0.1

getFID(onPerfEntry); // 衡量可交互性。为了提供一个好的用户体验，FID应该在100毫秒内。

getFCP(onPerfEntry); // 首次内容绘制

getLCP(onPerfEntry); // 衡量加载性能。为了提供一个好的用户体验，LCP应该在2.5秒内

getTTFB(onPerfEntry); // 到第一个字节的时间

});

}

};

export default reportWebVitals;

```

> react官方文档已经给了我们性能提升的方案：zh-hans.reactjs.org/docs/optimi…

打开`package.json`,发现可运行命令如下：

```json

"scripts": {

"start": "react-scripts start",

"build": "react-scripts build",

"test": "react-scripts test",

"eject": "react-scripts eject"

```

`start`指令用于启动开发者服务器

`build`指令用于打包项目

`test`指令用于测试

`eject`指令用于抽离配置文件

> `cra`脚手架基于`webpack`，默认`webpack`的配置在 `node_modules `下的` react-scripts` 内部,但是一般情况下，传输代码时，不会上传 `node_modules`，那么在必要情况下就必须得抽离配置文件。

# 三、JSX-基于js给js扩展了一个能力

设想如下变量声明：

```js

const element =

Hello, world!

;

```

这个有趣的标签语法既不是字符串也不是 HTML。

它被称为 JSX，是一个 JavaScript 的语法扩展。

JSX 可以生成 React “元素”。

> React [不强制要求](zh-hans.reactjs.org/docs/react-… JSX，但是大多数人发现，在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。它还可以使 React 显示更多有用的错误和警告消息。

`src`文件夹下只保留`index.js`

## 3.1 React.createElement

先看一个代码

`src/index.js`

```js

// src/index.js

import React from 'react'

import ReactDOM from 'react-dom/client'

// 因为 JSX 语法上更接近 JavaScript 而不是 HTML，

// 所以 React DOM 使用 `camelCase`（小驼峰命名）来定义属性的名称，

// 而不使用 HTML 属性名称的命名约定。

// 例如，JSX 里的 `class` 变成了 className

// class 在React中被看做了关键字

// const app = (

// hello react

// )

// ？为什么react模块被显示使用了

const app = React.createElement('div', { className: 'box' }, 'hello react ！！！')

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(app)

```

`React.createElement()` 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象：

```js

// 注意：这是简化过的结构

const element = {

type: 'div',

props: {

className: 'box',

children: 'hello react'

}

};

```

这些对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。React 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新。

## 3.2 jsx语法详解

在下面的例子中，我们声明了一个名为 `name` 的变量，然后在 JSX 中使用它，并将它包裹在大括号中

`src/index.js`

```js

import './App.css';

//引入两个组件

import MyHeader from './MyHeader';

import MyFooter from './MyFooter';

//html模板+数据，行为操作

//vue里面-》createElement

//render(h){return h('div',"xxx")}

function App () {

//1,react.createElement类似于vue的createElement

//2,jsx

//jsx的特点，1，jsx可以直接写在js文件中 2，jsx让我们可以把html元素，当成js里面的东西来写

let dom1 =

你好：

react

function createTitle (type) {

if (type) {

return

}

//react模板表达式是单花括号的

let content = "num"

return (

{dom1}

{content + "123"}

)

}

//写普通的js，肯定是不能这些

//webpack-》编译js的时候，对于这些jsx的html进行了编译处理

export default App;

```

> 在 JSX 语法中，你可以在大括号内放置任何有效的 [JavaScript 表达式](developer.mozilla.org/en-US/docs/… 或 `formatName(user)` 都是有效的 JavaScript 表达式。

在下面的示例中，我们将调用 JavaScript 函数 `formatName(user)` 的结果，并将结果嵌入到 `

` 元素中。

`src/index.js`

```js

import './App.css';

//引入两个组件

import MyHeader from './MyHeader';

import MyFooter from './MyFooter';

//html模板+数据，行为操作

//vue里面-》createElement

//render(h){return h('div',"xxx")}

function App () {

//1,react.createElement类似于vue的createElement

//2,jsx

//jsx的特点，1，jsx可以直接写在js文件中 2，jsx让我们可以把html元素，当成js里面的东西来写

let dom1 =

你好：

react

//可以在任意js操作中写入jsx

function createContent (type) {

if (type) {

return

content

} else {

return

error

}

//react模板表达式是单花括号的

return (

{dom1}

{createContent(true)}

)

}

//写普通的js，肯定是不能这些

//webpack-》编译js的时候，对于这些jsx的html进行了编译处理

export default App;

```

**jsx也是一个表达式**

在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象。

也就是说，你可以在 `if` 语句和 `for` 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX。我们可以在任意的js代码中像返回一个变量一样的返回html元素

`src/index.js`

```js

import './App.css';

//引入两个组件

import MyHeader from './MyHeader';

import MyFooter from './MyFooter';

//html模板+数据，行为操作

//vue里面-》createElement

//render(h){return h('div',"xxx")}

function App () {

//1,react.createElement类似于vue的createElement

//2,jsx

//jsx的特点，1，jsx可以直接写在js文件中 2，jsx让我们可以把html元素，当成js里面的东西来写

let dom1 =

你好：

react

//可以在任意js操作中写入jsx

function createContent (type) {

if (type) {

return

content

} else {

return

error

}

//react模板表达式是单花括号的

return (

{dom1}

{createContent(true)}

)

}

//写普通的js，肯定是不能这些

//webpack-》编译js的时候，对于这些jsx的html进行了编译处理

export default App;

```

> 因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 `camelCase`（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。

> 例如，JSX 里的 `class` 变成了 [`className`](developer.mozilla.org/en-US/docs/… `tabindex` 则变为 [`tabIndex`](developer.mozilla.org/en-US/docs/…

Babel 会把 JSX 转译成一个名为 `React.createElement()` 函数调用。

> 上述代码都没见到使用过 React 模块，但是显示却用了，为什么？

# 四、组件定义

组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。

组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

## 4.1 类组件-vue2选项式api一样

ES6的加入让JavaScript直接支持使用class来定义一个类，react的创建类组件的方式就是使用的类的继承，`ES6 class`是一种使用React组件的写法，它使用了ES6标准语法来构建

```jsx

//类组件

//类得父类-react.reactComponet

//引入react

import react from "react"

//继承react.component

class MyHeader extends react.Component {

constructor(props) {

//调用super继承父类

super(props);

}

//核心方法render

render () {

//render方法决定组建的html模板

return (

component-header

)

}

export default MyHeader

```

## 4.2 函数组件-vue3的组合式api

定义组件最简单的方式就是编写 JavaScript 函数

```jsx

```

## 4.3 两组组件的区别

- 组件的定义方式不同。

- 生命周期不同：类组件有，函数式组件没有。

- 副作用操作执行不同：class组件通过生命周期函数，函数组件用hook的useEffect。

- state的定义、读取、修改方式不同：函数组件用hook的useState。

- this： class组件有，函数式组件没有。

- 实例： class组件有，函数时组件没有。

- ref使用不同：类组件可以获取子组件实例，函数式组件不可以，因为函数式组件没有实例。

> 官方推荐使用函数式组件,以上不同点虽然现在不明白是啥意思，没有关系，会随着大家的学习印象加深。

# 六、事件绑定

React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同：

- React 事件的命名采用小驼峰式（camelCase），而不是纯小写。

- 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。\

```

* 保证是一个函数

* 如果需要使用this关键词，保证this指向

```

## 6.1 ES5语法绑定事件

### 6.1.1 无参数的绑定

#### 6.1.1.1 方法一

- 定义函数

```

handleClick(e) { // e - 事件对象

e.preventDefault();

// doSomething ...

}

```

- constructor 中绑定函数执行上下文

```

this.handleClick = this.handleClick.bind(this);

```

- jsx中调用

```

#### 6.1.1.1 方法二

- 定义函数

```

handleClick(e) { // e - 事件对象

e.preventDefault();

// doSomething ...

}

```

- jsx 中调用

```

### 6.1.2 有参数的绑定

- 定义函数

```

handleClick(param1, param2, e) {

e.preventDefault();

// do something ...

}

```

> 注意此时无论多少个参数， e 一定放在最后

- jsx 中调用

```

```

`src/index.js`

```jsx

// src/index.js

import React from 'react'

import ReactDOM from 'react-dom/client'

// import App from './01_props/01_Parent_Child' // 父子组件省略.jsx

// import App from './01_props/02_Parent_Child_value' // 父组件给子组件传值

// import App from './01_props/03_Parent_Child_default' // 父组件给子组件传值,子组件设置默认值

// import App from './01_props/04_Parent-Child_type' // 父组件给子组件传值,子组件设置默认值,并且验证数据类型

// import App from './01_props/05_App_props_children' // 类插槽

// import App from './01_props/06_App_mutiple_props_children' // 类具名插槽（多个插槽）

// import App from './01_props/07_App_mouse_tracker' // 鼠标跟随

// import App from './01_props/08_App_render_props' // 渲染属性 - 其他组件共享状态

// import App from './02_state/01_App_state_es6' // es6 构造函数初始化状态

// import App from './02_state/02_App_state_es7' // es7 属性初始化器初始化状态

// import App from './02_state/03_App_setState_function' // 修改状态传递函数

// import App from './02_state/04_App_setState_object' // 修改状态传递对象

// import App from './02_state/05_App_computed' // 类组件实现类似计算属性

// import App from './02_state/06_App_lifeCycle' // 类组件生命周期

import App from './03_event/01_App_event_es5' // 事件处理 es5绑定事件方式

const root = ReactDOM.createRoot(document.getElementById('root'))

// 标签形式调用

root.render()

```

`src/03_event/01_App_event_es5.jsx`

```jsx

import React, { Component } from 'react';

// es5绑定事件 ---- 主要是对this指向的处理

class App extends Component {

constructor (props) {

super(props)

this.handlerClickFn = this.handlerClick.bind(this)

}

handlerClick (event) { // event为事件默认参数

console.log(1, this)

}

handlerParamsClick (a , b, event) { // 自定义参数 event将作为最后一个参数

console.log('a', a) // a 1

console.log('b', b) // b 2

}

render() {

return (

<button onClick={ this.handlerClickFn }>es5绑定事件-构造函数

<button onClick={ this.handlerClick.bind(this) }>es5绑定事件-jsx改变this指向

<button onClick={ this.handlerParamsClick.bind(this, '1', '2') }>es5绑定事件-传递参数

);

}

export default App;

```

## 6.2 ES6语法绑定事件

### 6.2.1 无参数绑定

#### 6.2.1.1 方法一

- 定义函数

```

handleClick = (e) => {

e.preventDefault();

// do something ...

}

```

- jsx中调用

```

> 比起 es 5 中的无参数函数的绑定调用， es 6 不需要使用 bind 函数；

#### 6.2.1.2 方法二

jsx中定义箭头函数

```

```

### 6.2.2 有参数绑定

#### 6.2.2.1 方法一

- 定义函数

```

handleClick = (param1, e) => {

e.preventDefault();

// do something ...

}

```

- jsx调用

```

```

> 有参数时，在绑定时依然要使用 bind；

> 并且参数一定要传，不然仍然存在 this 指向错误问题；

#### 6.2.2.2 方法二

- 定义函数

```

handleClick = (param1, e) => {

// do something ...

}

```

- jsx调用

```

<button onClick={() => this.handleClick('c')} />

// 如果需要对 event 对象进行处理的话，需要写成下面的格式

<button onClick={(e) => this.handleClick('c', e)} />