高阶组件（Higher-Order Components）教程 📚

高阶组件是 React 中一种强大的复用组件逻辑的技巧，通过函数封装组件，实现功能扩展与组件共享。以下是核心概念与使用场景：

1. 什么是高阶组件？

高阶组件（HOC）是一个接受组件作为参数并返回新组件的函数。它不修改原始组件，而是通过包装增强其功能。
✅ 适用场景：

• 封装复用逻辑（如数据获取、权限校验）
• 动态注入 props 或状态
• 实现组件功能的差异化定制

2. HOC 的核心用途

• 代码复用：避免重复编写相似逻辑
• 逻辑封装：将业务逻辑抽离为独立函数
• 组件增强：为现有组件添加新功能

3. HOC 示例

// 定义 HOC
function withTheme(WrappedComponent, theme) {
  return function(props) {
    return <WrappedComponent {...props} theme={theme} />;
  };
}

// 使用 HOC
const ThemedButton = withTheme(Button, "dark");

4. 扩展阅读

• React 官方文档：高阶组件
• 深入理解 React HOC 原理

如需进一步学习组件模式，可参考本站其他教程 🚀