community/guides/react-higher-order-components

React 高阶组件（Higher-Order Components，HOC）是一种常用的设计模式，它允许你将组件的部分逻辑提取到可重用的高阶组件中，从而实现组件的复用和逻辑的解耦。下面是一些关于 React 高阶组件的基础知识和使用技巧。

什么是高阶组件？

高阶组件是 React 中的一种设计模式，它接收一个组件作为参数，并返回一个新的组件。这个新组件可以扩展或修改原组件的行为。

高阶组件的特点

• 复用：通过将组件的通用逻辑提取到高阶组件中，可以减少代码重复，提高代码复用性。
• 解耦：将组件的逻辑与UI分离，使得组件更加灵活和可维护。
• 扩展性：可以在不修改原组件的情况下，扩展组件的功能。

使用高阶组件

以下是一个简单的例子，展示如何使用高阶组件来创建一个带有加载状态的组件：

function withLoading(WrappedComponent) {
  return class extends React.Component {
    render() {
      const { isLoading } = this.props;
      return isLoading ? <LoadingIndicator /> : <WrappedComponent {...this.props} />;
    }
  };
}

在这个例子中，withLoading 是一个高阶组件，它接收一个组件 WrappedComponent 作为参数，并返回一个新的组件。新组件会根据 isLoading 属性的值，决定是否显示加载指示器。

资源链接

如果你想要了解更多关于 React 高阶组件的知识，可以参考以下资源：

• React 官方文档 - 高阶组件
• [MDN Web Docs - React](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Frameworks React)

React 高阶组件示例