本课程是一门专为希望深入理解 React 核心原理的开发者打造的实战课程。课程摒弃枯燥的理论讲解，采用“从零实现”的方式，带领你亲手构建一个功能完备的 React18 核心库。你将深入 React 的“心脏”，一步步实现 Reconciler、Renderer、调度器、事件系统等核心模块，彻底掌握 Fiber 架构、并发更新、Lane 模型等 React18 的关键特性，从而具备阅读源码和解决复杂问题的底层能力。
核心学习路径
1. 基础构建与首屏渲染
项目搭建与 JSX 转换：从零开始搭建项目脚手架，深入理解 JSX 的转换过程，并实现自己的 ReactElement 创建逻辑。
初探 Reconciler 与 Mount 流程：深入协调器（Reconciler）的核心，实现 beginWork 和 completeWork，构建 Fiber 树，完成组件的首次渲染（Mount）。
初探 Renderer 与 Commit 阶段：实现 Renderer，将 Fiber 树的变化“提交”到真实 DOM，完成页面的最终渲染。你将亲手实现 ReactDOM.render 的核心逻辑。
2. 状态更新与 Hooks 实现
实现状态更新机制：深入剖析 setState 或 useState 是如何触发更新的，实现从状态变更到调度更新的完整流程。
实现核心 Hooks：
useState：实现状态 Hook，理解其背后的链表结构和更新队列。
useEffect：实现副作用 Hook，掌握其执行时机和依赖项对比的原理。
useRef：实现 Ref Hook，理解其在组件渲染周期中如何持久化保存数据。
3. React18 核心特性：并发模式
实现事件系统：构建一个简易但完整的事件系统，理解 React 事件的合成与委托机制。
实现 Diff 算法：深入实现单节点和多节点的 Diff 算法，理解 React 如何高效地对比和更新 UI。
掌握调度器与 Lane 模型：
Lane 模型：实现 React18 的核心——Lane 模型，理解优先级调度的底层原理。
Scheduler：实现调度阶段，理解任务如何被拆分、中断和恢复。
实现并发更新：
批处理：实现状态更新的批处理机制。
并发更新 Demo：通过实现同步与并发更新的 Demo，直观感受两者的差异。
useTransition：实现 useTransition Hook，掌握如何在并发模式下标记紧急与非紧急更新。
4. 其他核心概念与测试
实现 Fragment：理解并实现 Fragment，支持返回多个子元素。
实现 noop-renderer：创建一个无操作的渲染器，用于在不依赖真实 DOM 的环境下进行测试。
编写测试用例：为 ReactElement、useEffect 等核心功能编写测试用例，以测试驱动的方式验证你的实现是否正确。
课程目录：
React18
01 搭架子.zip
02 小试牛刀.zip
03 初探Reconciler.mp4
04 如何触发更新？.mp4
05 实现首屏渲染.mp4
06 初探ReactDOM.mp4
07 初探FC与实现第二种调试方式.mp4
08 实现useState.mp4
09 ReactElement的测试用例.mp4
09.第九课：ReactElement的测试用例.mp4
10.第十课：初探update流程.mp4
11.课程介绍.mp4
12.「2-2」JSX转换—实现JSX的打包.mp4
13.「2-3」JSX转换—实现第一种调试方式.mp4
14.「4-1」如何触发更新—实现状态更新机制.mp4
15.「4-2」如何触发更新—接入状态更新机制.mp4
16.「5-2」初探mount流程—实现completeWork.mp4
17.「6-2」初探ReactDOM—实现Mutation子阶段.mp4
18.「6-3」初探ReactDOM—实现ReactDOM.mp4
19.「6-4」初探ReactDOM—调试ReactDOM.mp4
20.「7-2」初探FC—实现第二种调试方式.mp4
21.「8-2」实现useState—实现useState.mp4
22.「9-2」ReactElement的测试用例—测试ReactElement.mp4
23.「10-2」初探update流程—处理commit阶段.mp4
24.「10-3」初探update流程—处理useState.mp4
25.「11」实现事件系统.mp4
26.「12-1」实现Diff算法—单节点Diff.mp4
27.「12-2」实现Diff算法—多节点Diff.mp4
28.「12-3」实现Diff算法—处理commit阶段.mp4
29.「13」实现Fragment.mp4
30.「14-1」批处理的概念.mp4
31.「14-2」实现Lane模型.mp4
32.「14-3」实现调度阶段.mp4
32.「14-4」改造更新流程.mp4
33.「15-1」实现useEffect数据结构.mp4
34.「15-2」实现useEffect工作流程.mp4
35.「16-1」实现noop-renderer.mp4
36.「16-2」打包noop-renderer.mp4
37.「16-3」测试useEffect.mp4
38.「17-1」实现同步更新Demo.mp4
39.「17-2」实现并发更新Demo.mp4
40.「18-1」实现并发更新的交互部分.mp4
41.「18-2」实现并发更新的策略逻辑.mp4
42.「18-3」实现并发更新的状态计算.mp4
43.「19-1」useTransition的作用.mp4
44.「19-2」实现useTransition.mp4
45.「20」实现useRef.mp4
下载地址：
感谢您的来访，获取更多精彩文章请收藏本站。
