一、高阶函数
在了解高阶组件之前首先了解一下高阶函数
高阶函数有两个特点：
- 函数可以作为参数被传递
setTimeout(() => {
console.log(123);
}, 1000);
- 函数可以作为返回值被输出
function foo(x) {
return function() {
return x;
}
}
看完上面两个例子就明白了什么叫高阶函数了。实际上高阶函数的应用场景很多，像setTimeout、setInterval这样的时间函数，我们熟悉的操作数组的一些方法（map、some、filter）等也是高阶函数。
二、高阶组件（High Order Component，HOC）
高阶组件就是接收一个组件作为参数并返回一个新组件的函数。
注：高阶组件是一个函数，并不是一个组件
三、高阶组件的实现
例子
image.png
上面的图片有两个组件，可以看到它们除了白色内容区域不同之外，别的部分都是相同的，这时我们可以使用高阶组件来实现它。
步骤：
-
React 项目目录结构如下：
image.png - components 文件夹放置我们的组件
A.js
import React, { Component } from 'react';
export default class A extends Component {
render() {
return (
<div className="box">
<header className="head">头部</header>
<div className="content">
</div>
</div>
)
}
}
- 把 A 组件挂载到页面上，
App.js
import React from 'react';
import A from './components/A';
import './index.css';
class App extends React.Component {
render() {
return(
<div className="out-box">
<A />
</div>
)
}
}
export default App;
启动项目后页面的效果：
image.png
可以看到现在的效果离我们想要的效果不远了，我们只需要将 A 组件改写成一个函数就能实现我们所要的高阶组件了。
- 改写后的
A.js
import React, { Component } from 'react';
// hocA函数接收一个组件参数
function hocA(Wrapper) {
return class A extends Component {
render() {
return (
<div className="box">
<header className="head">头部</header>
<div className="content">
{/* 将组件挂载到相应的位置即可 */}
<Wrapper />
</div>
</div>
)
}
}
};
export default hocA;
那么现在组件 A 就是一个高阶组件了，那么怎么使用呢，很简单
B.js
import React, { Component } from 'react';
// 引入该高阶组件
import hocA from './A';
class B extends Component {
render() {
return (
<div>
这是B组件
</div>
)
}
}
// 将组件作为参数传入高阶组件即可
export default hocA(B);
同理，C.js也是这么改写。改写完后将 B、C 组件挂载到页面上
App.js
import React from 'react';
import B from './components/B';
import C from './components/C';
import './index.css';
class App extends React.Component {
render() {
return(
<div className="out-box">
<B />
<C />
</div>
)
}
}
export default App;
-
启动项目
image.png
四、装饰器的语法来使用高阶组件
下面介绍使用高阶组件的第二种方法，使用装饰器：@高阶组件名。但是 React 项目默认是不支持装饰器语法的，所以我们需要安装一个插件同时修改一下配置。
- 暴露出 React 项目的配置文件：
npm run eject - 安装插件：
yarn add @babel/plugin-proposal-decorators -D - 修改 package.json 中 babel 的配置：
"babel": {
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }]
],
"presets": [
"react-app"
]
},
- 修改使用方法：
B.js
import React, { Component } from 'react';
// 引入该高阶组件
import hocA from './A';
// 装饰器语法使用该高阶组件
@hocA
class B extends Component {
render() {
return (
<div>
这是B组件
</div>
)
}
}
// 直接导出该组件
export default B;
同理 C.js 也是这么修改。重新启动项目，效果和之前一样。
至此一个简单的高阶组件便实现了。那么我们为什么需要高阶组件，原因就是当多个组件都需要某个相同的功能，使用高阶组件可以减少重复实现。
