React & Redux & React-router 实战

缺什么补什么，别在组件拆分上假装熟练

很多转岗或查漏补缺的开发者，简历上写着会用 React，但一被追问细节就露怯：props 传到哪一层就乱了，事件处理写得像 jQuery，列表渲染不知道为什么要加 key，样式只会堆内联。这门实战课解决的就是这种“能跑起来但经不起追问”的尴尬。它不搞大而全的理论铺陈，而是从最基础的拆分组件、外部只读数据 props、动态组件这几个点切入，直接逼你面对真实开发里的边界问题。比如左右互斥组件这种实战，不是写个 demo 就完事，而是要处理状态同步、交互冲突，这种场景最能暴露你对组件职责划分的模糊认知。如果你现在写 React 还停留在“能复制粘贴能跑”，遇到复杂交互就堆 if-else，那这块内容就是给你补的缺口。建议先看组件拆分和 props 这几块，别急着跳到 Redux，基础不牢后面全是坑。

Redux 和 react-router 不是背概念，是拿来解决问题的

课程后半段聚焦 Redux 和 react-router，但别指望它像教材一样从源码讲起。它的定位是实战，也就是假设你已经知道这俩东西是干嘛的，但不知道在真实项目里怎么用得干净。Redux 上下两讲，核心是解决状态流转的混乱——你之前是不是把所有东西都塞组件 state 里，结果数据一多就理不清谁改了谁？react-router 那一讲也是同理，不是教你配置路由表，而是让你理解在组件化开发里，路由怎么和组件配合，怎么避免页面跳转时状态丢失。这部分适合那些“看过文档但没在项目里真用过”的人。如果你连 Redux 的 action、reducer 都说不清概念，建议先补基础再看，否则会跟不上节奏。学完这块，你该能独立设计一个中型应用的状态结构，而不是把所有数据糊成一团。

资料配合练习：别光看，手要动起来

课程资料不是让你存着吃灰的，而是配合每节的实战任务用的。正确的用法是：先看组件拆分和 props 的讲解，然后自己尝试拆一个稍微复杂的页面，比如带 Tab 切换的列表，再对照课程里的 Tabs 组件实战和左右互斥组件开发，看自己拆得是不是太碎或者太粗。Redux 那两讲，别光听老师讲流程，自己写一个多组件共享状态的例子，比如购物车数量同步，然后对比课程里的写法，找出自己代码里冗余的地方。react-router 部分同样如此，看完后自己搭两三个页面跳转，手动处理一下路由参数传递。资料包里的代码片段和示例是用来对照的，不是用来直接抄的。如果你看完不能独立回答这些问题——props 和 state 在什么场景下用哪个、key 属性到底解决了什么渲染问题、Redux 的单向数据流在多组件交互时怎么避免冲突——那你就是白看了，回头重做练习，别假装会了。