React 高阶组件（Higher-Order Components，HOC）是一种复用代码、逻辑和UI设计的模式。它允许你将组件的部分逻辑提取到可重用的高阶组件中，使得组件更加模块化。

什么是高阶组件？

高阶组件是函数式编程中的一种模式，它接收一个组件作为参数，并返回一个新的组件。简单来说，就是一个组件生成器。

高阶组件的用途

  • 代码复用：将组件共用的逻辑抽象出来，减少重复代码。
  • 逻辑复用：将组件共用的状态管理逻辑抽象出来，提高代码的可维护性。
  • 抽象组件：将组件的某些功能抽象出来，使得组件更加灵活。

示例

以下是一个使用高阶组件的简单示例：

import React from 'react';

const withLoading = (WrappedComponent) => {
  return class extends React.Component {
    state = {
      isLoading: true,
    };

    componentDidMount() {
      setTimeout(() => {
        this.setState({ isLoading: false });
      }, 2000);
    }

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

const MyComponent = ({ isLoading }) => {
  return (
    <div>
      {isLoading ? <p>Loading...</p> : <p>Content loaded</p>}
    </div>
  );
};

const MyLoadingComponent = withLoading(MyComponent);

export default MyLoadingComponent;

在上面的例子中，withLoading 是一个高阶组件，它接收 MyComponent 作为参数，并返回一个新的组件 MyLoadingComponent。这个新的组件包含了加载状态的逻辑。

扩展阅读

更多关于 React 高阶组件的内容，请参考React 高阶组件详解。

React_HOC