236 lines
8.8 KiB
Markdown
236 lines
8.8 KiB
Markdown
# 2. 高阶组件
|
|
|
|
高阶组件英语全称为 *Higher-Order Components*，简称 *HOC*，所谓高阶组件，是 *React* 中一种复用逻辑的技巧。
|
|
|
|
高阶组件的学习，主要有下面 *2* 个点：
|
|
|
|
- 认识到高阶组件并非一个组件，而是增强组件功能的一个函数
|
|
- 高阶组件的作用是对多组件公共逻辑进行**横向**抽离
|
|
|
|
|
|
|
|
## 高阶组件是一个函数
|
|
|
|
这个点非常有意思，很多人一看到这个名字，自然的会认为高阶组件是一个组件，但是往往有些名字具有欺骗性，就像 *JavaScript* 会被误认为和 *Java* 相关一样。
|
|
|
|
官方对高阶组件给出了很明确的定义，甚至还给了一个公式：
|
|
|
|
>**高阶组件是参数为组件，返回值为新组件的函数。**
|
|
>
|
|
>```js
|
|
>const EnhancedComponent = higherOrderComponent(WrappedComponent);
|
|
>```
|
|
|
|
|
|
|
|
## 高阶组件要做的事情
|
|
|
|
高阶组件作为一个函数，接收你传入的组件，然后又返回一个新组件给你，那你猜都猜得到在高阶组件的内部肯定是对你原有的组件做了一些增强操作，然后为你返回的是增强后的组件。
|
|
|
|
那什么又叫做对组件**公共逻辑**进行**横向抽离**呢？看下图：
|
|
|
|
|
|
|
|
假设我们这里有三个组件，每个组件有一部分**公共逻辑**，一部分该组件自身的**业务逻辑**，那么很明显每个组件都书写一遍这样的公共逻辑是不划算的。
|
|
|
|
作为一个程序员，我们自然而然想到的就是将这部分公共逻辑提取出来。
|
|
|
|
早期的 *React* 采用的是 *mixins* 来解决这种横切关注点相关的问题。*Mixins* 的原理可以简单理解为将一个 *mixin* 对象上的方法增加到组件上。
|
|
|
|
```js
|
|
const mixinDefaultProps = {}
|
|
const ExampleComponent = React.createClasss({
|
|
mixins: [mixinDefaultProps],
|
|
render: function(){}
|
|
})
|
|
```
|
|
|
|
眼熟不？没错，在 *Vue2.x* 中也支持 *mixins* 这样的混合注入。
|
|
|
|
不过这只能在 *React* 的旧语法 *React.createClasss* 中使用，目前已经不再推荐使用了。
|
|
|
|
>*mixins 问题*
|
|
>
|
|
>- *mixins* 引入了隐式的依赖关系
|
|
>
|
|
>你可能会写一个有状态的组件，然后你的同事可能添加一个读取这个组件 *state* 的 *mixin*。几个月之后，你可能希望将该 *state* 移动到父组件，以便与其兄弟组件共享。你会记得更新这个 *mixin* 来读取 *props* 而不是 *state* 吗？如果此时，其它组件也在使用这个 *mixin* 呢？
|
|
>
|
|
>- *mixins* 引起名称冲突
|
|
>
|
|
>无法保证两个特定的 *mixin* 可以一起使用。例如，如果 *FluxListenerMixin* 和 *WindowSizeMixin* 都定义来 *handleChange( )*，则不能一起使用它们。同时，你也无法在自己的组件上定义具有此名称的方法。
|
|
>
|
|
>- *mixins* 导致滚雪球式的复杂性
|
|
>
|
|
>每一个新的需求都使 *mixins* 更难理解。使用相同 *mixin* 的组件会随着时间的推移变得越来越耦合。任何新功能都可以使用 *mixins* 添加到所有组件中。渐渐地，封装边界被侵蚀了，由于很难更改或删除现有的 *mixins*，它们变得越来越抽象，直到没有人理解它们是如何工作的。
|
|
>
|
|
>关于 *mixin* 的讨论，可以参阅官方文档：*https://zh-hans.reactjs.org/blog/2016/07/13/mixins-considered-harmful.html*
|
|
|
|
之后 *React* 推出了高阶组件的抽离方式，如下图所示：
|
|
|
|
<img src="https://xiejie-typora.oss-cn-chengdu.aliyuncs.com/2022-11-30-054950.png" alt="image-20221130134950363" style="zoom:50%;" />
|
|
|
|
在高阶组件中，接收一个组件作为参数，然后在高阶组件中会返回一个新组件，新组件中会将公共逻辑附加上去，传入的组件一般作为新组件的视图。
|
|
|
|
下面是一个具体的示例：
|
|
|
|
```js
|
|
import React from 'react';
|
|
|
|
function ChildCom1(props) {
|
|
return (
|
|
<div>
|
|
子组件1
|
|
姓名：{props.name}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ChildCom1;
|
|
```
|
|
|
|
```js
|
|
import React from 'react';
|
|
|
|
function ChildCom2(props) {
|
|
return (
|
|
<div>
|
|
子组件2
|
|
年龄：{props.age}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ChildCom2;
|
|
```
|
|
|
|
上面的代码中，我们有两个子组件，父组件在使用这两个子组件时，一个需要传入 *name*，另一个需要传入 *age*
|
|
|
|
正常来讲，父组件使用子组件的方式如下：
|
|
|
|
```js
|
|
<ChildCom1 name="xiejie"/>
|
|
<ChildCom2 age={18}/>
|
|
```
|
|
|
|
但是现在我们新增了一个需求，那就是每个子组件需要记录创建和销毁时的日志。很显然，对于每个子组件来讲，日志相关的逻辑都是相同的，也就算是公共逻辑，没有必要在每个组件中引入一份，因此这里我们来使用 *HOC* 的方式抽离这一段公共逻辑，如下：
|
|
|
|
```js
|
|
import { useEffect } from "react";
|
|
import { formatDate } from "../utils/tools"
|
|
|
|
// 高阶组件是一个函数，接收一个组件作为参数
|
|
// 返回一个新的组件
|
|
function withLog(Com) {
|
|
// 返回的新组件
|
|
return function NewCom(props) {
|
|
// 抽离的公共逻辑
|
|
useEffect(() => {
|
|
console.log(`日志：组件${Com.name}已经创建，创建时间${formatDate(Date.now(),"year-time")}`);
|
|
return function(){
|
|
console.log(`日志：组件${Com.name}已经销毁，销毁时间${formatDate(Date.now(),"year-time")}`);
|
|
}
|
|
},[]);
|
|
// 一般来讲，传入的组件会作为新组件的视图
|
|
return <Com {...props}/>;
|
|
};
|
|
}
|
|
|
|
export default withLog;
|
|
```
|
|
|
|
在上面的高阶组件中，唯一需要注意的就是返回的新组件在接受了 *props* 后，一般需要原封不动的传递给原来的组件。
|
|
|
|
有了这个高阶组件后，我们就可以对原有的子组件进行加强，如下：
|
|
|
|
```js
|
|
import ChildCom1 from "./components/ChildCom1"
|
|
import ChildCom2 from "./components/ChildCom2"
|
|
import withLog from "./HOC/withLog"
|
|
import { useState } from "react"
|
|
|
|
// 对原有的子组件进行加强操作
|
|
const WrapChild1 = withLog(ChildCom1);
|
|
const WrapChild2 = withLog(ChildCom2);
|
|
|
|
function App() {
|
|
const [toggle, setToggle] = useState(true);
|
|
const child = toggle ? <WrapChild1 name="xiejie" /> : <WrapChild2 age={18} />;
|
|
return (
|
|
<div>
|
|
{/* 按钮对两个组件进行切换，查看日志功能 */}
|
|
<button onClick={() => setToggle(!toggle)}>show/hide</button>
|
|
{child}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|
|
```
|
|
|
|
实际效果如下：
|
|
|
|
|
|
|
|
高阶组件还可以进行嵌套操作，比如我有两段公共逻辑，但是这两段公共逻辑写在一个高阶组件中又不太合适，因此我们就可以拆分成两个高阶组件，例如我们新增一个 *withTimer* 的高阶组件：
|
|
|
|
```js
|
|
import { useState, useEffect } from "react";
|
|
|
|
// 高阶组件是一个函数，接收一个组件作为参数
|
|
// 返回一个新的组件
|
|
function withTimer(Com) {
|
|
// 返回的新组件
|
|
return function NewCom(props) {
|
|
// 抽离的公共逻辑
|
|
const [counter, setCounter] = useState(1);
|
|
|
|
useEffect(() => {
|
|
const stopTimer = setInterval(() => {
|
|
console.log(counter);
|
|
setCounter(counter + 1);
|
|
}, 1000);
|
|
return function () {
|
|
clearInterval(stopTimer);
|
|
};
|
|
});
|
|
|
|
// 一般来讲，传入的组件会作为新组件的视图
|
|
return <Com {...props} />;
|
|
};
|
|
}
|
|
|
|
export default withTimer;
|
|
```
|
|
|
|
之后在使用高阶组件时，就可以采取嵌套的方式来使用：
|
|
|
|
```js
|
|
const WrapChild1 = withTimer(withLog(ChildCom1));
|
|
const WrapChild2 = withTimer(withLog(ChildCom2));
|
|
```
|
|
|
|
## 高阶组件的现状
|
|
|
|
高阶组件的出现，解决了组件之间如何横向抽离公共逻辑的问题，因此你也能过在各大生态库中见到高阶组件的身影。
|
|
|
|
例如在 *react-redux* 中的 *connect* 用法，这里 *connect* 明显返回的就是一个高阶组件，之后开发者可以传入自己的组件进行组件强化。
|
|
|
|
```js
|
|
connect()(MyComponent)
|
|
connect(mapState)(MyComponent)
|
|
connect(mapState, null, mergeProps, options)(MyComponent)
|
|
```
|
|
|
|
>*https://react-redux.js.org/api/connect#connect-returns*
|
|
|
|
不过有意思的是，如果你查阅官网，会发现官网给的示例基本都是类组件的示例。
|
|
|
|
>*https://zh-hans.reactjs.org/docs/higher-order-components.html*
|
|
|
|
没错，*HOC* 实际上就是为了解决早期**类组件**的公共逻辑抽离的问题，那个时候在 *React* 中类组件占主流。但是随着目前 *Hook* 的出现，函数组件开始占主流，*React* 开发的思想也从面向对象转为了函数式编程，抽离公共逻辑也能够非常简单的使用自定义 *Hook* 来实现了。
|
|
|
|
因此你在 *react-redux* 官网也能看到这样一句话：
|
|
|
|
<img src="https://xiejie-typora.oss-cn-chengdu.aliyuncs.com/2022-11-30-055117.png" alt="image-20221130135117223" style="zoom:50%;" />
|
|
|
|
-*EOF*- |