全新React进阶指南(1-4)：创建组件/Fragments/组合与继承/CSS模块化

这门课解决什么问题

这是一门针对 React 基础阶段常见痛点的进阶课，重点不是讲 JSX 语法或环境搭建，而是聚焦四个具体场景：组件怎么创建才规范、多个组件如何组织、组件之间如何复用逻辑、样式怎么写才不会互相污染。很多自学 React 的人会卡在“能跑起来但写不整洁”的阶段——比如所有逻辑堆在一个巨型组件里、想复用一段 UI 却不知道用 children 还是继承、样式类名一多就冲突。这门课就是把这些散落在文档里的知识点，用四个模块串起来讲透。

课程内容非常聚焦，没有冗余的“项目实战”或“原理深挖”，每一节都对应一个可操作的问题。比如第一模块花五节课讲 class 组件和函数组件的创建、state 操作、条件渲染、列表渲染，这些是日常写页面最高频的动作；第二模块专门讲 Fragments，解决“必须返回一个根元素但不想多加一层 div”的麻烦；第三模块讲组合与继承，这是 React 官方推荐的复用方式，但很多人容易混淆；第四模块从评论列表案例出发，讲透 CSS 模块化和 reactstrap 组件库的使用。

适合什么基础的人学

适合已经能看懂 React 官方文档、写过几个简单 demo、但还没有系统整理过组件写法的开发者。如果你完全没接触过 React，建议先补一下 JSX 和组件的基本概念再来；如果你已经用 React 做过完整项目，那这门课的前三模块可能偏简单，重点看第四模块的 CSS 模块化注意事项和 reactstrap 用法即可。课程节奏偏慢，每节 15～25 分钟，适合下班后每天学一两节。

一个比较实际的好处是：课程把 class 组件和函数组件并列讲，没有鼓吹“函数组件才是未来”的立场。如果你要维护老项目，class 组件写法必须会；如果新项目用 hooks，函数组件也要熟练。这门课两种都覆盖，学完不会出现“只会一种写法、换项目就懵”的情况。

建议先看哪几块，学完能做什么

如果你时间有限，优先看第一模块的第 2 节（操作 state 数据）和第四模块的第 3、4 节（CSS 模块化及注意事项）。前者是 React 最核心的数据驱动逻辑，后者是工程化项目里最容易踩的坑——类名冲突、样式覆盖顺序、全局样式泄漏。如果你正准备写一个中型组件库或参与多人协作项目，第三模块的组合与继承必须仔细看，它能帮你理清“什么时候用 children 插槽、什么时候用 render prop、什么时候直接继承”。

学完这门课，你能独立完成的事情包括：用 class 和函数两种方式创建可复用的业务组件；用 Fragments 避免无意义的 DOM 嵌套；通过组合模式搭建类似“卡片 + 头部/内容/底部”的通用布局组件；给项目配置 CSS Modules，让每个组件的样式互不干扰；用 reactstrap 快速搭出带 Bootstrap 风格的界面。配合练习的方法是：不要只看视频，每学完一个模块，就打开你的旧项目或写一个 Todo 应用，把对应知识点替换进代码里——比如把原来用 div 包裹的列表改成 Fragment，把全局 CSS 改成模块化样式，把重复的组件结构用 children 抽出来。

最后提醒一点：第四模块的 reactstrap 组件库有 43 分钟，是整门课最长的一节，但它本质是教你怎么读第三方组件库的文档和用法，而不是死记 API。建议你边看边打开 reactstrap 官网对照，学完能自己查文档用其他 Bootstrap 风格的 React 组件库，就算真正掌握了。