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