React.js 中如何使用高阶组件

在 React.js 中，高阶组件（Higher-Order Component，简称 HOC）是一种用于复用组件逻辑的高级技巧。高阶组件是一个函数，它接收一个组件作为参数，并返回一个新的组件。通过这种方式，我们可以在多个组件之间共享相同的逻辑。

下面是一个简单的示例，展示了如何在 React.js 中使用高阶组件：

1. 首先，创建一个高阶组件 withDataFetching，它接收一个组件作为参数，并返回一个新的组件：

import React from 'react';

function withDataFetching(WrappedComponent) {
  return class extends React.Component {
    state = {
      data: null,
    };

    componentDidMount() {
      // 在这里获取数据，例如从 API 获取
      fetch('https://api.example.com/data')
        .then((response) => response.json())
        .then((data) => this.setState({ data }));
    }

    render() {
      // 将数据作为 props 传递给 WrappedComponent
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
}

2. 然后，创建一个简单的组件 MyComponent，它将接收数据作为 props：

import React from 'react';

function MyComponent({ data }) {
  return (
    <div>
      {data ? (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

3. 最后，使用 withDataFetching 高阶组件来增强 MyComponent 的功能：

import React from 'react';
import withDataFetching from './withDataFetching';

const EnhancedMyComponent = withDataFetching(MyComponent);

export default EnhancedMyComponent;

现在，你可以在应用程序中使用 EnhancedMyComponent，它将自动获取数据并将其传递给 MyComponent。

这就是在 React.js 中使用高阶组件的基本方法。你可以根据需要创建更复杂的高阶组件，以便在多个组件之间共享逻辑。