这门课能帮你解决什么问题
React 在大型前端项目里越用越吃力，往往是因为状态管理、路由切换和性能调优三件事没打通。这门课就是围绕这三个痛点展开的——它不是从零讲 JSX 语法的入门课，而是当你已经能写简单组件、现在想把一个中等规模的管理后台搭起来、跑起来、并优化到可维护时，需要知道的技术栈整合。
课程从 React 18 的并发特性出发，重点落在：用 React-Router 7 的数据 API 处理嵌套路由和懒加载、用 Zustand 统一管理全局状态、用 React-Router 的 data 机制做权限控制、以及用 code-splitting 把首屏体积压下来。实战项目覆盖欢迎页、部门/菜单/角色模块、换肤功能和按钮级权限，几乎覆盖了企业级中后台的常见场景。
适合什么基础，建议先看哪几块
你至少得会用 React 写函数组件、懂 hooks 的基本用法，否则后面讲到 useSyncExternal、useDeferred、useReducer 的高级场景时会跟不上。TypeScript 方面，课里会穿插 TS 入门（交叉类型、泛型、keyof/typeof/in），如果你 TS 基础薄弱，建议先把第 51、52、54 节补一下，再看后面的实战。
建议先看完第 1 节的课程大纲，再跳到第 62 节的项目接口说明——这两段能帮你建立全局认知。接着按这个顺序推进：先听原理篇（39、40、42、46、47 节）理解 fiber 架构和调度机制，再看状态管理（24、27 节），然后进入路由（55～61 节），最后切入实战模块。不要一上来就开写，先把原理和架构想清楚，后面调试会顺利很多。
学完能独立做什么，资料怎么配合练习
学完后，你应该能独立搭建一个包含角色权限、菜单动态加载、换肤功能的中后台项目，并且懂得如何把路由拆包、如何封装 axios 请求、如何编写自定义 hooks 复用逻辑。资料包里每一个项目实战视频对应一个功能模块，建议边看边跟着敲代码：先在本地建好项目脚手架，再按视频顺序逐个实现模块，最后做一次完整的接口联调（第 62、100 节）。遇到不懂的原理，回去翻第 39～47 节；遇到状态管理问题，回到第 24、27 节重看。资料只是辅助，核心是你亲手把项目跑通、debug、重构一遍。
课程目录
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]
