这门课专门解决 React 工程师在从“能写页面”到“能维护复杂业务系统”过程中的关键断层。很多开发者对 React 核心 API 的熟练度停留在语法调用层面，缺乏对底层运行机制的理解，导致在状态管理选型、组件性能优化以及自动化测试落地时经常手足无措。本模块不重复基础语法，而是聚焦于 Hooks 原理、主流状态管理方案对比、组件动画封装、Jest 自动化测试实战以及工程化文档体系搭建，旨在填补从应用到工程化的能力缺口。
适合基础与学习路径建议
这门课适合已经掌握 React 基础语法、能够独立开发简单单页应用，但尚未接触或仅初步了解状态管理库和测试工具的中级前端开发者。如果你还在纠结是用 class 还是 function 写法，或者不理解 `props` 与 `state` 的生命周期差异，建议先补齐基础再来看这里。学习时不要从头到尾线性观看，建议优先突破“React Hooks 及状态管理方案”这一章节。你需要重点关注 `useReducer`、`useMemo` 以及 Hooks 的工作原理（如手写 `useEffect` 部分），这是理解后续所有高级特性的地基。随后进入状态管理章节，重点对比 Redux Toolkit、MobX 以及 redux-saga/thunk 等异步中间件的实际应用场景，特别是为什么要用 Redux Toolkit 替代传统 Redux 写法的底层逻辑。这一部分决定了你在团队协作中能否做出正确的技术选型。
实操配套与最终能力目标
学完本模块，你应当能够独立完成以下任务：根据项目规模选择合适的全局状态管理方案并编写符合规范的 Slice；使用 Jest 和 Testing Library 为组件库编写高覆盖率的单元测试，包括 Mock 函数处理和复杂点击事件测试；封装通用的 Transition 动画组件以优化 UI 交互体验；并搭建基于 Storybook 或 Vite-pages 的组件文档系统。资料包中包含了具体的配置解读和实战视频，建议你在观看“Jest 上手”和“添加 Menu 组件测试”时，同步在本地项目环境中搭建对应的测试脚手架。不要只看视频里的代码，必须亲手运行测试用例，观察失败与成功的差异，并尝试修改 Mock 数据来验证测试的健壮性。对于动画部分，不要直接拷贝封装好的组件，而是先理解 CSS Transition 与 React 生命周期的配合机制，再动手实现 Menu 展开图标的动画效果。通过这种“理论解析 + 手动复现”的方式配合练习，你才能真正将碎片化的知识点内化为工程化能力，而非仅仅收藏了一堆视频。
课程目录
📁 {8}--阶段八：React17框架与源码解析（拔高）
📁 {4}--React工程化&性能优化
📁 {2}--第2章React动画方案TransitionGroup
[8.4.2.2]--2-2CSS动画实践：Menu组件添加展开图标.mp4 [51.4 MB]
[8.4.2.3]--2-3官方推荐的动画库ReactTransitionGroup.mp4 [72.9 MB]
[8.4.2.4]--2-4CSSTransiton应用&解释appear应用场景.mp4
[8.4.2.1]--2-1三种React中动画方案.mp4 [28.9 MB]
[8.4.2.5]--2-5封装Transiton动画组件&增加Menu控制动画属性.mp4 [121.6 MB]
📁 {3}--第3章React组件自动化测试
[8.4.3.3]--3-3Jest常见配置项解读&组件库项目配置.mp4 [56.1 MB]
[8.4.3.8]--3-8添加Menu组件测试.mp4 [91.4 MB]
[8.4.3.4]--3-4React官方推荐测试库testing-library.mp4 [59.2 MB]
[8.4.3.7]--3-7完成Button组件所有测试用例.mp4 [39.2 MB]
[8.4.3.2]--3-2Jest上手&搭建测试环境.mp4 [153.4 MB]
[8.4.3.1]--3-1什么是自动化测试？常见的测试工具.mp4 [29.0 MB]
[8.4.3.9]--3-9Menu组件点击事件测试.mp4 [30.0 MB]
[8.4.3.6]--3-6Jest核心概念Mock函数.mp4 [60.4 MB]
[8.4.3.5]--3-5创建Button测试用例集&VSCodeJest插件.mp4 [78.7 MB]
📁 {1}--第1章周导读
[8.1.1.1]--1-1章导学.mp4 [24.7 MB]
📁 {4}--第4章组件库文档方案
[8.4.4.3]--4-3组件库文档方案2：vite-pages集成.mp4 [99.9 MB]
[8.4.4.2]--4-2组件库文档方案1：Storybook集成.mp4 [55.8 MB]
[8.4.4.1]--4-1文档工具推荐vite-pages&storybook.mp4 [98.6 MB]
📁 {2}--React-Hooks&状态管理方案
📁 {1}--第1章ReactHooks及状态管理方案章导学
[8.2.1.1]--1-1章导学.mp4 [5.6 MB]
📁 {3}--第3章react中常见的状态管理方案
[8.2.3.4]--3-4redux-saga异步中间件.mp4 [68.6 MB]
[8.2.3.2]--3-2Redux-thunk异步中间件.mp4 [124.7 MB]
[8.2.3.7]--3-7Mobx状态管理方案.mp4 [152.2 MB]
[8.2.3.6]--3-6redux-toolkit核心API.mp4 [118.4 MB]
[8.2.3.3]--3-3redux中间件工作原理(redux-thunk源码解析).mp4 [91.2 MB]
[8.2.3.5]--3-5为什么现在主流的项目都会用redux-toolkit？.mp4 [135.4 MB]
[8.2.3.1]--3-1React中状态管理方案导学.mp4 [60.0 MB]
📁 {2}--第2章HooksAPI及hooks原理解析
[8.2.2.6]--2-6useRef用法.mp4 [29.1 MB]
[8.2.2.5]--2-5useReducer用法.mp4 [81.3 MB]
[8.2.2.11]--2-11hooks的工作原理（手写useEffect）.mp4 [90.9 MB]
[8.2.2.7]--2-7useMemo&useCallback.mp4 [52.7 MB]
[8.2.2.10]--2-10hooks的工作原理（手写useState）.mp4 [78.6 MB]
[8.2.2.4]--2-4useContext用法.mp4 [54.6 MB]
[8.2.2.12]--2-12Hooks案例todolist+五种CSS方案1.mp4 [115.4 MB]
[8.2.2.9]--2-9开发技巧与常见hooks资源(vueuse&usehook.mp4 [54.2 MB]
[8.2.2.13]--2-13五种CSS方案2（全局、模块化、CSSinJS）.mp4 [68.1 MB]
[8.2.2.8]--2-8自定义hook-useLocalStorage.mp4 [75.9 MB]
[8.2.2.2]--2-2ReactHooks一览与useState.mp4 [81.6 MB]
[8.2.2.3]--2-3useEffect用法.mp4 [30.7 MB]
📁 {1}--React17新特性
📁 {4}--第4章企业级应用框架和常见技术集成方案
[8.1.4.4]--4-4快速上手umi3.mp4 [111.1 MB]
[8.1.4.1]--4-1React源代码调试方法.mp4 [143.4 MB]
[8.1.4.2]--4-2调试进阶（第三方调试库&watch模式下的调试）.mp4 [94.2 MB]
[8.1.4.5]--4-5代码提交msg校验整合（commitizen&commit.mp4 [39.2 MB]
[8.1.4.7]--4-7umi&qiankun微前端实践.mp4 [105.7 MB]
[8.1.4.8]--4-8vite及react模板项目.mp4 [21.0 MB]
[8.1.4.3]--4-3create-react-app&模板cra-templa.mp4 [69.1 MB]
[8.1.4.6]--4-6umi常见的插件集成(sass&dva&model&qia.mp4 [50.0 MB]
📁 {2}--第2章react设计思想与核心概念
[8.2.2.11]--2-11hooks的工作原理（手写useEffect）.mp4 [101.2 MB]
[8.2.2.9]--2-9开发技巧与常见hooks资源(vueuse&usehook.mp4 [62.3 MB]
[8.1.2.2]--2-2React设计思想与优势.mp4 [121.4 MB]
[8.2.2.3]--2-3useEffect用法.mp4 [30.3 MB]
[8.2.2.13]--2-13五种CSS方案2（全局、模块化、CSSinJS）.mp4 [67.5 MB]
[8.2.2.12]--2-12Hooks案例todolist+五种CSS方案1.mp4 [129.4 MB]
[8.1.2.4]--2-4React核心概念（二）：协调概念以及Diff算法.mp4 [37.7 MB]
[8.2.2.7]--2-7useMemo&useCallback.mp4 [57.9 MB]
[8.2.2.10]--2-10hooks的工作原理（手写useState）.mp4 [87.1 MB]
[8.2.2.6]--2-6useRef用法.mp4 [31.1 MB]
[8.2.2.4]--2-4useContext用法.mp4 [62.6 MB]
[8.2.2.8]--2-8自定义hook-useLocalStorage.mp4 [97.8 MB]
[8.1.2.1]--2-1React16-18有哪些变化？带来了哪些惊喜？.mp4 [67.7 MB]
[8.1.2.5]--2-5React核心概念（三）：渲染与高性能原因.mp4 [18.3 MB]
[8.2.2.2]--2-2ReactHooks一览与useState.mp4 [97.2 MB]
[8.1.2.3]--2-3React核心概念（一）：组件&元素&实例.mp4 [76.3 MB]
[8.2.2.5]--2-5useReducer用法.mp4 [91.8 MB]
📁 {5}--第5章react-routerv6实战
[8.1.5.2]--5-2react-router最新v6版本带来了哪些变化.mp4 [92.0 MB]
[8.1.5.3]--5-3react-routerv6简明示例.mp4 [61.8 MB]
[8.1.5.1]--5-1React-Router章导学.mp4 [34.7 MB]
[8.1.5.5]--5-5自定义路由导航守卫.mp4 [124.8 MB]
[8.1.5.4]--5-4404页面&路由query&路径传参.mp4 [91.0 MB]
📁 {1}--第1章章导学
📁 {3}--第3章react的全新架构Fiber及其工作原理
[8.1.3.4]--3-4Fiber带来的Effects（效应）.mp4 [19.2 MB]
[8.1.3.1]--3-1React15架构卡顿的原因.mp4 [39.2 MB]
[8.1.3.3]--3-3Fiber树与双缓存技术（任务优先级）.mp4 [46.6 MB]
[8.1.3.2]--3-2什么是Fiber架构？Fiber对象.mp4 [41.7 MB]
📁 {3}--React组件库设计&工程化
📁 {4}--第4章图标组件（集成公共图标+iconfont）
[8.3.4.2]--4-2Icon组件UML类图设计.mp4 [34.1 MB]
[8.3.4.1]--4-1icon组件设计&react-icons库推荐.mp4 [95.1 MB]
[8.3.4.3]--4-3自定义Icon组件1.mp4 [106.1 MB]
[8.3.4.4]--4-4自定义Icon组件2.mp4 [103.1 MB]
📁 {5}--第5章菜单组件&子菜单组件
[8.3.5.1]--5-1Menu组件设计&整体考虑.mp4 [31.2 MB]
[8.3.5.2]--5-2Menu组件UML图分析.mp4 [41.4 MB]
[8.3.5.3]--5-3自定义Menu组件1.mp4 [62.0 MB]
[8.3.5.7]--5-7完成Menu组件的样式.mp4 [109.0 MB]
[8.3.5.6]--5-6React.Children.map与React.mp4 [109.0 MB]
[8.3.5.4]--5-4自定义Menu组件2.mp4 [90.0 MB]
[8.3.5.5]--5-5子菜单SubMenu组件及事件绑定.mp4 [90.8 MB]
📁 {3}--第3章按钮组件
[8.3.3.2]--3-2Button组件设计与前置准备.mp4 [102.0 MB]
[8.3.3.4]--3-4Button样式设计1.mp4 [95.9 MB]
[8.3.3.6]--3-6完成Button组件（加入loading效果）.mp4 [44.0 MB]
[8.3.3.3]--3-3Button组件Interface&基础分类button与.mp4 [59.5 MB]
[8.3.3.5]--3-5Button样式设计2.mp4 [58.6 MB]
📁 {1}--第1章周导学
[8.3.1.1]--1-1章导学.mp4 [7.5 MB]
📁 {2}--第2章组件库整体需求分析与工程化模板
[8.3.2.7]--2-7色彩设计（借助SemiDSM快速设计色彩方案）.mp4 [104.5 MB]
[8.3.2.6]--2-6使用Vite打包library配置.mp4 [92.2 MB]
[8.3.2.1]--2-1组件库需求分析.mp4 [58.4 MB]
[8.3.2.8]--2-8公共样式配置（两种策略）.mp4 [90.8 MB]
[8.3.2.3]--2-3初始化项目的两种方案（cra模板项目）.mp4 [76.8 MB]
[8.3.2.5]--2-5stylelint配置.mp4 [65.4 MB]
[8.3.2.2]--2-2课程组件库整体设计&样式方案介绍.mp4 [114.3 MB]
[8.3.2.4]--2-4初始化项目的两种方案（vite模板项目+CHANGELOG.mp4 [88.9 MB]
📁 {6}--第6章输入框组件
[8.3.6.3]--6-3自定义Input组件-基础结构.mp4 [57.4 MB]
[8.3.6.2]--6-2Input组件UML类图分析.mp4 [31.2 MB]
[8.3.6.6]--6-6Input组件allowClear功能.mp4 [66.7 MB]
[8.3.6.5]--6-5Input组件suffix&prefix&disabled.mp4 [39.3 MB]
[8.3.6.1]--6-1Input组件设计&整体思考.mp4 [17.1 MB]
[8.3.6.4]--6-4完成Input组件样式.mp4 [112.8 MB]
📁 {2}--阶段二：项目全流程DevOps
📁 {3}--团队协作-自动化流程
📁 {1}--第1章深入浅出前端自动化
[2.3.1.1]--1-1章导读【小荷才露尖尖角，揭开自动化的面纱】.mp4 [47.6 MB]
[2.3.1.2]--1-2什么是前端自动化？什么是CICD？.mp4 [137.9 MB]
[2.3.1.3]--1-4自动化流程概念&最佳实践.mp4 [50.4 MB]
📁 {3}--第3章Jenkins—CI&CD工具鼻祖
[2.3.3.1]--3-1Jenkins使用介绍&课程案例架构.mp4 [101.3 MB]
[2.3.3.2]--3-3Jenkins安装&Docker安装示例.mp4 [52.8 MB]
[2.3.3.5]--3-12Jenkins&gitlab项目任务.mp4 [62.9 MB]
[2.3.3.3]--3-7Jenkins插件配置&保存Docker容器数据.mp4 [109.0 MB]
[2.3.3.4]--3-10Jenkins权限管理3种方案.mp4 [99.0 MB]
📁 {0}--附件
📁 {4}--第4章自动化实战
[2.3.4.4]--4-4前后端项目Jenkins任务配置（2）.mp4 [120.0 MB]
[2.3.4.3]--4-3前后端项目Jenkins任务配置（1）.mp4 [48.6 MB]
[2.3.4.1]--4-1前后端项目Dockerfile&项目实战配置.mp4 [106.3 MB]
📁 {2}--第2章CircleCITravisCI自动化工具合集
[2.3.2.3]--2-7CircleCI实战Vue项目发布到githubpages.mp4 [108.7 MB]
[2.3.2.1]--2-1自动化工具介绍&CircleCI使用.mp4 [145.3 MB]
[2.3.2.2]--2-4CircleCI配置自动化任务—打包构建.mp4 [106.8 MB]
📁 {5}--第5章GithubActions
[2.3.5.3]--5-3GithubActions界面与设置.mp4
[2.3.5.4]--5-4同步Gitee代码的三种方式.mp4 [104.5 MB]
[2.3.5.5]--5-5构建代码并发布GithubPages.mp4 [130.2 MB]
[2.3.5.6]--5-6构建优化加入npm缓存.mp4 [63.3 MB]
[2.3.5.10]--5-10[加餐]手动发布release&自动生成发行说明.mp4 [64.9 MB]
[2.3.5.9]--5-9自动管理githubissues并打标签.mp4 [59.9 MB]
[2.3.5.2]--5-2Github加速DevSideCar.mp4 [19.1 MB]
[2.3.5.8]--5-8GA作业&rsync发布至服务器.mp4 [111.8 MB]
[2.3.5.11]--5-11使用GithubActions自动发布Release.mp4 [80.3 MB]
[2.3.5.7]--5-7使用GithubActions自动化发布GiteePage.mp4 [91.6 MB]
[2.3.5.12]--5-12常见的Actions推荐&如何自建GithubActio.mp4 [45.9 MB]
[2.3.5.1]--5-1章导学：githubactions.mp4 [40.8 MB]
📁 {2}--团队协作-版本管理
📁 {1}--第1章项目开发团队协作——版本管理
[2.2.1.18]--1-30【温故知新】章总结.mp4 [4.5 MB]
[2.2.1.7]--1-12github仓库settings介绍（版本控制工具git.mp4 [15.5 MB]
[2.2.1.14]--1-26docker-compose运维gitlab平台：备份&.mp4 [31.1 MB]
[2.2.1.8]--1-14深入理解git工作原理——快照管理（版本控制工具git）.mp4 [105.3 MB]
[2.2.1.1]--1-1章导学（敏捷流程之版本控制宝鉴）-.mp4 [28.6 MB]
[2.2.1.15]--1-27gitlab的权限介绍&组权限控制&分支保护.mp4 [63.2 MB]
[2.2.1.6]--1-11情境二：推送代码到多个仓库（版本控制工具git）.mp4 [19.0 MB]
[2.2.1.13]--1-25docker-compose搭建gitlab平台（自动动.mp4 [39.4 MB]
[2.2.1.4]--1-8从零配置github到SSH秘钥克隆仓库（版本控制工具gi.mp4 [62.7 MB]
[2.2.1.5]--1-10情景一：空仓库&创建仓库提交代码（版本控制工具git）.mp4 [52.0 MB]
[2.2.1.2]--1-2语义化版本SemanticVersioning（版本控制基.mp4 [32.7 MB]
[2.2.1.9]--1-16两种应用场景下的gitflow模型（多人协作gitflo.mp4 [94.6 MB]
[2.2.1.10]--1-19分支管理的基础命令介绍（多人协作之分支管理）.mp4 [139.4 MB]
[2.2.1.11]--1-21实操gitflow&常见问题（多人协作之分支管理）.mp4 [87.6 MB]
[2.2.1.16]--1-28三种方法产生.gitignore文件（git必备知识）.mp4 [89.3 MB]
[2.2.1.3]--1-5git工具导学&gitvssvn&git多密钥管理.mp4 [136.4 MB]
[2.2.1.17]--1-29Git的GUI工具使用简介.mp4
[2.2.1.12]--1-24dockerrun搭建gitlab平台.mp4 [79.0 MB]
📁 {0}--附件
(2.2.3)--gitlab配置HTTPS与邮件服务.pdf [546.3 KB]
(2.2.2)--gitsubmodule.pdf [420.8 KB]
(2.2.4)--开源许可协议.pdf [613.3 KB]
(2.2.1)--Typora中Table进阶使用.pdf [596.6 KB]
(2.2.5)--使用gitsubtree管理项目中的子库.pdf [530.8 KB]
(2.2.7)--学习Markdown语法.pdf [421.8 KB]
📁 {1}--团队协作-文档管理与缺陷控制
📁 {3}--第3章缺陷控制之质量管理工具
[2.1.3.4]--3-8Vue项目中使用VSCode插件自动格式化+自动ESLin.mp4 [40.6 MB]
[2.1.3.2]--3-4ESLint规则&配置方法.mp4 [31.8 MB]
[2.1.3.1]--3-1ESLint安装&初始化.mp4 [104.2 MB]
[2.1.3.3]--3-7ESLint与VSCode&Webstorm结合使用.mp4 [110.2 MB]
[2.1.3.5]--3-9本章小结.mp4 [12.9 MB]
📁 {1}--第1章项目开发团队协作——文档管理
[2.1.1.9]--1-11云笔记&个人笔记使用指北（勤练习才能写好文档）-v2.0.mp4 [38.8 MB]
[2.1.1.10]--1-12pages自建博客.mp4 [50.3 MB]
[2.1.1.6]--1-64款文档管理工具介绍（思想决定视野，工具提升效率）.mp4 [66.8 MB]
[2.1.1.1]--1-1章导读（敏捷流程之文档管理宝鉴）.mp4 [39.6 MB]
[2.1.1.7]--1-8ShowDoc的本地化安装.mp4 [54.3 MB]
… 其余 954 项略，目录共 1154 项
