什么是高阶成分（HOC）

高阶组件（Higher-Order Component，HOC）是 React 中一种常见的模式，用于重用组件逻辑。它实际上是一个函数，接受一个组件作为输入，并返回一个新的组件。

通过高阶组件，我们可以封装通用的功能并将其应用到多个组件中，从而提高组件的复用性和可维护性。

下面是一个简单的高阶组件示例：

import React from 'react';

// 高阶组件
const withDataFetching = (WrappedComponent, dataSource) => {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: null,
        isLoading: true
      };
    }

    componentDidMount() {
      // 从数据源获取数据
      fetch(dataSource)
        .then(response => response.json())
        .then(data => this.setState({ data, isLoading: false }))
        .catch(error => console.log(error));
    }

    render() {
      return (
        <div>
          {this.state.isLoading ? <p>Loading...</p> : <WrappedComponent data={this.state.data} {...this.props} />}
        </div>
      );
    }
  };
};

// 普通组件
const MyComponent = ({ data }) => {
  return (
    <div>
      <h1>Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

// 使用高阶组件包装普通组件
const MyComponentWithFetching = withDataFetching(MyComponent, 'https://api.example.com/data');

export default MyComponentWithFetching;

在上面的示例中，`withDataFetching` 是一个高阶组件，它接受一个普通组件 `WrappedComponent` 和一个数据源 `dataSource` 作为参数，并返回一个新的组件。这个新的组件会负责从数据源获取数据，并将数据作为 prop 传递给 `WrappedComponent`。

通过高阶组件，我们可以将数据获取逻辑与显示逻辑分离，使得 `MyComponent` 只关注于如何展示数据，而数据获取的逻辑则交给了高阶组件处理。

总之，高阶组件是一个非常有用的模式，可以帮助我们在 React 中实现逻辑复用和组件抽象，从而提高代码的灵活性和可维护性。