这门课解决什么场景，适合谁学

React 生态快速迭代，Hooks 已成为现代前端开发的标配。很多开发者虽然能写出基础的 useState 和 useEffect，但在面对复杂业务逻辑时，往往陷入类组件的思维定势，难以编写高内聚、低耦合的代码。这门课以重构「去哪儿网火车票 PWA」为实战背景，专门解决 React 从类组件向函数组件迁移过程中的核心痛点。它不局限于 API 层面的讲解，而是深入探讨如何在高频搜索、动态筛选、离线缓存等真实场景中，利用 Hooks 实现逻辑复用与性能优化。

本课程适合两类人群：一是已具备 React 基础，希望突破瓶颈、系统掌握 Hooks 进阶技巧（如 useReducer、useContext、自定义 Hook）的在职开发者；二是做过传统前端项目，希望转型 React 技术栈的转行者。学习门槛在于你需要熟练掌握 JavaScript ES6+ 语法，理解 Promise、Async/Await 等异步编程概念。如果你对 Vue 或其他框架有了解，有助于对比学习，但并非必须。课程重点考察的是对 React 声明式编程思想的领悟，而非简单的语法记忆。

学完能独立做什么，资料怎么用

完成这门课后，你将具备独立重构中大型 React 项目的能力。具体产出包括：能够设计出清晰的自定义 Hook 来封装复杂的副作用逻辑（如防抖搜索、滚动监听、数据同步）；能够使用 Context 配合 useReducer 构建中型应用的状态管理方案，减少对 Redux 等第三方库的依赖；能够搭建具备 Service Worker 离线能力的 PWA 应用，提升用户体验。你将不再畏惧组件嵌套过深导致的性能问题，也能熟练处理 Hooks 中的闭包陷阱与清理逻辑。

建议按以下顺序学习。第一阶段，先通读项目整体结构，理解火车票页面的业务模块划分，重点关注路由配置和全局状态的设计思路，不要急于动手写代码。第二阶段，对照视频逐章实现，遇到陌生的 Hook 用法，先尝试查阅官方文档推导其原理，再回看讲师的解题思路，加深理解。第三阶段，脱离视频进行独立重构，尝试将某个复杂功能模块（如车次筛选器）用全新的自定义 Hook 体系重写，验证自己是否真正掌握了逻辑复用技巧。配套资料是学习的关键依托，务必在本地环境跑通代码，边调试边学习。避免只看不练，因为 React 的状态流思维只有在解决实际 Bug 的过程中才能真正内化，单纯观看视频难以达到预期的学习效果。

mksz348 - React劲爆新特性Hooks 重构去哪儿网火车票PWA

本课程隶属 会员库 · MK实战课（一部分是老课） / 课程盒子3-mksz300至399，完整课程目录与配套资料如下。

课程目录

第10章 [项目篇]座次选择页/
10-1 数据结构与模块设计(微信-rmshou-收集整理)[7].mp4
10-2 URL解析与数据请求(微信-rmshou-收集整理)[7].mp4
10-3 车次详细信息(微信-rmshou-收集整理)[7].mp4
10-4 异步加载时刻表(上)(微信-rmshou-收集整理)[7].mp4
10-5 异步加载时刻表(下)(微信-rmshou-收集整理)[7].mp4
10-6 车次列表(微信-rmshou-收集整理)[7].mp4
第11章 [项目篇]订单填写页/
11-1 数据结构与模块设计(微信-rmshou-收集整理)[7].mp4
11-2 URL解析与数据请求(微信-rmshou-收集整理)[7].mp4
11-3 乘客信息填写(一)(微信-rmshou-收集整理)[7].mp4
11-4 乘客信息填写(二)(微信-rmshou-收集整理)[7].mp4
11-5 -1 乘客信息填写(三)(微信-rmshou-收集整理)[7].mp4
11-6 -2乘客信息填写(四)(微信-rmshou-收集整理)[7].mp4
11-7 在线选座(微信-rmshou-收集整理)[7].mp4
11-8 结算提交(微信-rmshou-收集整理)[7].mp4
第12章 [提高篇]工程优化/
12-1 代码规范格式化(微信-rmshou-收集整理)[7].mp4
12-2 性能与部署(微信-rmshou-收集整理)[7].mp4
第13章 课程总结/
13 课程总结(微信-rmshou-收集整理)[7].mp4
第1章 课程简介/
1-1 关于这门课程，你想了解的都在这里(微信-rmshou-收集整理)[7].mp4
1-2 看了这一节，对学习更有帮助(微信-rmshou-收集整理)[7].mp4
第2章 [操作篇]项目搭建/
2-1 创建项目：使用react-create-app构建工具(微信-rmshou-收集整理)[7].mp4
2-2 编译脚本：react-scripts的作用与工作原理(微信-rmshou-收集整理)[7].mp4
2-3 解构编译脚本：eject的具体用法(微信-rmshou-收集整理)[7].mp4
第3章 [新特性]React新特性一览/
3-1 Context实现跨层级的组件数据传递(微信-rmshou-收集整理)[7].mp4
3-2 静态属性ContextType访问跨层级组件的数据(微信-rmshou-收集整理)[7].mp4
3-3 Lazy与Suspense实现延迟加载(微信-rmshou-收集整理)[7].mp4
3-4 Memo实现指定组件进行渲染(微信-rmshou-收集整理)[7].mp4
第4章 [新特性]React颠覆性新特性Hooks/
4-1 React Hooks的概念与意义(微信-rmshou-收集整理)[7].mp4
4-2 使用State Hooks(微信-rmshou-收集整理)[7].mp4
4-3 使用Effect Hooks(微信-rmshou-收集整理)[7].mp4
4-4 使用Context Hooks(微信-rmshou-收集整理)[7].mp4
4-5 使用Memo&Callback Hooks(微信-rmshou-收集整理)[7].mp4
4-6 使用Ref Hooks(微信-rmshou-收集整理)[7].mp4
4-7 自定义Hooks(微信-rmshou-收集整理)[7].mp4
4-8 Hooks的使用法则(微信-rmshou-收集整理)[7].mp4
4-9 Hooks的常见问题(微信-rmshou-收集整理)[7].mp4
第5章 [新特性]React新特性之Redux/
5-1 React Redux的概念与意义(微信-rmshou-收集整理)[7].mp4
5-2 没有Redux的世界(微信-rmshou-收集整理)[7].mp4
5-3 Dispatch与Action(微信-rmshou-收集整理)[7].mp4
5-4 使用Reducer拆解数据更新(微信-rmshou-收集整理)[7].mp4
5-5 异步Action(微信-rmshou-收集整理)[7].mp4
第6章 [新特性]渐进式Web App/
6-1 PWA简介(微信-rmshou-收集整理)[7].mp4
6-2 服务工作线程：Service Worker(微信-rmshou-收集整理)[7].mp4
6-3 “承诺”控制流：Promise(微信-rmshou-收集整理)[7].mp4
6-4 更优雅的请求：fetch(微信-rmshou-收集整理)[7].mp4
6-5 资源的缓存系统：Cache API(微信-rmshou-收集整理)[7].mp4
6-6 消息推送：Notification API(微信-rmshou-收集整理)[7].mp4
6-7 如何在项目中开启PWA(微信-rmshou-收集整理)[7].mp4
第7章 [项目篇]火车票业务架构/
7-1 项目业务选型以及演示分析(微信-rmshou-收集整理)[7].mp4
7-2 项目模块交互设计演示与分析(微信-rmshou-收集整理)[7].mp4
7-3 项目工程初始化(微信-rmshou-收集整理)[7].mp4
7-4 为项目搭建Mock Serve(微信-rmshou-收集整理)[7].mp4
同类型课程.jpg
第8章 [项目篇]火车票首页/
8-1 数据结构与模块设计(微信-rmshou-收集整理)[7].mp4
8-10 日期选择浮层-搭建(微信-rmshou-收集整理)[7].mp4
8-11 日期选择浮层-日历组件(上)(微信-rmshou-收集整理)[7].mp4
8-12 日期选择浮层-日历组件(下)(微信-rmshou-收集整理)[7].mp4
8-13 只看高铁&动车控件(微信-rmshou-收集整理)[7].mp4
8-14 提交按钮控件(微信-rmshou-收集整理)[7].mp4
8-2 顶部导航栏(微信-rmshou-收集整理)[7].mp4
8-3 始发终到站(微信-rmshou-收集整理)[7].mp4
8-4 城市选择浮层-顶部搜索栏(微信-rmshou-收集整理)[7].mp4
8-5 城市选择浮层-城市的异步加载(微信-rmshou-收集整理)[7].mp4
8-6 城市选择浮层-渲染城市列表(微信-rmshou-收集整理)[7].mp4
8-7 城市选择浮层-字母快速定位(微信-rmshou-收集整理)[7].mp4
8-8 城市选择浮层-搜索建议(微信-rmshou-收集整理)[7].mp4
8-9 出发日期控件(微信-rmshou-收集整理)[7].mp4
第9章 [项目篇]搜索结果页/
9-1 数据结构与模块设计(上)(微信-rmshou-收集整理)[7].mp4
9-10 综合筛选浮层-时间区间滑块(下)(微信-rmshou-收集整理)[7].mp4
9-11 综合筛选浮层 - 其他逻辑(微信-rmshou-收集整理)[7].mp4
9-12 数据联动与缓冲区重构(微信-rmshou-收集整理)[7].mp4
9-2 数据结构与模块设计(下)(微信-rmshou-收集整理)[7].mp4
9-3 URL解析与数据请求(微信-rmshou-收集整理)[7].mp4
9-4 日期导航(微信-rmshou-收集整理)[7].mp4
9-5 车次列表(微信-rmshou-收集整理)[7].mp4
9-6 底部筛选按钮栏(微信-rmshou-收集整理)[7].mp4
9-7 综合筛选浮层-缓存状态(上)(微信-rmshou-收集整理)[7].mp4
9-8 综合筛选浮层-缓存状态(下)(微信-rmshou-收集整理)[7].mp4
9-9 综合筛选浮层-时间区间滑块(上)(微信-rmshou-收集整理)[7].mp4
课程资料/
代码资料.zip