直击 React 底层逻辑与工程落地的断层
很多前端学习者卡在“会写页面但不懂原理”和“懂理论但不会做项目”之间，这门体系课专门解决这个断层。它不满足于仅仅罗列 API 用法，而是从 Create React App 脚手架搭建开始，深入剖析 JSX 语法解析、虚拟 DOM 到真实 DOM 的映射过程，甚至要求独立封装 createElement 和 render 函数来复现渲染机制。这种对底层的拆解，能帮你彻底理解 React 的组件模型、生命周期以及状态管理的内在逻辑。课程还涵盖了 Prop 类型校验、非受控组件 Refs 操作等细节，适合有一定 JavaScript 基础、熟悉 HTML/CSS，但想系统化补齐 React 知识盲区的初学者或初级开发者。如果你之前只是照着教程复制代码，却对“为什么这么写”一知半解，这套内容就是为你准备的。
建议优先攻克的核心模块
学习时不必机械地从头看到尾，建议先重点消化前六个关于基础语法、虚拟 DOM 实现原理以及组件封装的内容。这部分是理解后续高级特性的基石，特别是独立实现虚拟 DOM 渲染那一段，看似枯燥，却是建立心智模型的关键。接着立即切入组件基础、状态管理及生命周期章节，结合“Vote 投票组件”这一实战练习，将概念转化为可运行的代码。后半部分涉及合成事件、受控组件以及更复杂的交互逻辑，建议在掌握前两部分后再逐步推进。资料包中虽无独立文档，但视频讲解中穿插的代码演示和调试步骤就是你最好的配套练习材料，务必动手敲出每一个核心函数，不要只看视频。
学完后的能力边界与实战指引
学完这套内容后，你不应只是记住了几个 Hooks 或类组件的写法，而应能独立回答：虚拟 DOM 如何减少不必要的重渲染？Props 和 State 在数据流中是如何单向传递的？如何在组件生命周期中正确管理副作用？在具体操作层面，你将具备从零搭建一个包含表单验证、状态管理、事件处理的完整 React 项目的能力，并理解每个技术选型背后的权衡。建议在学习过程中，每看完一个核心知识点，就尝试脱离视频，自己复现一个简单的功能模块，比如独立封装一个自定义 Hook 或实现一个带有状态管理的列表组件。这种“讲解加复现”的模式，能确保知识真正内化，而不是停留在视频表面的热闹。
课程介绍
react1.png 2023-11-14 20:18 上传 课程目目录： 1 REACT的初步介绍.mp4 2 CREATE-REACT-APP的基础介绍.mp4 3 CREATE-REACT-APP脚手架的一点研究.mp4 4 REACT中JSX语法的基础使用.mp4 5 虚拟DOM到真实DOM.mp4 6 独立封装CREATE-ELEMENT和RENDER实现虚拟DOM渲染.mp4 7 REACT组件基础（函数式组件）.mp4 8 REACT组件基础（类组件）.mp4 9 给传递的属性设置规则（PROP-TYPES）.mp4 10 REACT中的状态管理.mp4 11 REFS非受控组件.mp4 12 REACT组件中的声明周期函数.mp4 13 REACT基础知识练习（VOTE投票组件）.mp4 14 REACT中的合成事件和SET-STA
课程目录
react1.png 2023-11-14 20:18 上传 课程目目录： 1 REACT的初步介绍.mp4 2 CREATE-REACT-APP的基础介绍.mp4 3 CREATE-REACT-APP脚手架的一点研究.mp4 4 REACT中JSX语法的基础使用.mp4 5 虚拟DOM到真实DOM.mp4 6 独立封装CREATE-ELEMENT和RENDER实现虚拟DOM渲染.mp4 7 REACT组件基础（函数式组件）.mp4 8 REACT组件基础（类组件）.mp4 9 给传递的属性设置规则（PROP-TYPES）.mp4 10 REACT中的状态管理.mp4 11 REFS非受控组件.mp4 12 REACT组件中的声明周期函数.mp4 13 REACT基础知识练习（VOTE投票组件）.mp4 14 REACT中的合成事件和SET-STATE到底是同步还是异步.mp4 15 复合组件通信的几种方式汇总.mp4 16 基于属性实现组件间的信息通信.mp4 17 基于发布订阅实现组件间信息通信.mp4 18 基于祖先中的上下文实现组件间通信.mp4 19 REACT版轮播图（实现自动轮播）.mp4 20 REACT版轮播图（最终完成版）.mp4 21 前面基础知识的综合复习.mp4 22 REACT中的CONTEXT API.mp4 23 REACT中的PURE-COMPONENT.mp4 24 REACT-HOOK之USE-STATE.mp4 25 REACT-HOOK之USE-EFFECT.mp4 26 REACT-HOOK之USE-REF.mp4 27 REACT-HOOK之USE-REDUCER.mp4 28 一张图学会REDUX.mp4 29 基于REDUX实现VOTE组件之间的通信.mp4 30 REDUX的工程化管理1（合并REDUCER）.mp4 31 REDUX的工程化管理2.mp4 32 REACT-REDUX的使用（简化REDUX的操作）.mp4 33 综合复习REDUX和REACT-REDUX.mp4 34 ASYNC和AWAIT以及GENERATOT.mp4 35 REACT-REDUX的源码.mp4 36 REDUX的源码.mp4 37 REDUX中间件.mp4 38 基于ANTD构建TASK-OA（未完成）.mp4 39 基于ANTD构建TASK-OA（剩余部分）.mp4 40 不带REDUX数据处理（最后状态不好，可以看下一节）.mp4 41 对上一节的重新梳理复习.mp4 42 基于REDUX来存储数据.mp4 43 完成TASKOA的增删改.mp4 44 RACT-ROUTER的基础知识1.mp4 45 REACT-ROUTER的基础知识2.mp4 46 REACT-ROUTER的基础知识3.mp4 47 一小时掌握最权威的JS同步异步编程原理.mp4 48 PROMISE A+之核心代码实现.mp4 49 PROMISE A+之THEN和CATCH的实现.mp4 50 PROMISE A+之ALL方法的实现.mp4 51 DOM DIFF的概数.mp4 52 小米有品APP：项目的基本骨架介绍.mp4 53 小米有品APP：项目路由和部分模块结构样式的介绍.mp4 54 小米有品APP：完成注册板块功能（包含短信验证码）.mp4 55 小米有品APP：完成登录板块功能（redux存储登录态）.mp4 56 小米有品APP：完成个人中心板块功能（退出登录）.mp4 57 小米有品APP：完成订单中心板块.mp4 58 小米有品APP：详情页面数据的绑定.mp4 59 小米有品APP：详情页面加入购物车的处理.mp4 60 小米有品APP：购物车页面的数据绑定.mp4 61 小米有品APP：购物车中的全选和非全选.mp4 62 小米有品APP：购物车编辑态下的全选处理.mp4 63 小米有品APP：修改购物车产品数量.mp4
