第18周 – React Router Hooks、Context API 与大型代码库的理解

Source: Dev.to

React Router Hooks

本周感觉不像是“学习 React”，而更像是“以 React 开发者的思维来思考”。我专注于三个重要的 React Router 钩子：

• useParams – 从 URL 中读取动态值
• useSearchParams – 更新并同步状态与 URL 查询字符串
• useNavigate – 编程式导航

这些钩子帮助我认识到，URL 不仅是导航工具，它们还能存储应用状态。

Additional Routing Concepts

• 嵌套路由
• 索引路由
• SPA（单页应用）行为
• 路由结构与流程

我仍有一些高级路由概念需要掌握，但基础已经清晰。

Projects

WorldWise (Main Active Project)

在 WorldWise 中，我应用了：

• 路由、嵌套路由和索引路由
• useParams、useSearchParams 和 useNavigate

该项目目前侧重于路由架构和导航流程，计划后续集成高级状态管理和 Context API。

Atomic Blog (Codebase Understanding Project)

对于 Atomic Blog，我使用了课程提供的 starter 代码库。与其从零构建，我：

1. 阅读了完整的结构
2. 移除不必要的部分
3. 绘制数据流向图
4. 学习了大型 React 应用的组织方式

关键实现

• 使用 createContext 创建全局 store
• 用 Provider 包裹组件
• 通过 useContext 访问全局状态

Advanced Context Patterns

• 派生状态
• 自定义钩子（如 usePosts）
• 性能优化技巧
• 将逻辑抽离到组件外部

该项目强调耐心和代码阅读能力，而非大量编写新代码，强化了对架构的理解同样重要的理念。

Context API Insights

当 Context API 与自定义钩子和派生状态结合时，威力倍增。将其与路由一起使用，可实现真实应用的思考方式：

Routing + Global State = Real Application Thinking

Takeaways

• 基于 URL 的状态：通过 URL 管理状态已变得得心应手。
• 导航控制：使用 useNavigate 进行编程式导航非常直接。
• 使用 Context API 的全局状态：能够自如地创建和消费 context provider。
• 阅读和修改大型代码库：提升了拆解和扩展已有项目的能力。

Next Steps

• 将高级状态管理深度应用到 WorldWise 中。
• 完全掌握路由模式以及高级 Context API 技巧。