嘿，老友，今天咱们聊聊 React 的三大复用技巧——高阶组件、Render Props 和自定义 Hook。 你可Neng会想：这三者到底有啥区别？别急，我会用Zui轻松的方式告诉你。 先说一句：这些技术dou旨在解决同一个问题——组件之间的逻辑复用。 但实现方式、适用场景、性Neng感受dou不一样。 我们一起慢慢拆开来kan吧。

高阶组件其实就是一个函数，它接受一个组件作为参数，返回一个新的组件。 这个新组件会包装原来的那个，给它加上一层额外的功Neng或数据。 常见的例子是 withRouter、withAuth 等等。 它的核心思想是“包装”，就像给旧衣服加个帽子，让它变得geng酷。

1️⃣ 代码复用简单直观——只要把业务逻辑抽出来包装即可。 2️⃣ Ke以在不改动原组件代码的情况下注入功Neng，保持原有业务逻辑干净。 3️⃣ 支持传递额外参数，让包装geng灵活。

1️⃣ 嵌套层级会暴增，Ru果你连续使用三四个 HOC，树形结构就会hen深，kan着让人头疼。 2️⃣ ref 无法直接穿透到被包装组件，需要额外处理。 3️⃣ 性Neng上有时会产生多余渲染，因为每次包裹dou会创建一个新的 React 节点。

Render Props 的核心是“把渲染逻辑当作 prop 传进去”。 也就是说一个组件通过 prop 接收一个函数，然后在内部调用这个函数来决定渲染什么内容。 举个例子：MouseTracker 通过 render prop 把鼠标坐标传给子组件，让它自己决定怎么展示。

1️⃣ Neng让父级完全控制子级 UI，灵活度极高。 2️⃣ 没有额外的包装层级，只是在同一层级调用函数，所以对树结构友好。

1️⃣ 每次 render 时dou会生成一个新的函数，Ru果没有Zuo记忆化，可Neng导致性Neng下降。 2️⃣ 对初学者来说语法稍微复杂一点，需要理解“函数式 props”。

Hook 是从 React v16.8 开始正式发布的新特性，用来在函数组件里复用状态和副作用逻辑。 自定义 Hook 就像是把一段可复用的业务抽成了一个独立的小模块，然后在需要的时候直接调用 useXXX 就Neng拿到结果。

说实话，hen多技术文章被搜索引擎忽略，其原因之一是关键词竞争激烈，又或者文章太长、重复率高导致算法判定为“低质量内容”。Ru果你想让自己的博客geng容易被发现，就需要注意标题优化、内部链接以及原创度。

1️⃣ 不产生额外的 DOM 或 JSX 层级，保持渲染树简洁； 2️⃣ Ke以轻松共享状态和副作用，比如登录状态、网络请求等； 3️⃣ 与 TypeScript 配合效果Zui佳，类型推导自然； 4️⃣ 性Neng上相对优秀，因为 Hook 在同一 component 内部执行，无需创建新的节点。

1️⃣ 必须遵守 Hook 的规则：只Neng在顶层调用，不可放在条件语句中；否则 React 会报错； 2️⃣ 与类组件交互时需要使用 Hooks 包装库或者将类 为函数才Neng共存； .

-> 包装 & 注入功Neng；易读，但层级增多；适合跨越多处需要相同增强逻辑时。

-> 控制 UI 输出；无嵌套，但回调重建需注意 memo 化。

-> 状态 & 副作用共享；Zui轻量，没有额外层级；推荐首选方案。

# 用 HOC Zuo示例：

# 用 Render Props Zuo示例：

# 用自定义 Hook Zuo示例：

I敢肯定，你一定好奇：到底哪种方案geng快？答案不是绝对，也取决于实际情况。但Ke以归纳几个关键点：

- HOC 会增加一次渲染节点，对深度嵌套尤其敏感；Ru果你只需要一次包装，没大碍，但连串叠加就像打卡地铁站一样累人。

- Render Props 没有额外节点，但每次 render dou会重新生成 callback，Ru果没有记忆化，hen容易触发全量geng新。

- Hook 则天然Zui轻量，只是在同一 component 内部Zuo state/side-effect 管理，无需创建新节点，也不会产生回调重建的问题。因此，在大多数情况下它是性Neng上Zui稳妥的一招。

# 当你想快速给Yi有类组件添加功Neng，并且项目里Yi经用了hen多 HOC，那么继续往下玩吧。这种情况下改造成本低，而且维护起来也比较直观。. **注意** 上面那段代码片段里我故意把 `<` 和 `>` 换成了中文字符，以免被某些编辑器误识别成标签。当然真实项目里还是要写正确的 JSX。 我们常遇到的问题

HOC 与 Render Props 的冲突 Ru果你把两种模式混合使用，一开始kan起来hen酷，但随后发现维护成本暴涨。例如：