共计 1148 个字符，预计需要花费 3 分钟才能阅读完成。
什么是高阶组件?
简称：HOC
全称：High Order Component
高阶组件其实不是什么高深莫测的东西，它类似于高阶函数，就是一个纯函数，它会接受一个组件作为参数，然后返回一个新的组件。
什么时候使用 HOC?
在 React 中，组件是代码复用的主要单元。但是业务开发过程中难免会遇到一些个性化的需求，此时如果再去重新开发一个组件，会让后续的维护成本变高。
接下来举一个简单的例子说明
假设有需求如下
v1.0：页面上显示 10 行 ’hello, world!’
v2.0：页面上要多加 10 行‘HELLO,WORLD!’
要实现上述的需求，第一个版本会写一个显示 hello,world！的组件，这个没有问题。第二个版本可以选择写一个显示 HELLO,WORLD！的组件，或者在第一个组件的基础上包装一下，只给第一个组件返回的数据做一个转成大写的处理。
我用 HOC 的方式写一下示例代码，很快就能明白
v1.0 的组件示例代码如下：
class HelloWorld extends React.Component {
render() {
return “hello,world!”
}
}
ReactDOM.render(<HelloWorld />, document.querySelector(“#root”))
v2.0 的组件示例代码如下：
// HOC 函数，实现 v2.0 版本的需求
export const toUpperCaseHoc = function(WrappedComponent) {
return class Hoc extends React.Component {
render() {
const {text} = this.props;
const text2Upper = text.toUpperCase();
return <WrappedComponent text={text2Upper} />;
}
};
};
// v1.0 版本实现的组件
export class HelloWorld extends React.Component {
render() {
return this.props.text;
}
}
// 用 HOC 包装后生成的新的组件，符合 v2.0 版本的需求，同时包含了 v1.0 的其它功能
const HelloWorld2Upper = toUpperCaseHoc(HelloWorld);
ReactDOM.render(<HelloWorld2Upper text=”hello,world!” />, document.querySelector(‘#root’));
总结
业务开发中可能会有一些功能大部分逻辑相似，部分个性化，这个时候可以考虑一下是不是可以开发一个基础组件，在基础组件的基础上去增加一些个性化的需求。
最后，一个 HOC 最好只做一件事。
可以参考：React 官方高阶组件相关文档
