介绍
高阶组件(HOC)是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分,它是一种基于 React 的组合特性而形成的设计模式。
React 官网对高阶组件的定义描述得很清楚。高阶组件不是 React 所独有的,它只是一种设计模式,简单来说就是为了复用代码而对组件进行封装。
要搞清楚高阶组件,先得了解下高阶函数,这样一类比下就很容易理解了。
- 高阶函数:函数的参数或者返回值为函数,这个函数就是高阶函数。
- 高阶组件:函数的参数为组件,返回一个组件,这个函数就是高阶组件。
高阶函数
高阶函数(Higher Order Function),按照定义,是至少满足下列一个条件的函数:
- 函数作为参数传入
- 返回值为一个函数
参数为函数的例子:
let pow = function square(x) {
return x * x;
};
let array = [1, 2, 3, 4, 5, 6, 7, 8];
let newArr = array.map(pow); //直接传入一个函数
let newArr = array.map((item) => {return item * item}); //传入一个箭头函数
//返回的一个函数
alert(newArr); // [1, 4, 9, 16, 25, 36, 49, 64]
返回值为函数的例子:
/* 函数柯里化 */
let add = function(x) {
return function(y) {
return function(z){
return x+y+z;
};
};
};
高阶组件
高阶组件(Higher Order Component),是满足下列所有个条件的函数:
- 组件作为参数传入
- 返回值为一个组件
包裹组件
// A/index.js
import React from 'react';
import './index.css';
// 定义一个函数
// 传入一个组件作为参数
function A(WrappedComponent) {
// 返回一个组件
return class A extends React.Component {
constructor (props) {
super(props);
this.state = {};
}
render () {
return (
<div className="a-container">
<div className="header">
<div className="title">提示</div>
<div className="close">X</div>
</div>
<div>
<!-- 在这里使用一下 -->
<WrappedComponent />
</div>
</div>
)
}
}
}
export default A
内部组件
// B/index.js
import React from 'react';
import A from '../A/index.js';
import './index.css';
class B extends React.Component {
render() {
return (
<div className="wrap">
<img src="https://xxx.xxx.png" alt="" />
</div>
);
}
}
<!--调用A()方法去包裹我们的B组件。-->
export default A(B);