React高阶组件

高阶组件（HOC）是React中用于复用组件逻辑的一种高级技术。它是一个以组件作为参数并返回一个新组件的函数。

下面是一个简单的高阶组件示例，它将传入组件的props传递给一个新组件，并附加一个额外的extraProp属性：

import React from 'react';
 
// 高阶组件工厂函数
const enhance = (WrappedComponent) => {
  class HOC extends React.Component {
    render() {
      // 将WrappedComponent的props和新的props都传给它
      return <WrappedComponent {...this.props} extraProp="new prop" />;
    }
  }
 
  return HOC;
};
 
// 被包装的组件
const MyComponent = (props) => {
  return <div>{props.extraProp}</div>;
};
 
// 创建包装后的组件
const MyEnhancedComponent = enhance(MyComponent);
 
// 使用包装后的组件
export default () => {
  return <MyEnhancedComponent />;
};

在这个例子中，enhance函数是一个高阶组件工厂，它接收一个组件WrappedComponent作为参数，并返回一个新的高阶组件HOC。这个新组件在渲染时会将它接收到的所有props以及一个额外的extraProp属性传递给WrappedComponent。这样，我们就能复用enhance中的逻辑，而不必在每个组件内部手动添加这个属性。