解决什么工作场景

日常写 React 的上班族，多半经历过状态越管越乱、组件层层透传 props 传到眼花、表单校验一加就出 bug 的阶段。这门课针对的不是怎么搭个增删改查页面，而是那些一旦项目变大就会卡脖子的具体场景：全局状态怎么分片、路由数据怎么和 store 联动、第三方组件库的表单底层是怎么运转的、出了疑难报错能不能跟到源码里定位。它把 redux、react-redux、react-router、mobx、recoil 以及 dva、umi 这类生态件拆成可手写的实现来讲，目标是让你在遇到复杂业务时，能判断该用哪套方案、为什么用它、以及它内部到底做了什么。

适合什么基础与建议先看哪几块

资料不适合零基础。它默认你已经能独立写函数组件、懂 hooks 基本用法、跑通过至少一个脚手架项目，缺的是对底层调度和状态库原理的系统认知。如果是转行刚学完语法的读者，直接上来啃源码会非常吃力。建议先从 Redux 系列切入，因为它体量适中，手写实现和中间件逻辑能帮你建立“状态变更怎么流转”的心智模型；接着看 Antd Form 那块，对照你平时用第三方组件库表单的困惑，理解 HOC 和函数组件两种适配思路；最后再碰 React18 新特性与源码剖析，这部分信息密度最大，放在前面容易劝退。

学完能独立做什么与资料怎么配合练习

看完这套资料，你应当能独立做几件实事：给中后台项目从零搭一套带中间件的状态管理并说清选型理由；在不依赖现成库时手写一个轻量级表单校验与字段绑定方案；遇到渲染异常或更新不触发时，能进源码调试而不是盲猜。练习时不要只跟着视频点头，每写完一个 redux 或 Form 的简版实现，就回手替换掉自己练习项目里对应的第三方依赖，跑通真实业务流再换回来。遇到卡壳，优先翻 redux 和 Form 两块的源码级拆解，这两处讲透了，后面 umi、dva 的封装思路大都能顺推下来。


React源码手写与阅读调试、redux、react-redux、react-router、dva、umi、mobx、recoil等。 预计学习成果：精通Rea

课程目录

*   01 React18新特性源码剖析/

  *   01 React18新特性源码级剖析 1

  *   02 React18新特性源码级剖析 2

  *   03 React18新特性源码级剖析 3

*   02 Antd Form表单解决方案原理源码/

  *   01 1. AntD3 Form表单源码（HOC解决方案）

  *   02 2. 初步实现AntD4 Form

  *   03 3. 实现校验与适配类组件

  *   04 4. 实现函数组件版Field与总结

*   03 精通Redux系列/

  *   01 1. 实现redux

  *   02 2. 实现常用redux中间件

  *   03 3. 实现redux combineReducers

  *   04 4. react-redux 基础

  *   05 5. react-redux基础使用

  *   06 6. 实现 react-redux Provider与connect

  *   07 7. react-redux hook api

  *   08 8. react18版的react-redux

  *   09 lesson9. redux-toolkit基础

  *   10 lesson10. 实现redux-toolkit

  *   11 lesson11. 实现redux-toolkit的createReducer

*   04 精通Router系列/

  *   01 1. react-router 6 基础使用

  *   02 2.实现Routes

  *   03 3. 实现路由切换

  *   04 4.实现路由渲染

  *   05 5. 路由匹配，支持动态路由

  *   06 6. 路由守卫

  *   07 7. 实现Navigate与useNavigate

  *   08 8. 懒加载

  *   09 9. 标记选中的Link，并实现useMatch与useResolvedPath

*   05 异步解决方案/

  *   01 1. 异步解决方案-上

  *   02 1. 异步解决方案-下

  *   03 2. redux-saga使用

*   06 Redux-Saga系列/

  *   01 1. redux-saga概念

  *   02 2. 实现effects

  *   03 3. 实现createSagaMiddleware

  *   04 4. 实现redux-saga与redux的通信

  *   05 5. effect all

*   07 DVA系列/

  *   01 1. DVA基础

  *   02 2. DVA原理

*   08 UMI4系列/

  *   01 1. umi4基础

  *   02 2. umi4源码查看

  *   03 3. umi4路由原理-路由配置解析

  *   04 4. umi4路由原理-react-router6

  *   05 5.umi4数据流

  *   06 6. umi4与dva

*   09 React源码剖析/

  *   01 1. 为什么学习源码

  *   02 2.如何调试React源码

  *   03 3. React中常见的数据结构-1

  *   04 3. React中常见的数据结构-2

  *   05 4. 初次渲染与更新-1

  *   06 4. 初次渲染与更新-2

  *   07 4. 初次渲染与更新-3

  *   08 4. 初次渲染与更新-4

  *   09 4. 初次渲染与更新-5

  *   10 5.任务调度-1

  *   11 5.任务调度-2

  *   12 5.任务调度-3

  *   13 6. 类组件

  *   14 7. 函数组件

  *   15 8.diff原理：reconcileChildren

  *   16 9. Context原理

*   10 mini1 react/

  *   01 1. mini-react指南

  *   02 2. 虚拟DOM与fiber

  *   03 3. fiber的构建与任务执行

  *   04 4. 初次渲染渲染

  *   05 5. 实现原生节点初次渲染

  *   06 6. 实现函数组件、类组件、文本、Fragment的初次渲染

  *   07 7. React中的任务调度与最小堆

  *   08 8. 实现任务调度

  *   09 9.精通Hooks

  *   10 10. 实现useReducer

  *   11 11. 实现useState

  *   12 12. 节点的删除与更新

  *   13 13. 修改目录

  *   14 14. 删除多个老节点

  *   15 15. 真正的React VDOM DIFF 1

  *   16 15. 真正的React VDOM DIFF 2

  *   17 15. 真正的React VDOM DIFF 3

  *   18 16. 对比React 与Vue的 VDOM DIFF

  *   19 17. 实现useEffect与useLayoutEffect

*   11 mini2 react/

  *   01 1. mini2 react专栏介绍

  *   02 2. mini2-react架子搭建

  *   03 3.1 任务调度-调度任务入口-scheduleCallback

  *   04 3.2. 任务调度-delay任务处理

  *   05 3.3. 任务调度-在时间切片内执行任务workLoop

  *   06 3.4. 任务调度

  *   07 3.5. 任务调度-模拟requestIdleCallback

  *   08 3.6. 任务调度-结尾

  *   09 4. 虚拟DOM与Fiber

  *   10 5. 初次渲染

  *   11 6. 函数组件、类组件、文本、Fragment的初次渲染

  *   12 7.1 Hooks基础

  *   13 7.2 Hooks原理

  *   14 7.3 Hooks-实现useReducer与diff算法

  *   15 7.4 Hooks-节点的位置移动与插入

  *   16 7.5 Hooks-实现useState

  *   17 7.6 Hooks - 允许非原生标签组件作为createRoot(root).rende

  *   18 8.1 Hooks-实现 useLayouteffect

  *   19 8.2 Hooks-实现useEffect

  *   20 8.3 Hooks-实现 useMemo

  *   21 8.4 Hooks-实现 useCallback

  *   22 8.5 Hooks-实现 useRef

  *   23 9.1 Context - 基本使用

  *   24 9.2 Context - 实现createContext

  *   25 9.3 Context - 实现fiber Context 单链表管理 与 useCont

  *   26 9.4 Context - 实现Consumer

  *   27 9.5 Context - 实现contextType

  *   28 9.6 Context - 实现value的栈结构

*   12 精通MobX系列/

  *   01 1. mobx入门

  *   02 2. 实现TodoList

  *   03 3. 实现mobx-react-lite的observer与useObserver

  *   04 4. 实现mobx-react-lite的Observer

  *   05 5. 实现mobx-react-lite的Observer的useLocalObserva

  *   06 6. 集成React的小贴士

  *   07 7. 优化React组件渲染

  *   08 8. 实现mobx-react的observer

  *   09 9. 实现mobx-react的MobXProviderContext与Provider

  *   10 10. 实现mobx-react的inject

  *   11 11. 实现mobx的ObservableValue与注解

  *   12 12. 实现mobx的makeObservable、observable与core

  *   13 13. 实现mobx的Reaction

  *   14 14. 实现mobx的makeAutoObservable

  *   15 15. 实现mobx总结

*   13 Formily/

  *   01 1. Formily入门

  *   02 2. Formily原理

  *   03 3.实现formily-antd

  *   04 4.实现formily-react

  *   05 5.实现formily-reactive-react

  *   06 6.实现formily-core基础

  *   07 7.实现formilycore数据校验

  *   08 8.实现formily-reactive

*   14 Recoil专栏/

  *   01 lesson1. 核心概念

  *   02 lesson2. 快速上手

  *   03 lesson3. TodoList

  *   04 lesson4. Family函数

  *   05 lesson5. 异步

  *   06 lesson6. Recoil 源码解读