React note10（脚手架：redux&react-redux&高阶组件HOC）

逃离我推掉我的手 2022-11-29 12:27 187阅读 0赞

# redux 简介 #

--------------------

我们先来思考一个问题：  
如果组件A与组件B向互相传递参数，那么就必须有一个共同的父组件，通过绑定到父组件的state再进行数据分发。

那么有没有一个东西，能够允许我们更方便的存取数据，就像是在一个仓库中存取数据呢？有，可以通过redux store来实现。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center]

### （一）redux是什么 ###

redux是为javascript应用程序提供的一个**状态管理工具**。用来集中的管理react中多个组件的状态。

redux是专门作状态管理的js库。（不只react插件库可以用，在其他js框架中例如vue中也是可以使用的，但是基本用在react中）

![在这里插入图片描述][20200820200104719.png_pic_center]

### （二）什么时候用redux ###

需求场景：

*  某个组件的状态需要共享的时候；
 *  某个组件的状态需要在任何地方都可以拿到；
 *  一个组件需要改变全局状态；
 *  一个组件需要改变另一个组件的状态。

### （三）redux三大原则 ###

1、**单一数据源**：整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。

2、**State 是只读的**：**唯一改变 state 的方法就是触发 action**，action 是一个用于描述已发生事件的普通对象。

3、**使用纯函数来执行修改**：为了描述 action 如何改变 state tree ，你需要编写 reducers(一些纯函数，它接收先前的 state 和 action)

### （四）redux常用概念 ###

*  Store：管理着整个应用的状态，可以通过**getState()** 来重新获得最新的状态(state)。
 *  Action：是唯一可以改变状态(state)的方式，服务器的各种推送、用户自己做的一些操作，最终都会转换成一个个的Action，而且这些Action就是修改的动作，可以通过**dispatch()** 方法来进行调用。
 *  Reducer：Reducer 是一个 **[纯函数][Link 1]**，它接受 Action 和当前 State 作为参数，**返回一个新的 State**。（纯函数就是只要传入相同的参数，每次都应返回相同的结果）

### （五）redux常用方法 ###

*  createStore() 作用：创建一个Redux store来存放应用中所有的state，一个应用只能有个store。函数**返回store对象**。
 *  getState() 作用：获取数据。
 *  dispatch() 作用：分发action，这是**改变state的唯一方法**。
 *  subscribe() 作用：添加一个**变化监听器**，每当改变store的时候就会执行。

### （六）redux单向数据流执行流程 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 2]

# redux 使用 #

--------------------

下载：`npm install --save redux`

建议：在项目中创建一个sotre文件夹，用来保存与redux相关的内容。

### （一）redux初体验 全局中使用 ###

1、在src文件夹下创建一个store的文件夹，并且在其中创建store.js来编写redux。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 3]

2、最最基本的使用，在全局下的index.js文件中打印输出一下我们刚在store中写的数据。在src下的index.js中使用：`store.getState().xxx`  
![在这里插入图片描述][20200820200906718.png_pic_center]

### （二）redux 组件中使用 ###

##### 1、读取数据 #####

组件中取数据，跟全局的方法一样，都是`store.getState().xxx`。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 4]

##### 2、修改数据 #####

（1）在reducer中添加action任务：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 5]  
（2）在组件中通过dispatch()方法来进行调用修改动作。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 6]

但是大家发现数据并没有修改。（constructor是在初始化自动执行，redux数据改变了，但是组件并没有重新渲染）

所以我们需要subscribe()订阅一个变化监听器，每当改变store的时候就会执行该函数里的相关操作。

就如果把这个subscribe方法放在钩子函数中，当数据改变的时候，被改变的只有该方法中的操作。

componentWillMount(){ 
        console.log("重新渲染000")
    }
    componentDidMount() { 
        console.log("重新渲染111")
        store.subscribe(() => { 
            console.log("重新渲染222")
            this.setState({ 
                text: store.getState().age
            })
        })
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 8]

##### 3、传递参数 #####

（1）在dispatch中进行参数传递.  
![在这里插入图片描述][20200820203658120.png_pic_center]

（2）reducer中使用.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 9]

# 使用工厂函数统一创建action #

--------------------

### （一）redux 封装派发动作 ###

不知道大家有没有想过一个问题：我们之前的修改动作都是直接在store.dispatch()创建的。那如果今后会有很多的修改动作，都直接在组件中的store.dispatch()创建的话，当项目比较复杂的时候会比较难以管理。

redux希望使用专门的工厂函数来创建action。

1、把用在组件中的任务，分离出去，**拆分任务名与数据**。就是把原来dispatch的对象单独拿出去。

先拆分数据--------------------创建一个actionType.js来存放动作。

>>actionType.js
    
    let ADD=(val)=>{ 
        return { type:"REDUX_UPDATE",num:val}
    }
    
    export { ADD}

>>Bro1.js
    
    import React, {  Component } from 'react'
    import store from "../store/store.js"
    // 引入拆分出去的任务名和数据
    import { ADD} from "../store/actionType.js"
    
    export default class Bro1 extends Component { 
        ...
        update=()=>{      
            // 使用拆分出去的任务名和数据，之前咱们传的num:3，现在也是通过ADD方法来实现
            store.dispatch(ADD(3))
        }
        ...
    }

![在这里插入图片描述][20200820153400853.png_pic_centr]![在这里插入图片描述][20200820153431357.png_pic_ceter]

2、封装派发动作名（action任务名）

再更细一点拆分任务名--------------------创建actionType.js文件（这一步看个人需要）

>>acitonName.js
    
    // 拆分任务名
    export let REDUX_UPDATE="REDUX_UPDATE";

>>actionType.js
    
    // 引入任务名
    import { REDUX_UPDATE} from "./actionName"
    
    let ADD=(val)=>{ 
        return { type:REDUX_UPDATE,num:val}
    }
    
    export { ADD}

>>reducer.js
    
    // 引入任务名
    import { REDUX_UPDATE} from "./actionName"
    
    let obj={ 
        name:"sky",
        age:18
    }
    
    let reducer=(state=obj,action)=>{ 
        switch(action.type){ 
            case REDUX_UPDATE:
                return { ...state,age:state.age+action.num} //num 是接收到的数据
                break;
            default:
                return state
                break;
        }
    }
    
    export default reducer

![在这里插入图片描述][2020082015483646.png_pic_center]

### （二）redux 封装reducer模块 ###

今后当项目体积逐渐变大会出现一种情况。就是所有的操作全部写在一个reducer中，非常难以管理。那么在这个时候可以把组件自己的reducer单独剥离出来进行管理。

##### 1、在组件中创建一个reducer.js来存储。 #####

![在这里插入图片描述][20200820204021484.png_pic_center]

##### 2、redux 封装reducer。 #####

把原本在store文件夹中reducer里面的内容放到刚创建的reducer.js中。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 10]

##### 3、redux 合并 reducer。 #####

但是每个组件都有自己的reducer，那么怎么把这些分散的reducers合并成一个呢？

使用redux提供的combineReducers，把多个reducer合并成一个。在合并过程中，如果key和value定义为一样的，那就可以只写一个。

![在这里插入图片描述][20200820204047562.png_pic_center]

// 合并分散的reducers
    let reducer=combineReducers({ 
        homeReducer
        //homeReducer:homeReducer
    })

##### 4、redux 使用合并后的 reducer 中的相关模块里的数据 #####

比如修改调用数据：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cnter]

### （三）把流程整合一下 ###

我们重新新建一个文件夹storenew，然后创建一个文件storenew.js，然后把reducer独立到reducer.js里面。

>>storenew.js
    
    import { createStore} from "redux"
    import reducer from "./reducer.js"
    
    let storenew=createStore(reducer);
    
    export default storenew

>>reducer.js
    
    import tryComReducer from "../compnew/tryComReducer.js"
    import { combineReducers} from "redux"
    
    // 合并分散的reducers
    let reducer=combineReducers({ 
        tryComReducer
    })
    
    export default reducer

然后咱们再新建一个compnew文件，创建一个组件tryCom.jsx，然后创建一个专属于这个组件的reducer（有点类似于vuex中的数据模块仓库 ），命名为tryComReducer.js 。

>>tryCom.jsx
    
    import React, {  Component } from 'react'
    import storenew from "../storenew/storenew.js"
    import {  ADD } from "../storenew/actionType.js"
    
    export default class tryCom extends Component { 
        constructor(props) { 
            super(props)
            this.state = { 
                textname: storenew.getState().tryComReducer.name,
                textage: storenew.getState().tryComReducer.age
            }
        }
        componentDidMount() { 
            storenew.subscribe(() => { 
                this.setState({ 
                    textage: storenew.getState().tryComReducer.age
                })
            })
        }
      
        fun() { 
            storenew.dispatch(ADD(4))
        }
        render() { 
            return (
                <div>
                    <h4>I'm 尝试store的组件.</h4>
                    <p>从store拿到的名字：{ this.state.textname}</p>
                    <p>从store拿到的年龄：{ this.state.textage}</p>
    
                    <button onClick={ this.fun}>点击修改</button>
                </div>
            )
        }
    }

tryComReducer.js放的是分散的reducer的一个部分。最后这些分散的部分在reducer.js中进行了合并。

>>tryComReducer.js
    
    // 数据 actions的修改操作
    import { TRYCOM_ADD} from "../storenew/actionName.js"
    
    let data = { 
        name: "susan",
        age: 19
    }
    
    let tryComReducer = (state = data, action) => { 
        switch (action.type) { 
            case TRYCOM_ADD:
                return { ...state,age:state.age+action.num}
                break;
            default:
                return state;
                break;
        }
    }
    
    export default tryComReducer

其中对修改操作的名字和数据进行了封装。

>>actionType.js
    
    // 将任务名封装的这一步，按自己需要封
    // 不过封的话，能够减少名字之间的耦合性
    import { TRYCOM_ADD} from "./actionName.js"
    
    export let ADD=(num)=>{ 
        return { type:TRYCOM_ADD,num}
    }

>>actionNamw.js
    
    export let TRYCOM_ADD="TRYCOM_ADD"

涉及到的文件如下：  
![在这里插入图片描述][20200821003728145.png_pic_ceter]

要是看不很懂，看看这篇精简版的：[https://editor.csdn.net/md/?articleId=108100611][https_editor.csdn.net_md_articleId_108100611]

# react-redux #

--------------------

上面的写法中，redux与react的耦合度过于高，代码不够简洁（组件中出现了大量的store对象）。而在react中，有一个react的插件，专门用来处理react应用中使用redux的情况，将其进行简化，降低二者之间的耦合度。这个插件叫`react-redux`。

### （一）react-redux插件下载 ###

npm install --save react-redux

### （二）react-redux常用概念 ###

`<Provider/>`组件：把 store 提供给其子组件；

`connect`高阶组件：连接react组件和redux（组件状态要从redux中获取）。

### （三）react-redux使用 ###

1、在index.js中创建Provider：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 11]  
2、在需要使用数据的组件中，把原来我们直接export default class … extends Component改成，  
![在这里插入图片描述][20200820204255808.png_pic_center]

改成在最下方进行暴露：这个坑，注意一下 [个人参考connect的源码解释][connect]  
![在这里插入图片描述][20200820204300640.png_pic_center]

生成数据在props中，形参数是state的数据，当前函数必须return一个对象。（state这个参数名自定，只要保持当前组件里的这个参数在定义和使用时一致即可）  
![在这里插入图片描述][20200820204317481.png_pic_center]

使用数据：  
![在这里插入图片描述][2020082020432993.png_pic_center]

修改数据：  
![在这里插入图片描述][20200820204340108.png_pic_center]

另外，react-redux内置了subscribe，所我们不需要设置react的state然后通过subscribe监听手动修改重设setState的值了。

### （四）完整流程 ###

组件这边、react-redux把redux与组件做连接这边：--------------------

>>index.js
    
    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    // react-redux
    import {  Provider } from "react-redux"
    import storenew from "./storenew/storenew.js"
    
    ReactDOM.render(
      <Provider store={ storenew}>
          <App />
      </Provider>,
      document.getElementById('root')
    );
    serviceWorker.unregister();

>>App.js
    
    import React from 'react';
    import TryCom from "./compnew/tryCom.jsx"
    
    function App() { 
      return (
        <div className="App">
          <TryCom/>
        </div>
      );
    }
    
    export default App;

>>tryCom.jsx
    
    import React, {  Component } from 'react'
    import {  ADD } from "../storenew/actionType.js"
    import {  connect } from "react-redux"
    
    class tryCom extends Component { 
        componentDidMount() { 
            console.log("钩子componentDidMount---只执行一次")
        }
        fun = () => { 
            // console.log("渲染多次")
            this.props.dispatch(ADD(4)) //dispatch方法发出的是异步 Action
        }
        render() { 
            return (
                <div>
                    <h4>I'm 尝试store的组件.</h4>
                    <p>从store拿到的年龄：{ this.props.stateParams.tryComReducer.age}</p>
                    <button onClick={ this.fun}>点击修改</button>
                </div>
            )
        }
    }
    
    export default connect(stateParams => ({  stateParams }))(tryCom)
    // stateParams 参数名自定义，一般设置成state

>>actionType.js  //封装任务
    
    import { TRYCOM_ADD} from "./actionName.js"
    
    export let ADD=(num)=>{ 
        return { type:TRYCOM_ADD,num}
    }

>>actionName.js   //封装任务名
    
    export let TRYCOM_ADD="TRYCOM_ADD"

redux这边：------------------

>>storenew .js
    
    import { createStore} from "redux"
    import reducer from "./reducer.js"
    let storenew=createStore(reducer);
    export default storenew

>>reducer.js
    
    import tryComReducer from "../compnew/tryComReducer.js"
    import { combineReducers} from "redux"
    // 合并分散的reducers
    let reducer=combineReducers({ 
        tryComReducer
    })
    export default reducer

>>tryComReducer.js
    
    import { TRYCOM_ADD} from "../storenew/actionName.js"
    let data = { 
        name: "susan-tryCom",
        age: 19
    }
    // 数据 actions的修改操作
    let tryComReducer = (state = data, action) => { 
        switch (action.type) { 
            case TRYCOM_ADD:
                return { ...state,age:state.age+action.num}
                break;
            default:
                return state;
                break;
        }
    }
    export default tryComReducer

# 高阶组件HOC #

--------------------

### （一）概念 ###

在React组件的构建过程中，常常有这样的场景，**有一类功能需要被不同的组件公用**。

HOC：**参数是组件，返回值也是组件**。 这类组件我们叫做高阶组件（HOC）。

高阶组件的本质是高阶函数，比如js中的 map（） filter（）forEach…

高阶组件（HOC）是 React 中用于**重用组件逻辑**的高级技术。 HOC 本身不是 React API 的一部分。 它们是从 React 构思本质中浮现出来的一种模式。

### （二）使用 ###

例如封装一个功能，在很多个组件中都想使用，注意给这些组件都带一个版权信息，比如：来自于–XXX  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 12]

使用的时候需要修改组件的导出方式：将该组件当成参数传递给高阶组件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 13]

### （三）高阶组件HOC接受props ###

如果组件是被高阶组件导出的，那么在正向传值的时候需要在高阶组件中进行接收然后传递给子组件，这样子组件才能正确收到值。  
![在这里插入图片描述][20200820195952661.png_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 14]  
![在这里插入图片描述][20200820200003714.png_pic_center]

### （四）高阶组件HOC–反向继承 ###

反向继承最核心作用，是**渲染劫持**（拦截了渲染，可以让我们进行条件渲染）。

继承的是传入的参数组件，第二个参数是判断依据。

super.render() 调用父类的render()渲染：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 15]

在暴露组件的时候需要传递参数：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 16]

### （五）来了个小栗子 ###

文件目录：  
![在这里插入图片描述][20200820193913346.png_pic_center]  
不知道为啥，发现要想命名为hoc，这个hoc必须小写。

>>Hocdemo.jsx
    
    import React, {  Component } from 'react'
    
    let Hoc=(Com)=>{ 
        return class Hocdemo extends Component{ 
            render() { 
                return (
                    <div>
                        <Com/>
                        <h4>From: HOC demo.</h4>
                    </div>
                )
            }
        }
    }
    
    export default Hoc

>>Normal.jsx
    
    import React, {  Component } from 'react'
    
    // 引入高阶组件
    import Hoc from "../hoc/Hocdemo.jsx"
    
    class Normal extends Component { 
        render() { 
            return (
                <div>
                    <h4>I'm a normal component.</h4>
                </div>
            )
        }
    }
    
    export default Hoc(Normal)
    // export default Normal
    
    // 高阶组件 参数是一个组件 返回值也是一个组件

然后把Normal.jsx引入到根组件中，调用。

>>App.js
    
    import React from 'react';
    import Normal from "./components/Normal.jsx"
    function App() { 
      return (
        <div className="App">
          <Normal/>
        </div>
      );
    }

![在这里插入图片描述][20200820194626569.png_pic_center]

### （六）反向继承小栗子 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cener]  
![在这里插入图片描述][20200826144027520.png_pic_ceter]

# 总结 #

--------------------

1、在练习redux的时候，我发现了一个细节：咱们在通过action改变状态的时候，是不是`reutrn{...state,其他数据}`，这个`...state`其实不写也是可以的。但大家都习惯性的把它加上。个人理解，是为了防止丢失该模块数据对象中的其他属性，这样我们把需要改变的元素给覆盖改变了，也能把不需要改变的元素保留。

2、高阶组件的参数是一个组件，返回值也是一个组件。高阶组件其实就是组件的另一种写法。

先创建一个高阶组件。使用的话，先引入高阶组件，然后使用高阶组件的规则暴露普通组件。

react中也有封装了一些高阶组件，如果不会写，也得保证自己会用。

3、如果想把高阶组件的文件夹命名为hoc，hoc全小写。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/b61749091f424de8a37b3bcb8adf12c2.png
[20200820200104719.png_pic_center]: /images/20221124/e915a780acc24661bbf8cd5a95ae3e0c.png
[Link 1]: https://blog.csdn.net/c_kite/article/details/79138814
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/4051eee42add4e88bc1107d2cbcf4f2e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221124/31a5f72c60564b99b4d43ea549346cc9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221124/71c0f406e215472e8f6a6090e18feef5.png
[20200820200906718.png_pic_center]: /images/20221124/575a78345d334a9eb7b4ce7a7f1ea8a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221124/8aef930f2169480b99757f2079a5846c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221124/6d7094c13030495681ab6704637dbc11.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221124/ee25483e98764ec4a6ef08c5091647ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221124/195203aee8dc46648675e134b9addd2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221124/16f7a604df3d4c2fa694967df64e4645.png
[20200820203658120.png_pic_center]: /images/20221124/e0866e9756e64147af67702f4caa7066.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221124/c8504b447e644a8384195c1cad9c33ef.png
[20200820153400853.png_pic_centr]: https://img-blog.csdnimg.cn/20200820153400853.png#pic_centr
[20200820153431357.png_pic_ceter]: /images/20221124/4f0bc4f1c31f40f99415fe2f96dec92e.png
[2020082015483646.png_pic_center]: /images/20221124/e7e7f8bba7a44fb4a1d03cc6eee536a9.png
[20200820204021484.png_pic_center]: /images/20221124/62879d7e34a144bcb24d8c5b34cf4671.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221124/c6d02b39c685476598d5157d81e79392.png
[20200820204047562.png_pic_center]: /images/20221124/650ace690b504414a303b3542a6ba4ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cnter]: /images/20221124/5408b55550ec491dacd0094866cb01b1.png
[20200821003728145.png_pic_ceter]: /images/20221124/14ff161c689749368a18ab03b2116267.png
[https_editor.csdn.net_md_articleId_108100611]: https://editor.csdn.net/md/?articleId=108100611
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221124/e1b3d57a31d143eaa0459c61869f4a1c.png
[20200820204255808.png_pic_center]: /images/20221124/09f5ea3b171143b8a3ead5c2b65c3adf.png
[connect]: https://www.cnblogs.com/hhhyaaon/p/5863408.html
[20200820204300640.png_pic_center]: /images/20221124/16c4b1647868452395ed9d43fa7acd2e.png
[20200820204317481.png_pic_center]: /images/20221124/4350eaeb2f5e4480b4ccaddcfdb47b20.png
[2020082020432993.png_pic_center]: /images/20221124/57d3e44df2694ee393c6a9b34a2a3a76.png
[20200820204340108.png_pic_center]: /images/20221124/a4d41a56806649f99aaad4c61ffabe88.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221124/7a7a894444534317845d142a1ac55e40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20221124/fc77950bcd724c6b864f7b07a36a20ab.png
[20200820195952661.png_pic_center]: /images/20221124/9c35eeecd7134cddb5246388a1b20306.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20221124/b3bee091ac8c4b9b943833c0c8c7f026.png
[20200820200003714.png_pic_center]: /images/20221124/bcf9cb83b371450a9841d398f14b0d8a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 15]: /images/20221124/fa5abba506bd428ba7e03e68f8dd33e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_center 16]: /images/20221124/4e826eaa498e4924a145293f8d32e78a.png
[20200820193913346.png_pic_center]: /images/20221124/2ad33ed6e5a84857b20ce579829bef48.png
[20200820194626569.png_pic_center]: /images/20221124/03e6ea266e5347e78fd4b9e66d6d7e81.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70_pic_cener]: /images/20221124/f1c32c5e507a4f8eac24e41020bd603e.png
[20200826144027520.png_pic_ceter]: /images/20221124/06ec44f95d7f4a7e9aab0c2431a4b79e.png