高阶组件（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 中实现逻辑复用和组件抽象，从而提高代码的灵活性和可维护性。
