解决「会写组件却做不了项目」的断层

很多前端开发者停留在“能写出页面”的阶段，一旦涉及路由跳转逻辑、跨组件状态同步或大型应用性能调优，就陷入 props 层层透传或盲目使用全局状态的困境。这门课的核心价值在于填补从基础语法到生产级实战的鸿沟。它不回避 React 18/19 的新特性，而是深入剖析 Fiber 架构、调度器原理以及并发模式下的 Hook 使用场景。课程没有空洞的理论堆砌，而是通过一个完整的中后台管理系统，将路由配置、接口封装、权限控制、主题换肤等真实业务痛点串联起来。它专门针对那些在面试中答不上来“为什么这样优化”或“状态管理如何选型”的学习者，提供可落地的技术解决方案，帮助你在实际工作中突破技术瓶颈，不再依赖死记硬背的八股文。

门槛与学习路径建议

这门课要求读者已熟练掌握 JSX 语法、组件生命周期及基础 Hook（useState/useEffect），并具备 TypeScript 的基本类型定义能力。如果连基础 Hook 的副作用清理都搞不清楚，建议先回炉重造基础部分，因为后续内容会频繁涉及 useRef 存储 DOM、useReducer 处理复杂状态（如购物车场景）以及自定义 Hook 的封装。建议的学习顺序是：先看完 React 原理篇中的 Fiber 架构与调度器模拟，建立对底层运行机制的认知；接着攻克 TypeScript 入门部分中的泛型与交叉类型，为后续接口类型定义打基础；然后重点学习 React-Router 的路由定义与数据 API，这是构建单页应用骨架的关键；最后进入项目实战阶段，按模块逐一击破。不要试图一次性看完，每个章节的视频都对应着具体的代码实现，需要边看边敲，特别是状态管理引入 Zustand 的环节，务必理解其与传统 Redux 的区别及适用场景。

独立产出与资料配合方法

学完这门课，你应当能够独立从零搭建一个具备角色权限控制、菜单动态渲染、数据看板联调及按钮级权限管理的企业级中后台系统。具体产出包括：能编写自定义 Hook 封装通用逻辑，能实施路由懒加载与代码分割以优化首屏加载速度，能实现基于 Token 的身份验证与细粒度权限拦截。资料包中的视频并非孤立存在，而是紧密配合项目实战章节。例如，在开发“部门模块”时，需结合接口说明视频理解数据结构，再跟随新增、查询、删除功能的视频逐步实现；在处理“Dashboard 接口联调”时，要对照前文 axios 封装的内容进行实践。建议采用“看视频-复现代码-修改需求”的循环模式：先完整观看某模块的开发过程，然后清空文件尝试独立复现，最后尝试加入视频未提及的小功能修改以检验掌握程度。这种刻意练习方式能确保你将视频中的知识转化为肌肉记忆，真正具备独立解决复杂前端工程问题的能力。

课程目录

55_【React-Router】1-路由的定义.mp4 [14.3 MB]
62_项目实战0项目接口说明(必看).mp4 [5.1 MB]
60_【React-Router】6-dataapi.mp4 [26.2 MB]
34_34：useRef的基本使用-存储数据.mp4 [9.3 MB]
79_项目实战17部门模块开发-查询功能-1.mp4 [47.0 MB]
51_【TS入门】3交叉类型.mp4 [4.0 MB]
81_项目实战19部门模块开发-新增-1.mp4 [20.6 MB]
90_项目实战28角色模块-查询功能-1.mp4 [20.6 MB]
100_项目实战38dashboard接口联调.mp4 [33.0 MB]
114_性能优化3拆包分包高级玩法.mp4 [28.0 MB]
103_项目实战41换肤功能的实现.mp4 [26.3 MB]
33_33：useRef的基本使用-获取dom.mp4 [8.8 MB]
5_5：jsx语法入门.mp4 [23.6 MB]
72_项目实战10欢迎模块开发和全局css定义.mp4 [12.7 MB]
7_7：如何开发一个bable插件结合ast语法树.mp4 [22.6 MB]
76_项目实战14页面整体布局引入zustand状态-4.mp4 [25.1 MB]
9_9：react组件.mp4 [31.8 MB]
61_【React-Router】7-总结路由-善于AI工具.mp4 [7.5 MB]
54_【TS入门】6keyoftypeofin使用.mp4 [5.9 MB]
85_项目实战23部门模块开发-删除功能补充说明-5.mp4 [2.1 MB]
24_24：useReducer复杂的场景-购物车实现demo.mp4 [38.0 MB]
66_项目实战4axios的封装.mp4 [16.6 MB]
88_项目实战26菜单模块-编辑.mp4 [17.5 MB]
109_项目实战47按钮级别权限控制.mp4 [12.4 MB]
101_项目实战39自定义hooks封装.mp4 [25.5 MB]
52_【TS入门】4泛型.mp4 [6.0 MB]
42_React原理篇-5-构建子节点fiber树.mp4 [10.5 MB]
87_项目实战25菜单模块-新增.mp4 [11.9 MB]
31_31：useDeferred的使用场景.mp4 [10.0 MB]
46_React原理篇-9-消息通讯.mp4 [3.6 MB]
16_16：useEffect-纯函数和副作用函数的区别.mp4 [15.5 MB]
113_性能优化2路由懒加载拆包分包.mp4 [26.1 MB]
27_27：useSyncExternal自定义封装.mp4 [16.8 MB]
47_React原理篇-10-模拟React调度器.mp4 [49.9 MB]
1_1课程大纲（必看）.mp4 [6.9 MB]
39_React原理篇-2-fiber架构.mp4 [17.7 MB]
56_【React-Router】2路由的跳转方式).mp4 [10.5 MB]
13_13：useState对数组的处理.mp4 [16.6 MB]
106_项目实战44菜单权限实现-1.mp4 [32.5 MB]
40_React原理篇-3-工作单元fiber初始化.mp4 [35.4 MB]
53_【TS入门】5接口interfacetype.mp4 [7.8 MB]
18_18：useEffect真实的使用场景模拟.mp4 [12.7 MB]
44_React原理篇-7-渲染成真实dom.mp4 [29.5 MB]
63_项目实战1项目介绍（必看）.mp4 [20.1 MB]
73_项目实战11页面整体布局改造-1.mp4 [21.3 MB]
64_项目实战2互联网大厂工作模式项目需求分析.mp4 [15.1 MB]
45_React原理篇-8-浏览器空闲.mp4 [20.2 MB]
92_项目实战30角色模块-新增编辑功能-1.mp4 [15.6 MB]
102_项目实战40table查询loading功能完善.mp4 [5.1 MB]
30_30：useTransition真实应用案例.mp4 [19.7 MB]
3_3：搭建React开发环境--详解每个文件作用.mp4 [26.4 MB]
8_8：swc是什么.mp4 [19.3 MB]
115_性能优化4preloadprefetch使用.mp4 [7.9 MB]
98_项目实战36dashboard开发-1.mp4 [17.7 MB]
94_项目实战32角色模块-设置权限.mp4 [70.3 MB]
41_React原理篇-4-遍历子节点和兄弟节点.mp4 [12.7 MB]
84_项目实战22部门模块开发-删除总结-4.mp4 [10.8 MB]
15_15：useState底层更新机制.mp4 [11.5 MB]
110_项目实战48水印功能实现.mp4 [4.2 MB]
11_11：兄弟组通讯.mp4 [15.6 MB]
35_35：useRef的使用场景.mp4 [12.3 MB]
89_项目实战27角色模块-RBAC权限模型.mp4 [24.5 MB]
70_项目实战8jwt介绍&登陆模块联调.mp4 [49.5 MB]
68_项目实战6环境变量的配置.mp4 [24.0 MB]
93_项目实战31角色模块-新增编辑功能-2.mp4 [10.4 MB]
6_6：bable如何转jsx高级js语法糖.mp4 [12.1 MB]
105_项目实战43路由权限实现-2.mp4 [14.2 MB]
108_项目实战46菜单权限逻辑梳理-3.mp4 [14.5 MB]
50_【TS入门】2void、never、any、unknow.mp4 [8.9 MB]
117_性能优化6按需引入实战案例.mp4 [11.6 MB]
80_项目实战18部门模块开发-查询功能-2.mp4 [19.1 MB]
26_26：useSyncExternal注意事项.mp4 [8.8 MB]
83_项目实战21部门模块开发-编辑-3.mp4 [25.6 MB]
10_10：父子组件通讯.mp4 [22.5 MB]
28_28：useTransition的使用场景.mp4 [7.4 MB]
77_项目实战15页面整体布局菜单改造-1.mp4 [16.9 MB]
59_【React-Router】5-嵌套路由.mp4 [11.8 MB]
25_25：useSyncExternal高级使用.mp4 [16.5 MB]
91_项目实战29角色模块-查询功能-2.mp4 [39.6 MB]
14_14：useState针对对象的操作.mp4 [9.4 MB]
21_21：useLayoutEffect和useEffect使用.mp4 [2.3 MB]
104_项目实战42路由权限实现-1.mp4 [48.5 MB]
20_20：useLayoutEffect使用场景.mp4 [13.1 MB]
2_2：react入门环境安装.mp4 [11.4 MB]
67_项目实战5storage的封装.mp4 [13.1 MB]
29_29：useTransition-开发一个Vite插件-模拟.mp4 [17.0 MB]
17_17：useEffect基础高级用法.mp4 [29.2 MB]
99_项目实战37dashboard开发-2.mp4 [35.9 MB]
112_性能优化1打包结果分析工具.mp4 [16.6 MB]
4_4：Bable的核心作用.mp4 [29.0 MB]
22_22：useReducer基本使用.mp4 [9.0 MB]
86_项目实战24菜单模块-查询.mp4 [26.7 MB]
12_12：useState对基本类型的处理.mp4 [11.2 MB]
43_React原理篇-6-diff算法实现.mp4 [17.5 MB]
48_React原理篇-11-面试篇总结.mp4 [10.4 MB]
19_19：useLayoutEffect用法.mp4 [13.6 MB]
36_36：useImperative使用场景.mp4 [30.0 MB]
38_React原理篇-1-虚拟dom.mp4 [28.6 MB]
32_32：useDeferred的使用场景.mp4 [15.1 MB]
78_项目实战16整体路由的定义和改造.mp4 [17.4 MB]