第14周 – 自定义 Hook、完成 usePopcorn，以及学习如何设计代码

Source: Dev.to

Milestone: usePopcorn Completed

usePopcorn 应用在三周的开发后终于完成。本周的重点是：

• 最后润色
• 清理代码
• 重构
• 使用自定义 Hook 更好地组织代码

Live Demo: Live App
GitHub: Readme File Link

---

Custom Hooks

自定义 Hook 不仅是一个新特性，它代表了一种全新的 React 代码架构思路。它们可以帮助：

• 将逻辑与 UI 分离
• 清理组件
• 使代码可复用
• 设计自己的抽象层

Example: useGeolocation

本周的挑战是构建一个用于地理位置的自定义 Hook，需处理：

• 加载状态
• 错误
• 位置信息
• 点击计数
• 底层浏览器 API 调用

使用该 Hook 的组件只需要请求：

const { position, loading, error, requestLocation } = useGeolocation();

此练习强调了 Hook 应该暴露什么、隐藏什么。

Refactoring with Custom Hooks in usePopcorn

在完成的应用中，多个领域特定的 Hook 现在封装了通用逻辑：

• useMovies – 获取并管理电影数据
• useLocalStorage – 将状态同步到 localStorage
• useKey – 处理键盘快捷键

通过将 useEffect、获取数据的逻辑、AbortController、事件监听以及 localStorage 处理移入这些 Hook，组件现在主要负责渲染 UI。

Reflections

• 本周并不是在学习大量新概念，而是 组织已有的知识。
• 干净的 React 代码不是写更多代码，而是 设计更好的边界。
• 并非每一周都会带来全新的 API 或特性——有些周专注于 细化、结构化和成熟度。

第 14 周让我明白，深思熟虑的架构和可复用的抽象与任何新库一样有价值。usePopcorn 项目现在已经是一个完整的工程，我将继续学习、改进并前行。 💪