
:::tip{title="脚手架配置代理"}
React 入门学习（七）-- 脚手架配置代理 
:::

📢 大家好，我是小超同学，一名在职**的前端大侠** 😎

📢 这篇文章是学习 React 中**脚手架配置代理**的学习笔记，我自己也被代理了一波 😄

📢 非常感谢你的阅读，如果有不对的地方，求帮忙捉虫 🐞

📢 **愿你忠于自己，热爱生活，还能偶尔摸鱼一下** 🌟

# 引言

React 本身只关注于页面，并不包含发送 Ajax 请求的代码，所以一般都是集成第三方的包，或者自己封装的 📦

自己封装的话，比较麻烦，而且也可能考虑不全 🤔

常用的有两个库，一个是JQuery，一个是 axios

1. JQuery 这个比较重，因为 Ajax 服务也只是它这个库里的一小块功能，它主要做的还是 DOM 操作，而这不利于 React ，不推荐使用 ❌
2. axios 这个就比较轻，而且采用 Promise 风格，代码的逻辑会相对清晰，**推荐使用** ✅

因此我们这里采用 axios 来发送客户端请求

以前，我们在发送请求的时候，经常会遇到一个很重要的问题：跨域！给这段文字加入emoji 表情让它更加有趣 🌍🚀

![https://image.myxuechao.com/blog/React/react-34.png](https://image.myxuechao.com/blog/React/react-34.png)

在我以前的学习中，基本上都需要操作后端服务器代码才能解决跨域的问题，配置请求头，利用 script，这些都需要后端服务器的配合，因此我们前端需要自己解决这个问题的话，就需要这个技术了：代理 🕵️‍♂️。

在说代理之前，先谈谈为什么会出现跨域？

这个应该是源于`浏览器的同源策略` 🚧。所谓同源（即指在同一个域）就是两个页面具有相同的协议，主机和端口号， 当一个请求 URL 的`协议、域名、端口`三者之间任意一个与当前页面 URL 不同即为跨域 🌐。给这段文字加入emoji 表情让它更加有趣和生动 🎉

也就是说 xxx:3000和 xxx:4000 会有跨域问题，xxx:3000 与 abc:3000 有跨域问题 😫

那接下来我们采用配置代理的方式去解决这个问题 🛠️

> 关于跨域的问题解决方案，在之后的文章会有总结，敬请期待 📚✨
> 

### 1. 全局代理

第一种方法，我把它叫做全局代理，因为它直接将代理配置在了配置文件 `package.json 中` 🌐🔧

```jsx
"proxy":"http://localhost:5000"  
// "proxy":"请求的地址"
```

这样配置代理时，首先会在抓原请求地址上访问，如果访问不到文件，就会转发到这里配置的地址上去请求 🚀💻

![https://image.myxuechao.com/blog/React/react-35.png](https://image.myxuechao.com/blog/React/react-35.png)

我们需要做的就是在我们的请求代码中，将请求的地址改到转发的地址，即可 🌐✉️

但是这样会有一些问题，它会先向我们请求的地址，也就是这里的 `3000` 端口下请求数据，如果在 `3000` 端口中存在我们需要访问的文件，会直接返回，**`不会再去转发`** 🔄🤔

因此这就会出现问题，同时因为这种方式采用的是全局配置的关系，导致`**只能转发到一个地址**`，不能配置多个代理 ❌🔗

### 2. 单独配置

这也是我自己起的名字，这种配置方式，可以给多个请求配置代理，非常不错 💡🔄

它的工作原理和全局配置是一样的，但是写法不同 🌐📝

首先，我们需要在 **`src`** 目录下，创建代理配置文件 **`setupProxy.js`** 📁🔗

注意：这个文件只能叫这个名字，脚手架在启动的时候，会自动执行这些文件 😄📦

**第二步**

配置具体的代理规则，我们大致讲讲这些是什么意思 📝🔧

1. 首先我们需要引入这个 **`http-proxy-middleware`** 中间件，然后需要导出一个对象，这里建议使用函数，使用对象的话兼容性不大好 💡📦
2. 然后我们需要在 **`app.use`** 中配置，我们的代理规则，首先 **`proxy`** 接收的第一个参数是需要转发的请求，我的理解是一个标志的作用，当有这个标志的时候，预示着我们需要采用代理，例如 **`/api1`** ，我们就需要在我们 **`axios`** 的请求路径中，加上 **`/api1`** ，这样所有添加了 **`/api1`** 前缀的请求都会转发到这 🔄📡
3. 第二个参数接受的是一个对象，用于配置代理。
    - **`target`** 属性用于配置转发目标地址，也就是我们数据的地址 🎯🌐
    - **`changeOrigin`** 属性用于控制服务器收到的请求头中 **`host`** 字段，可以理解为一个伪装效果，为 **`true`** 时，收到的 **`host`** 就为请求数据的地址 ✨🎭
    - **`pathRewrite`** 属性用于去除请求前缀，因为我们通过代理请求时，需要在请求地址前添加一个标志，但是实际的地址是不存在这个标志的，所以我们**一定要去除**这个前缀，这里采用的有点类似于正则替换的方式 ✂️🔄

配置一个代理的完整代码如下:

在 `src` 目录下创建代理配置文件 `setupProxy.js` ，进行配置： 📁🔗

```jsx
const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = function (app) {
  app.use(
   //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5001)
    createProxyMiddleware('/api1', { // 遇见/api1前缀的请求，就会触发该代理配置
      target: 'http://localhost:5001', // 配置转发目标地址(能返回数据的服务器地址)
	//控制服务器接收到的请求头中host字段的值
      /*
      changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
      changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
      changeOrigin默认值为false，但一般将changeOrigin改为true
      */
      changeOrigin: true, // 控制服务器收到的请求头中Host的值
	//除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
      pathRewrite: { '^/api1': '' } // 重写请求路径(必须)
    }),  
    createProxyMiddleware('/api2', {  
      target: 'http://localhost:5002', 
      changeOrigin: true,  
      pathRewrite: { '^/api2': '' }  
    })
  )
}
```

关于脚手架配置代理的内容就到这里啦！🎉

> 非常感谢您的阅读，希望对您有所帮助。如果您有任何问题或意见，请随时提出，我们将非常乐意解答和改进。谢谢！🌟🙏祝您学习愉快，前端开发顺利！🚀💻
>

React 入门学习（七）-- 脚手架配置代理

React 入门学习（六）-- TodoList 案例

# React 入门学习（五）-- 认识脚手架

:::tip{title="认识脚手架"}
入门学习（五）-- 认识脚手架、使用、安装
:::

📢 大家好，我是小超同学，这篇文章是学习 React 脚手架的学习笔记

📢 非常感谢你的阅读，不对的地方欢迎指正 🙏

📢 愿你生活明朗，万物可爱

## 简介

这篇文章主要围绕 React 中的脚手架，来解决一下几个问题

**灵魂三问：是什么？为什么？怎么办？**

1. 什么是脚手架？
2. 为什么要用脚手架？
3. 怎么用脚手架？

## 🍕 1. 什么是 React 脚手架？

在我们的现实生活中，脚手架最常用的使用场景是在工地，它是为了保证施工顺利的、方便的进行而搭建的，在工地上搭建的脚手架可以帮助工人们高校的去完成工作，同时在大楼建设完成后，拆除脚手架并不会有任何的影响。

在我们的 React 项目中，脚手架的作用与之有异曲同工之妙

React 脚手架其实是一个工具帮我们快速的生成项目的工程化结构，每个项目的结构其实大致都是相同的，所以 React 给我提前的搭建好了，这也是脚手架强大之处之一，也是用 React 创建 SPA 应用的最佳方式

## 🍔 2. 为什么要用脚手架？

在前面的介绍中，我们也有了一定的认知，脚手架可以帮助我们快速的搭建一个项目结构

在我之前学习 `webpack` 的过程中，每次都需要配置 `webpack.config.js` 文件，用于配置我们项目的相关 `loader` 、`plugin`，这些操作比较复杂，但是它的重复性很高，而且在项目打包时又很有必要，那 React 脚手架就帮助我们做了这些，它不需要我们人为的去编写 `webpack` 配置文件，它将这些配置文件全部都已经提前的配置好了。

据我猜测是直接输入一行命令就能打包完成。

> 目前还没有学习到哪，本文主要讲脚手架的项目目录结构以及安装
> 

## 🍟 3. 怎么用 React 脚手架？

这也是这篇文章的重点，如何去安装 React 脚手架，并且理解它其中的相关文件作用

首先介绍如何安装脚手架

### 1. 安装 React 脚手架

首先确保安装了 `npm` 和`Node`，版本不要太古老，具体是多少不大清楚，建议还是用 `npm update` 更新一下

然后打开 cmd 命令行工具，全局安装 `create-react-app`

```bash
npm i create-react-app -g
```

然后可以**新建**一个文件夹用于存放项目

在当前的文件夹下执行

```jsx
create-react-app hello-react
```

**快速搭建项目**

再在生成好的 `hello-react` 文件夹中执行

```jsx
npm start
```

**启动项目**

接下来我们看看这些文件都有什么作用

**2. 脚手架项目结构**

```jsx
hello-react
├─ .gitignore               // 自动创建本地仓库
├─ package.json             // 相关配置文件
├─ public                   // 公共资源
│  ├─ favicon.ico           // 浏览器顶部的icon图标
│  ├─ index.html            // 应用的 index.html入口
│  ├─ logo192.png           // 在 manifest 中使用的logo图
│  ├─ logo512.png           // 同上
│  ├─ manifest.json         // 应用加壳的配置文件
│  └─ robots.txt            // 爬虫给协议文件
├─ src                      // 源码文件夹
│  ├─ App.css               // App组件的样式
│  ├─ App.js                // App组件
│  ├─ App.test.js           // 用于给APP做测试
│  ├─ index.css             // 样式
│  ├─ index.js              // 入口文件
│  ├─ logo.svg              // logo图
│  ├─ reportWebVitals.js    // 页面性能分析文件
│  └─ setupTests.js         // 组件单元测试文件
└─ yarn.lock
```

再介绍一下public目录下的 `index.html` 文件中的代码意思

```jsx
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
```

以上是删除代码注释后的全部代码

**第5行**

指定浏览器图标的路径，这里直接采用 `%PUBLIC_URL%` 原因是 `webpack` 配置好了，它代表的意思就是 `public` 文件夹

```jsx
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
```

**第6行**

用于做移动端网页适配

```jsx
<meta name="viewport" content="width=device-width, initial-scale=1" />
```

**第七行**

用于配置安卓手机浏览器顶部颜色，兼容性不大好

```jsx
<meta name="theme-color" content="#000000" />
```

**8到11行**

用于描述网站信息

```jsx
<meta
	name="description"
    content="Web site created using create-react-app"
/>
```

**第12行**

苹果手机触摸版应用图标

```jsx
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
```

**第13行**

应用加壳时的配置文件

```jsx
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
```

> 以上就是关于 React 脚手架的全部内容了，非常感谢你的阅读💕
>

React 入门学习（五）-- 认识脚手架

# React入门学习（四）-- key的作用

:::tip{title="key的作用"}
React 入门（三） 这里介绍代码中正确加入key的作用、效果
:::

> 📢 大家好，我是小超同学，一名在职的前端人员
> 
> 
> 📢 这篇文章将**尽力**说明白 **key**的作用
> 
> 📢 **愿你忠于自己，热爱生活**
> 

### 前言

diff 算法是 React 提升渲染性能的一种优化算法，在 React 中有着很重要的地位，也不止于 React ，在 Vue 中也有 diff 算法，似乎没有差别。在最近的 React 学习中，学到了 diff 算法、对于 diff 算法的一点理解，有什么问题或者错误的地方，大家**一定要指出**！

### 什么是虚拟 DOM ？

在谈 diff 算法之前，我们需要先了解虚拟 DOM 。它是一种编程概念，在这个概念里，以一种`虚拟的表现形式被保存在内存中`。在 React 中，render 执行的结果得到的`并不是真正的 DOM 节点`，而是 `JavaScript 对象`

![https://image.myxuechao.com/blog/React/react-16.png](https://image.myxuechao.com/blog/React/react-16.png)

> 虚拟 DOM 只保留了真实 DOM 节点的一些基本属性，和节点之间的层次关系，它相当于建立在 JavaScript 和 DOM 之间的一层“缓存”
> 

```jsx
<div class="hello">
    <span>hello world!</span>
</div>
```

上面的这段代码会转化可以转化为虚拟 DOM 结构

```jsx
{
    tag: "div",
    props: {
        class: "hello"
    },
    children: [{
        tag: "span",
        props: {},
        children: ["hello world!"]
    }]
}
```

其中对于一个节点必备的三个属性 `tag，props，children`

- tag 指定元素的**标签**类型，如“`li`，`div`”
- props 指定元素身上的属性，如 `class` ，`style`，自定义属性
- children 指定元素是否有**子节点**，参数以**数组**形式传入

而我们在 render 中编写的 JSX 代码就是一种虚拟 DOM 结构。

### key的作用

引入 key 的优化策略，让性能上有了翻天覆地的变化


![key的描述](https://image.myxuechao.com/blog/React/react-19.png)



### 那 key 有什么作用呢？

当同一层级的节点添加了 key 属性后，当位置发生变化时。react diff 进行新旧节点比较，如果发现有相同的 key 就会进行移动操作，而不会删除再创建

**为什么不能用 index 作为 key 值呢？**

`index` 作为 `key` ，如果我们删除了一个节点，那么数组的后一项可能会前移，这个时候移动的节点和删除的节点就是相同的 `key` ，在`react`中，如果 `key` 相同，就会视为**相同的组件**，但这两个组件是不同的，这样就会出现很麻烦的事情，例如：序号和文本不对应等问题

所以一定要保证 `key` 的唯一性

## 示例演示
 
>页面展示条件：1、我有一个数组persons里面有两条人员默认数据，然后展示到页面、在每一条人员里在> > 加一个输入框
>                   2、还有一个添加按钮每次点击在页面`顶部`增加一条人员数据

![https://image.myxuechao.com/blog/React/react-17.png](https://image.myxuechao.com/blog/React/react-17.png)

### 代码执行后页面效果

[演示效果视频](https://image.myxuechao.com/blog/React/react-18.mp4)

### 完整代码

```jsx
class Person extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          persons: [
            { id: 1, name: 'tom', age: 18 },
            { id: 2, name: 'jack', age: 19 },
          ]
        }
      }
      componentDidMount () {

      }
      add = () => {
        const { persons } = this.state
        const newPersons = { id: persons.length + 1, name: 'lucy', age: 21 }
        this.setState({
          persons: [newPersons, ...persons]
        })
      }
      render () {
        return (
          <div>
            <h2> 展示人员信息</h2>
            <button onClick={this.add}>添加</button>
            <h3>使用index索引值作为key</h3>
            <ul>
              {
                this.state.persons.map((personObj, index) => {
                  return <li key={index}>姓名：{personObj.name}---年龄：{personObj.age} <input type="text" /> </li>
                })
              }
            </ul>
            <hr></hr>
            <h3>使用数据id(数据的唯一标识)索引值作为key</h3>
            <ul>
              {
                this.state.persons.map((personObj, index) => {
                  return <li key={personObj.id}>姓名：{personObj.name}---年龄：{personObj.age} <input type="text" /></li>
                })
              }
            </ul>
          </div>
        )
      }
    }
    ReactDOM.render(<Person />, document.getElementById("example"))
```

## 总结：

   1、通过上面的例子发现`key`（写正确）不仅可以`提升性能`而且还可以 排除`不可预知的bug`

React入门学习（四）-- key的作用

# React 入门（三）  生命周期

:::tip{title="生命周期（旧）版本"}
React 入门（三）  生命周期
:::


> 📢 大家好，我是小超同学，这一篇是关于 React 的学习笔记，关于组件的生命周期 😊
> 

> 📢 非常感谢你的阅读，不对的地方欢迎指正 🙏
> 

> 📢 愿你生活明朗，万物可爱 😍
> 

在 React 中为我们提供了一些生命周期钩子函数，让我们能在 React 执行的重要阶段，在钩子函数中做一些事情。那么在 React 的生命周期中，有哪些钩子函数呢，我们来总结一下

### React 生命周期
### ⏳旧版生命周期

React的`旧版生命周期`主要包括三个阶段：`初始化阶段，更新阶段，销毁阶段`

****生命周期旧父子关系生命周期****

![https://image.myxuechao.com/blog/React/react-14.png](https://image.myxuechao.com/blog/React/react-14.png)

### 这里有四条路线分别是：

> 初始化阶段挂载时 → **`constructor`** → **`componentWillMount`** → **`render`** → **`componentDidMount`**
> 

> setState()执行时→ **`shouldComponentUpdate`** → **`componentWillUpdate`** → **`render`** → **`componentDidUpdate`**
> 

> forceUpdate执行时→ **`componentWillUpdate`** → **`render`** → **`componentDidUpdate`**
> 

> 父组件render执行时→ **`componentWillReceiveProps`** → **`shouldComponentUpdate`** → **`componentWillUpdate`** → **`render`** → **`componentDidUpdate`**
> 

### 初始化阶段

### 1. constructor 执行

`constructor` 在组件初始化的时候只会执行一次

通常它用于做这两件事

1. 初始化函数内部 `state`
2. 绑定函数

```jsx
constructor(props) {
    console.log('进入构造器');
    super(props)
    this.state = { count: 0 }
}
```

现在我们通常不会使用 `constructor` 属性，而是改用类加箭头函数的方法，来替代 `constructor`

例如，我们可以这样初始化 `state`

```jsx
state = {
	count: 0
};
```

### 下面是每个阶段的详细描述和相应的图表

### 1. 初始化阶段 这是组件实例被创建和插入DOM的阶段。

```mermaid
graph TB
  A["挂载阶段"]
  A -- "constructor" --> B["构造函数"]
  A -- "componentWillMount" --> C["组件即将挂载"]
  A -- "render" --> D["渲染组件"]
  A -- "componentDidMount" --> E["组件已挂载"]
  linkStyle 0 stroke:#2ecd71,stroke-width:2px;
  linkStyle 1 stroke:#2ecd71,stroke-width:2px;
  linkStyle 2 stroke:#2ecd71,stroke-width:2px;
  linkStyle 3 stroke:#2ecd71,stroke-width:2px;
```

- **constructor**：这是组件的构造函数，通常在这里初始化state和绑定事件处理器。
- **componentWillMount**：这是组件即将被挂载到DOM的时候调用的方法。在这个方法中，你可以执行一些在渲染前需要完成的工作。
- **render**：这是渲染组件的方法。它应该是一个纯函数，返回组件的视图。
- **componentDidMount**：这是组件已经被挂载到DOM后调用的方法。在这个方法中，你可以执行一些需要DOM节点存在才能执行的操作，比如发起网络请求或添加事件监听器。

### 2. 更新阶段 这是组件的props或state改变，导致组件需要重新渲染的阶段。

> **这个图是组件的props或state改变总体图**
> 

```mermaid
graph TB
  A["更新阶段"]
  A -- "componentWillReceiveProps" --> B["组件将接收新的props"]
  A -- "shouldComponentUpdate" --> C["判断是否应该更新组件"]
  A -- "componentWillUpdate" --> D["组件即将更新"]
  A -- "render" --> E["渲染组件"]
  A -- "componentDidUpdate" --> F["组件已更新"]
  linkStyle 0 stroke:#2ecd71,stroke-width:2px;
  linkStyle 1 stroke:#2ecd71,stroke-width:2px;
  linkStyle 2 stroke:#2ecd71,stroke-width:2px;
  linkStyle 3 stroke:#2ecd71,stroke-width:2px;
  linkStyle 4 stroke:#2ecd71,stroke-width:2px;
```

- **componentWillReceiveProps**：这是组件将接收新的props时调用的方法。在这个方法中，你可以根据新的props来更新state。
- **shouldComponentUpdate**：这是一个决定组件是否需要重新渲染的方法。它返回一个布尔值，如果返回false，那么组件就不会进行重新渲染。
- **componentWillUpdate**：这是组件即将更新时调用的方法。在这个方法中，你可以执行一些在渲染前需要完成的工作。
- **render**：这是渲染组件的方法。它应该是一个纯函数，返回组件的视图。
- **componentDidUpdate**：这是组件已经更新后调用的方法。在这个方法中，你可以执行一些需要DOM节点存在才能执行的操作，比如更新DOM或重新计算样式。

### 当props改变时

```mermaid
graph TB
  A["props改变"]
  A -- "componentWillReceiveProps" --> B["组件将接收新的props"]
  B -- "shouldComponentUpdate" --> C["判断是否应该更新组件"]
  C -- "componentWillUpdate" --> D["组件即将更新"]
  D -- "render" --> E["渲染组件"]
  E -- "componentDidUpdate" --> F["组件已更新"]
  linkStyle 0 stroke:#2ecd71,stroke-width:2px;
  linkStyle 1 stroke:#2ecd71,stroke-width:2px;
  linkStyle 2 stroke:#2ecd71,stroke-width:2px;
  linkStyle 3 stroke:#2ecd71,stroke-width:2px;
  linkStyle 4 stroke:#2ecd71,stroke-width:2px;
```

- **componentWillReceiveProps**：这是组件将接收新的props时调用的方法。在这个方法中，你可以根据新的props来更新state。
- **shouldComponentUpdate**：这是一个决定组件是否需要重新渲染的方法。它返回一个布尔值，如果返回false，那么组件就不会进行重新渲染。
- **componentWillUpdate**：这是组件即将更新时调用的方法。在这个方法中，你可以执行一些在渲染前需要完成的工作。
- **render**：这是渲染组件的方法。它应该是一个纯函数，返回组件的视图。
- **componentDidUpdate**：这是组件已经更新后调用的方法。在这个方法中，你可以执行一些需要DOM节点存在才能执行的操作，比如更新DOM或重新计算样式。

### 当state改变时

```mermaid
graph TB
  A["state改变"]
  A -- "shouldComponentUpdate" --> B["判断是否应该更新组件"]
  B -- "componentWillUpdate" --> C["组件即将更新"]
  C -- "render" --> D["渲染组件"]
  D -- "componentDidUpdate" --> E["组件已更新"]
  linkStyle 0 stroke:#2ecd71,stroke-width:2px;
  linkStyle 1 stroke:#2ecd71,stroke-width:2px;
  linkStyle 2 stroke:#2ecd71,stroke-width:2px;
  linkStyle 3 stroke:#2ecd71,stroke-width:2px;
```

- **shouldComponentUpdate**：这是一个决定组件是否需要重新渲染的方法。它返回一个布尔值，如果返回false，那么组件就不会进行重新渲染。
- **componentWillUpdate**：这是组件即将更新时调用的方法。在这个方法中，你可以执行一些在渲染前需要完成的工作。
- **render**：这是渲染组件的方法。它应该是一个纯函数，返回组件的视图。
- **componentDidUpdate**：这是组件已经更新后调用的方法。在这个方法中，你可以执行一些需要DOM节点存在才能执行的操作，比如更新DOM或重新计算样式。

### 3. 卸载阶段 这是组件被移除和销毁的阶段

```mermaid
graph TB
  A["卸载阶段"]
  A -- "componentWillUnmount" --> B["组件即将卸载"]
  linkStyle 0 stroke:#2ecd71,stroke-width:2px;
```

- **componentWillUnmount**：这是组件即将被卸载和销毁时调用的方法。在这个方法中，你可以执行一些清理工作，比如清除定时器或移除事件监听器。

### 🚀新版本生命周期

React的`新版生命周期`主要包括三个阶段：`初始化阶段，更新阶段，销毁阶段`

![https://image.myxuechao.com/blog/React/react-15.png](https://image.myxuechao.com/blog/React/react-15.png)

### 1. 挂载阶段 这是组件实例被创建和插入DOM的阶段

```mermaid
graph TB
  A["挂载阶段"]
  A -- "constructor" --> B["构造函数"]
  A -- "static getDerivedStateFromProps" --> C["从props获取派生state"]
  A -- "render" --> D["渲染组件"]
  A -- "componentDidMount" --> E["组件已挂载"]
  linkStyle 0 stroke:#2ecd71,stroke-width:2px;
  linkStyle 1 stroke:#2ecd71,stroke-width:2px;
  linkStyle 2 stroke:#2ecd71,stroke-width:2px;
  linkStyle 3 stroke:#2ecd71,stroke-width:2px;
```

- **constructor**：这是组件的构造函数，通常在这里初始化state和绑定事件处理器。
- **static getDerivedStateFromProps**：这是一个静态方法，用于从props获取派生state。这个方法在挂载和更新阶段都会被调用。
- **render**：这是渲染组件的方法。它应该是一个纯函数，返回组件的视图。
- **componentDidMount**：这是组件已经被挂载到DOM后调用的方法。在这个方法中，你可以执行一些需要DOM节点存在才能执行的操作，比如发起网络请求或添加事件监听器。

### 2. 更新阶段 这是组件的props或state改变，导致组件需要重新渲染的阶段

```mermaid
graph TB
  A["更新阶段"]
  A -- "static getDerivedStateFromProps" --> B["从props获取派生state"]
  A -- "shouldComponentUpdate" --> C["判断是否应该更新组件"]
  A -- "render" --> D["渲染组件"]
  A -- "getSnapshotBeforeUpdate" --> E["获取更新前的快照"]
  A -- "componentDidUpdate" --> F["组件已更新"]
  linkStyle 0 stroke:#2ecd71,stroke-width:2px;
  linkStyle 1 stroke:#2ecd71,stroke-width:2px;
  linkStyle 2 stroke:#2ecd71,stroke-width:2px;
  linkStyle 3 stroke:#2ecd71,stroke-width:2px;
  linkStyle 4 stroke:#2ecd71,stroke-width:2px;
```

- **static getDerivedStateFromProps**：这是一个静态方法，用于从props获取派生state。这个方法在挂载和更新阶段都会被调用。
- **shouldComponentUpdate**：这是一个决定组件是否需要重新渲染的方法。它返回一个布尔值，如果返回false，那么组件就不会进行重新渲染。
- **render**：这是渲染组件的方法。它应该是一个纯函数，返回组件的视图。
- **getSnapshotBeforeUpdate**：这是一个在DOM更新前获取快照的方法。它返回的值会作为componentDidUpdate的第三个参数。
- **componentDidUpdate**：这是组件已经更新后调用的方法。在这个方法中，你可以执行一些需要DOM节点存在才能执行的操作，比如更新DOM或重新计算样式。

### 3. 卸载阶段 这是组件被移除和销毁的阶段

```mermaid
graph TB
  A["卸载阶段"]
  A -- "componentWillUnmount" --> B["组件即将卸载"]
  linkStyle 0 stroke:#2ecd71,stroke-width:2px;
```

- **componentWillUnmount**：这是组件即将被卸载和销毁时调用的方法。在这个方法中，你可以执行一些清理工作，比如清除定时器或移除事件监听器。

### 解释一下新版本生命周期的新钩子

1. **static getDerivedStateFromProps 执行 （新钩子）**

这个是 React 新版本中新增的2个钩子之一，据说很少用。

`getDerivedStateFromProps` 在初始化和更新中都会被调用，并且在 `render` 方法之前调用，它返回一个对象用来更新 `state`

`getDerivedStateFromProps` 是类上直接绑定的静态（`static`）方法，它接收两个参数 `props` 和 `state`

`props` 是即将要替代 `state` 的值，而 `state` 是当前未替代前的值

> 注意：state 的值在任何时候都取决于传入的 props ，不会再改变
> 

```jsx
static getDerivedStateFromProps(props,state) {
    return props
}
ReactDOM.render(<Count count="109"/>,document.getElementById("example"))
```

`count` 的值不会改变，一直是 109

1. **getSnapshotBeforeUpdate执行 （新钩子）**

在最近一次的渲染输出之前被提交之前调用，也就是即将挂载时调用

相当于淘宝购物的快照，会保留下单前的商品内容，在 React 中就相当于是 即将更新前的状态

> 它可以使组件在 DOM 真正更新之前捕获一些信息（例如滚动位置），此生命周期返回的任何值都会作为参数传递给 `componentDidUpdate()`。如不需要传递任何值，那么请返回 null
> 

```jsx
			//在更新之前获取快照
      getSnapshotBeforeUpdate () {
        console.log('Count---getSnapshotBeforeUpdate');
        return 'atxuechao'
	   }
```

### 总结

> 重要的钩子（工作中常用）
> 
1.  **`render`**: 渲染方法，返回组件的虚拟DOM表示。
2.  **`componentDidMount`**: 在组件首次渲染完成后调用，通常用于进行异步数据获取、axios请求、添加事件监听器等副作用操作。
3. `componentWillUnmount`:作一些收尾的工作（清除定时器）

> 即将废弃的勾子
> 
1. **`componentWillMount`**: 即将废弃，在新版本React中不推荐使用。可以在`constructor`中进行初始化操作。
2.  **`componentWillReceiveProps`**: 即将废弃，在新版本React中不推荐使用。可以使用`static getDerivedStateFromProps`**或**`componentDidUpdate`来处理接收到的属性变化。
3. `componentWilUpdate`：即将废弃并由**`getSnapshotBeforeUpdate`**取代。`getSnapshotBeforeUpdate`用于在组件更新之前获取DOM快照，常用于在组件更新后恢复滚动位置或处理其他交互效果。

React 入门学习（五）-- 认识脚手架

React入门学习（四）-- key的作用

React 入门（三） 生命周期

React 入门（三）生命周期