今天，我把课程中的第一个庞大组件拆分成干净、可复用的组件

Source: Dev.to

起点：课程中的一个巨型文件 😅

在课程里，他们给了我一个完整的工作示例，包含：

• 导航栏
• 搜索
• 电影列表
• 已观看电影
• 汇总
• 切换区块
• 电影卡片
• 已观看电影卡片
• 平均评分
• 所有 useState 逻辑

所有内容都放在一个巨大的组件里。这不是错误——而是有意为之。目的是让我练习拆分，老实说，这正是完美的挑战。

我的任务：将巨型组件拆分为逻辑部分 🧩

我没有随意拆分，而是遵循一个明确的规则：每个组件应代表 UI 中的一个有意义的部分。以下是我的拆分方式：

NavBar 区块

• Logo
• Search
• NumResults

这些都与导航相关，放在一起。

主区块

包含两个主要面板：

• ListBox（电影列表）
• WatchedBox（已观看电影区块）

电影列表组件

在 ListBox 中，我拆分为：

• MovieList
• Movie

已观看区块组件

在 WatchedBox 中，我拆分为：

• WatchedMoviesSummary
• WatchedMovieList
• WatchedMovie

通过这种方式拆分，结构变得一目了然。

我创建的最终组件结构

App
 ├─ NavBar
 │   ├─ Logo
 │   ├─ Search
 │   └─ NumResults
 ├─ Main
 │   ├─ ListBox
 │   │    ├─ MovieList
 │   │    └─ Movie
 │   └─ WatchedBox
 │        ├─ WatchedMoviesSummary
 │        ├─ WatchedMovieList
 │        └─ WatchedMovie

这既简洁又易读，正是课程想要我练习的目标。

今天的收获

⭐ 1. 巨型组件是起点
课程故意给我一个巨型组件，让我学会自行拆解。

⭐ 2. 拆分应当合乎逻辑，而非随意
组件必须代表 UI 中的真实“片段”。

⭐ 3. 中等大小的组件让一切更容易
清晰、易懂的块 → 更好的开发者体验。

⭐ 4. 拆分后，状态管理更轻松
每个块各自管理自己的逻辑，不再混在一起。

最后感想 💭

今天不仅是一次编码练习——更是一次思维方式的转变。我学会了：

• 处理一个庞大且凌乱的组件，
• 理解其结构，
• 找到自然的边界，
• 将其拆分为干净、可复用的部分。

这次练习提升了我的 React 思维方式。明天，我会继续课程的下一部分，并将同样的原则应用到新功能上。

🔚 注

如果想了解我使用了哪种框架和方法来拆分这个巨型组件，务必阅读这篇 博客文章。