课程简介
本课程是一门深度解析React18核心原理的实战课程。你将跟随2022年的最新技术脉络,从零开始逐步实现一个精简版的React18,涵盖JSX转换、Fiber架构、Reconciler协调算法、Diff算法、事件系统、Hooks(如useState、useEffect、useTransition、useRef)、Lane模型及并发更新等核心模块。通过亲手编码,你将透彻理解React内部工作机制,掌握其设计思想与性能优化策略,从根本上提升对现代前端框架的认知与开发能力。课程配套完整视频、代码及测试用例,适合希望深入理解React底层原理、寻求技术突破的中高级前端开发者。
下载地址
课程目录
01 课程介绍与基础搭建
第1-2节:课程导学、环境搭建与项目初始化。
02 JSX转换与调试方式
第3-5节:实现JSX打包、转换及两种调试方式。
03 状态更新与触发机制
第6-7节:实现状态更新机制并接入完整流程。
04 初探Mount与CompleteWork
第8-9节:探索挂载流程并实现CompleteWork。
05 初探ReactDOM与Mutation
第10-12节:实现ReactDOM、Mutation子阶段与调试。
06 实现useState与事件系统
第13-15节:实现useState钩子与React事件系统。
07 初探Update与Diff算法
第16-19节:探索更新流程、实现单多节点Diff。
08 实现Fragment与批处理
第20-21节:实现Fragment组件与批处理概念。
09 Lane模型与并发更新
第22-25节:实现Lane模型、调度与并发更新策略。
10 实现useEffect与useRef
第26-28节:实现useEffect数据结构、流程与useRef。
--- 点击展开详细目录 ---
- 🎬 01 搭架子(2022-11-25 15-46-23)-.mp4
- 🎬 02 小试牛刀(2022-11-25 15-46-21)-.mp4
- 🎬 03 初探Reconciler(2022-11-25 15-46-24)-.mp4
- 🎬 04 如何触发更新?(2022-11-25 15-46-26)-.mp4
- 🎬 05 实现首屏渲染(2022-11-25 15-46-27)-.mp4
- 🎬 06 初探ReactDOM(2022-11-25 15-46-28)-.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
|