今天我真正理解了自定义 Hook（并自己实现了）

Source: Dev.to

Overview

今天感觉不一样。不是因为我学到了新的 React 特性，而是因为我提升了对代码结构的思考方式。我不再只是写组件——我开始构建自己的 Hook，这改变了一切。

在我的项目中，我注意到一种模式：

• 一个组件里处理键盘逻辑
• 另一个组件里处理 LocalStorage 逻辑
• 还有别的地方处理电影获取逻辑

大量的 useEffect，大量重复的模式，一切都紧耦合在 UI 上。于是我意识到这些逻辑不属于 UI——它们应该抽象到自己的层次。这时我真正理解了自定义 Hook。

自定义 Hook 是将行为从 UI 中分离出来的方式。它们让你能够：

• 重用逻辑
• 隔离副作用
• 简化组件
• 用特性而不是文件来思考

useKey — 封装键盘行为

我构建了一个 Hook，能够：

• 监听特定键位
• 在该键被按下时执行动作
• 自动进行清理

关键的思想是组件不需要关心事件监听的实现细节。现在我的组件看起来像业务逻辑，而不是管线代码。

useLocalStorage — 自动持久化的状态

这个 Hook 给了我一个强大的启示：Hook 可以像状态一样使用，但比普通状态更智能。

该 Hook：

1. 从 localStorage 读取初始值
2. 与 React 状态保持同步
3. 在每次变化时自动保存

于是我不必在每处都写存储逻辑，只需要说：“给我持久化的状态”。这是一场巨大的架构升级。

useMovies — 灵感迸发的时刻

这才是真正的转折点。我把以下职责整合进了一个 Hook：

• 数据获取
• 加载状态
• 错误处理
• AbortController 的使用
• 数据清理
• 业务规则

现在组件不再关心 如何 获取数据、如何 处理错误、或 如何 防止竞争条件。它只需要知道：“给我电影列表、加载状态和错误”。这种关注点的清晰分离让组件变得更简洁。

Takeaways

• 自定义 Hook 是你为应用打造的 React API。
  与其一次又一次写 useEffect、useState、fetch、addEventListener、localStorage，不如写 useMovies、useKey、useLocalStorage。
• 思维方式从 “我该怎么实现它？” 转变为 “应该为这种行为创建什么 Hook？”
• 组件 = 仅 UI
• Hook = 行为、副作用、逻辑
• 如果逻辑感觉可以复用 → 它就值得拥有一个 Hook。
• 如果组件感觉太臃肿 → 抽离出一个 Hook。

今天不仅仅是理解了自定义 Hook；更是开始用这种新思维进行构建。我的组件更小了，最重要的是，我不再只是使用 React——我在它之上构建了自己的东西。