简介

什么是高阶组件？

高阶组件（简称 HOC 或 HOCs）曾是，且至今仍是 React 中的核心概念之一。它们允许你实现包含可复用逻辑的组件，其设计思想源自函数式编程中的 高阶函数。高阶函数是指接受一个函数作为参数，并返回另一个函数的函数。在 React 中，这一思想被应用于组件之上，HOC 的名称也正是由此而来。

下面我们通过一个示例来更好地理解这个概念：

1const withFormatting = (WrappedComponent) => {
2    return class extends React.Component {
3        bold = (string) => {
4            return <strong>{string}</strong>;
5        };
6        italic = (string) => {
7            return <em>{string}</em>;
8        };
9        render() {
10            return <WrappedComponent bold={this.bold} italic={this.italic} />;
11        }
12    };
13};

我们定义了一个名为 withFormatting 的函数，它接收一个 React 组件作为参数，并返回一个新的 React 组件。这个新组件会渲染传入的组件，同时为其注入 bold 和 italic 两个属性。被包装的组件就可以直接使用这些 props：

1const FormattedComponent = withFormatting(({ bold, italic }) => (
2    <div>
3        这段文字是 {bold('加粗')} 和 {italic('斜体')} 的。
4    </div>
5));

让我们来看并运行这个示例。

智能组件与无状态组件

通常，高阶组件可用于封装通用逻辑，这与 智能组件 和 无状态组件 的设计理念密切相关。
智能组件（也包括 HOCs）主要用于：

• 展现业务逻辑
• 处理 API 通信
• 管理行为逻辑

而 无状态组件 通常只接收静态的 props，内部逻辑极简，仅用于展示内容。例如，根据数据决定显示用户头像还是默认占位图。有时我们也把智能组件称为 容器组件，把无状态组件称为 展示组件 或 布局组件。

为什么要这样划分？将业务逻辑与展示逻辑明确分离，有助于组件化开发。这样我们可以创建完全不了解 API 的展示组件，它们只需负责渲染传入的数据，而不关心数据来源；同时，容器组件也能专注于处理业务逻辑，无需关注数据最终如何呈现。