React高阶组件(HOC)入门示例

什么是高阶组件?

简称：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官方高阶组件相关文档