一：定义

1：高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，基于 React 的组合特性而形成的设计模式

2：高阶组件（HOC）就是一个函数，组件作为参数，并返回一个新的组件，将组件转换为另一个组件，称为纯组件

3：可以接受任何动态提供的子组件，但它们不会修改或复制其输入组件中的任何行为

function withSubscription(WrappedComponent, selectData) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: selectData(DataSource, props)
      };
    }

    render() {
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };

// 使用
const BlogPostWithSubscription = withSubscription(BlogPost,
  (DataSource, props) => DataSource.getBlogPost(props.id));

二：优缺点

1：优点：逻辑服用、不影响被包裹组件的内部逻辑

2：缺点：hoc传递给被包裹组件的props容易和被包裹后的组件重名，进而被覆盖

三：适用场景

1：代码复用，逻辑抽象

2：渲染劫持

3：State 抽象和更改

4：Props 更改

const withFetching = fetching => WrappedComponent => {
    return class extends React.Component {
        state = {
            data: [],
        }
        async UNSAFE_componentWillMount() {
            const data = await fetching();
            this.setState({
                data,
            });
        }
        render() {
            return <WrappedComponent data={this.state.data} {...this.props} />;
        }
    }
}

// pages/a.js
export default withFetching(fetching('science-fiction'))(MovieList);
// pages/b.js
export default withFetching(fetching('action'))(MovieList);