解决什么问题：跨越“会用”与“懂原理”的鸿沟
许多前端开发者在掌握 React 基础语法后，容易陷入“只会调用 API，不懂内部机制”的困境。面对复杂的状态管理混乱、渲染性能瓶颈或难以复现的 Bug 时，往往束手无策。本课程正是为了解决这一核心痛点而设计。它不仅停留在应用层，更深入 React 18 的源码层面，剖析虚拟 DOM diff 算法、Fiber 架构以及并发渲染（Concurrent Mode）的实现原理。通过结合“欢乐购”这一完整的企业级电商项目，课程将理论落地，帮助学习者从底层逻辑上理解框架行为，从而具备独立排查疑难杂症和优化高性能应用的能力。
入门门槛与学习路径建议
本课程并非为零基础小白设计，建议学习者具备扎实的 JavaScript 基础，熟练掌握 ES6+ 语法（如解构赋值、Promise、异步编程），并已有 React 基本使用经验。由于课程深度融合了 TypeScript，若你在此方面较为薄弱，建议在学习前期同步补全类型系统的基础知识，这将极大降低后续实战的理解成本。
在学习顺序上，建议采取“先原理，后实战，再深挖”的策略。首先，认真研读 React 18 新特性章节，特别是并发渲染和自动批处理的变更，这是理解现代 React 开发的关键基石。其次，进入“欢乐购”项目实战，重点攻克全局状态管理、复杂表单处理及组件性能优化模块。最后，回顾源码解析部分，对照实战代码验证理论，形成闭环。不要急于求成跳读源码部分，那是提升技术深度的核心所在。
学完能做什么及资料配合方法
结课之际，你将能够独立主导基于 React 18 和 TypeScript 的中大型前端项目开发。具体产出包括：熟练运用 Hooks 组合复杂逻辑，通过 TypeScript 构建健壮的类型系统以消除运行时错误，利用 React 18 并发特性优化首屏加载与交互响应，以及具备对现有项目代码进行源码级重构和性能调优的能力。
资料包是实战演练的核心辅助，切忌只看不练。建议搭建本地开发环境，对照课程中的项目结构，手动实现“欢乐购”的每个功能模块。在练习过程中，遇到状态流转异常或渲染次数不符合预期的情况，请回头查阅源码解析章节，尝试从原理层面解释现象。这种“边做边问、以问促学”的方式，能将课程中的隐性知识转化为你的显性工程能力，确保学完即可胜任企业级开发岗位。
课程目录
20 23 React 18 系统入门 进阶实战《欢乐购》视频教程，。前端技术专家最新力作，带你系统构建React18技术体系。老师不仅与大家分享了React框架核心源码的实现原理，还给予了深度思考。通过这些讲解，可以帮助大家更好地理解和运用React框架，从而全面提升自己的技术实力。结合“欢乐购”项目，快速积累企业级前端项目实战经验，落地React18与TypeScript结合的实用开发技巧。.mp4 1. 构建 React 18 核心应用体系.mp4 4. 解锁 React+TS 高阶实用技巧.mp4 2. 提升企业级项目构建设计能力.mp4 5. 拓展源码解读及底层设计思维.mp4 3. 实践流行调试工具集使用技巧.mp4 6. 夯实开发提效工程化应用能力.mp4 ├── 1-为什么越来越多的工程师选用 React/ │ ├── [ 10M] 1-1 这可能是最适合新手学习 React 18 的第一门课 │ ├── [6.8M] 1-2 为什么越来越多的工程师选用 React │ ├── [9.7M] 1-3 React 18 和先前版本的区别 │ └── [5.0M] 1-4 找对方法，轻松系统化入门 React 使用 ├── 2-React 编程初体验/【@更多it资源www.】 │ ├── [ 51M] 2-1 如何在网页中快速使用 React（上） │ ├── [ 71M] 2-2 如何在网页中快速使用 React（下） │ ├── [ 37M] 2-3 React 开发调试工具安装 │ ├── [ 64M] 2-4 React常见语法初探（上） │ ├── [ 46M] 2-5 React 常见语法初探（中） │ ├── [ 51M] 2-6 React 常见语法初探（下） │ ├── [ 48M] 2-7 React 工程初始化和游戏功能预览 │ ├── [ 26M] 2-8 实现棋盘布局 │ ├── [ 35M] 2-9 下棋逻辑的实现（上） │ ├── [ 37M] 2- 10 下棋逻辑的实现（下） │ ├── [ 51M] 2- 11 借助数据设计实现游戏状态计算逻辑（上） │ ├── [ 50M] 2- 12 借助数据设计实现游戏状态计算逻辑（下） │ ├── [ 37M] 2- 13 优化拆分组件实现数据共享 │ └── [ 53M] 2- 14 历史回溯功能的实现 ├── 3-React 基础语法/ │ ├── [ 33M] 3-1 React UI 展示相关概念详解（上） │ ├── [ 29M] 3-2 React UI 展示相关概念详解（下） │ ├── [ 50M] 3-3 使用事件和状态实现交互 │ ├── [ 49M] 3-4 useState 原理讲解 & 事件查缺补漏 │ ├── [ 30M] 3-5 Immutable 数据 & Immer 的使用（上） │ ├── [ 28M] 3-6 Immutable 数据 & Immer 的使用（下） │ ├── [ 57M] 3-7 理解声明式编程及其开发规范 │ ├── [ 38M] 3-8 通过父子组件传值解决数据共享问题 │ ├── [ 33M] 3-9 组件状态重置背后的运行机理 │ ├── [ 39M] 3- 10 Key 值的作用详解 │ ├── [ 40M] 3- 11 使用 Reducer 聚合数据处理逻辑（上） │ ├── [ 38M] 3- 12 使用 Reducer 聚合数据处理逻辑（下） │ ├── [ 46M] 3- 13 Reducer 的优缺点解析（上） │ ├── [ 37M] 3- 14 Reducer 的优缺点解析（下） │ ├── [ 44M] 3- 15 使用 Context 完成深层组件传值 │ ├── [ 45M] 3- 16 Context 实际使用技巧 & 通过 Children 进行父子组件间 JSX 内容的传递 │ └── [ 69M] 3- 17 使用 Reducer & Context 实现 TodoList 功能 ├── 4-React 高阶语法/ │ ├── [ 45M] 4-1 Ref 的基础使用 │ ├── [ 35M] 4-2 Ref 与元素和组件的结合使用 │ ├── [ 40M] 4-3 Effect 的使用场景和基础使用步骤 │ ├── [ 71M] 4-4 useEffect 的底层执行逻辑 │ ├── [ 53M] 4-5 严格模式 Effect 两次执行问题的处理方法 │ ├── [ 51M] 4-6 useMemo 的使用场景和使用方法 │ ├── [ 39M] 4-7 useSyncExternalStore 的使用方法 │ ├── [ 50M] 4-8 组件和Effect的生命周期 & UseEffectEvent 简单介绍 │ ├── [ 44M] 4-9 自定义 Hook 的作用及使用方法 │ ├── [ 71M] 4-10 useCallback、useDebugValue、useImperativeHandle 的使用方法 │ ├── [ 52M] 4- 11 Profiler 和 Suspense 内置组件的深度讲解 │ ├── [ 69M] 4- 12 使用 UseDeferredValue 提升用户体验 │ └── [ 70M] 4- 13 useTransition 和 memo 的使用详解 ├── 5-React 中常见的 TypeScript 类型定义/ │ ├── [ 57M] 5-1 TypeScript 项目生成、语法入门及函数组件 Props 类型的定义 │ ├── [ 56M] 5-2 Hooks 相关类型问题的处理（上） │ ├── [ 68M] 5-3 Hooks 相关类型问题的处理（下） │ └── [ 21M] 5-4 React 相关事件的 TS 类型定义 ├── 6-实战“欢乐购”：登陆、注册、引导页面的开发/ │ ├── [ 26M] 6-1 Charles、rem布局、一像素边框问题的前置工程准备（上） │ ├── [ 42M] 6-2 Charles、rem布局、一像素边框问题的前置工程准备（下） │ ├── [ 98M] 6-3 使用 Ref 和 CSS 动画完成引导页面开发 │ ├── [ 57M] 6-4 使用 React-router-dom V6 版本实现登陆页面跳转（上） │ ├── [ 78M] 6-5 使用 React-router-dom V6 版本实现登陆页面跳转（下） │ ├── [ 38M] 6-6 使用 Sass 优化样式代码 & 使用 Axios + Charles 模拟请求开发（上） │ ├── [ 57M] 6-7 使用 Sass 优化样式代码 & 使用 Axios + Charles 模拟请求开发（下） │ ├── [ 64M] 6-8 封装通用请求 useRequest 自定义 Hook（上） │ ├── [ 74M] 6-9 封装通用请求 useRequest 自定义 Hook（下） │ ├── [ 86M] 6- 10 useRequest 代码改造及模态框提示功能实现 │ ├── [ 72M] 6- 11 使用 useImperativeHandle 进行模态框组件的封装实现 │ ├── [109M] 6- 12 使用 CreatePortal 完善 Modal 组件，优化请求发送逻辑 │ ├── [ 94M] 6- 13 注册页面的基础开发@优库it资源网 │ ├── [117M] 6- 14 使用嵌套路由实现代码的抽象复用 │ └── [ 54M] 6- 15 登陆逻辑的完整实现 ├── 7-实战“欢乐购”：首页相关页面开发/ │ ├── [112M] 7-1 使用 Swiper 实现首页顶部轮播效果 │ ├── [ 85M] 7-2 使用地理位置接口获取用户定位信心 │ ├── [ 56M] 7-3 useRequest 和 Modal 组件的封装升级（上） │ ├── [ 61M] 7-4 useRequest 和 Modal 组件的封装升级（下） │ ├── [ 68M] 7-5 首页数据动态获取（上） │ ├── [ 61M] 7-6 首页数据动态获取（下） │ ├── [ 81M] 7-7 分类及卡片区域布局开发（上） │ ├── [ 91M] 7-8 分类及卡片区域布局开发（下） │ ├── [ 83M] 7-9 首页完整布局样式开发（上） │ ├── [ 67M] 7- 10 首页完整布局样式开发（下） │ ├── [129M] 7- 11 首页组件拆分及代码优化 │ ├── [ 81M] 7- 12 切换门店功能开发（上） │ ├── [106M] 7- 13 切换门店功能开发（下） │ ├── [ 69M] 7- 14 搜索页面布局开发（上） │ ├── [ 64M] 7- 15 搜索页面布局开发（下） │ └── [115M] 7- 16 搜索页面逻辑实现 ├── 8-实战“欢乐购”：商品列表及详情页面开发/ │ ├── 【@更多it资源www.】 │ ├── [106M] 8-1 简单列表页面布局实现 │ ├── [ 78M] 8-2 使用路由完成页面间参数传递 │ ├── [125M] 8-3 列表页面逻辑实现 │ ├── [113M] 8-4 详情页面布局开发（上） │ ├── [116M] 8-5 详情页面布局开发（下） │ ├── [ 84M] 8-6 详情页面逻辑开发 │ ├── [105M] 8-7 分类列表页面布局开发（上） │ ├── [ 87M] 8-8 分类列表页面布局开发（下） │ ├── [ 65M] 8-9 分类列表逻辑开发（1） │ ├── [ 71M] 8-10 分类列表逻辑开发（2） │ ├── [ 76M] 8-11 分类列表逻辑开发（3） │ ├── [ 77M] 8-12 分类列表逻辑开发（4） │ └── [ 66M] 8-13 分类列表逻辑开发（5） └── 9-实战“欢乐购”：购物车逻辑开发/ ├── [ 69M] 9-1 详情页面购物车弹窗功能开发（上） ├── [ 93M] 9-2 详情页面购物车弹窗功能开发（下） ├── [145M] 9-3 详情页面添加购物车逻辑实现 ├── [ 96M] 9-4 分类列表页面购物车逻辑实现（上） ├── [ 59M] 9-5 分类列表页面购物车逻辑实现（下） ├── [123M] 9-6 购物车页面布局开发（上） ├── [123M] 9-7 购物车页面布局开发（下） ├── [ 84M] 9-8 购物车实现动态话数据渲染（上） ├── [ 55M] 9-9 购物车实现动态话数据渲染（下） ├── [ 82M] 9- 10 购物车下单逻辑实现（上） └── [ 76M] 9- 11 购物车下单逻辑实现（下） ├── 10-实战“欢乐购”：订单详情页面的开发与项目上线/ │ ├── [114M] 10-1 订单详情页面布局开发（上） │ ├── [ 99M] 10-2 订单详情页面布局开发（下） │ ├── [123M] 10-3 订单页面收货人信息逻辑开发（上） │ ├── [119M] 10-4 订单页面收货人信息逻辑开发（下） │ ├── [ 77M] 10-5 日期选择器的使用方法 │ ├── [ 65M] 10-6 订单支付逻辑开发（上） │ ├── [ 60M] 10-7 订单支付逻辑开发（下） │ ├── [ 50M] 10-8 项目上线流程（上） │ └── [ 47M] 10-9 项目上线流程（下） └── 11-【福利】彩蛋：React 框架实现原理/ ├── [ 51M] 11-1 React 代码是如何被转化成原生 JS 代码的 ├── [ 50M] 11-2 createElement 底层的实现 ├── [ 36M] 11-3 Babel 转换 JSX 的实现 ├── [ 50M] 11-4 ReactDOM.render 方法的实现逻辑 ├── [ 50M] 11-5 Concurrent Mode 实现思路 ├── [ 54M] 11-6 Fiber 的原理和基础实现（上） ├── [109M] 11-7 Fiber 的原理和基础实现（下） ├── [ 82M] 11-8 Render & Commit 阶段 ├── [115M] 11-9 Reconciliation 阶段（上） ├── [126M] 11- 10 Reconciliation 阶段（中） ├── [ 88M] 11- 11 Reconciliation 阶段（下） ├── [ 66M] 11- 12 函数组件的实现 └── [120M] 11- 13 useState 的实现
