前端bubucuo 精通React

前端开发

课程简介

从源码重写到工程复用：这份 React 进阶资料怎么读这份资料围绕 React 进阶工程化展开，核心解决一个问题：当你已经能写出基本页面，却对底层调度、状态订阅、表单引擎、中间件机制一知半解时，如何把“会用”推进到“能造”。它不是按 API 文档逐条讲，而是以源码重写为主线，覆盖 React18 新特性源码剖析、Antd4 Form 实现、Formily…

已有 1 人浏览发布 2026-10-03 更新 2026-10-03

从源码重写到工程复用：这份 React 进阶资料怎么读

这份资料围绕 React 进阶工程化展开，核心解决一个问题：当你已经能写出基本页面，却对底层调度、状态订阅、表单引擎、中间件机制一知半解时，如何把“会用”推进到“能造”。它不是按 API 文档逐条讲，而是以源码重写为主线，覆盖 React18 新特性源码剖析、Antd4 Form 实现、Formily 全家桶原理、Redux 及其中间件手写。适合有一定 React 实战基础、能独立搭中小型项目，但想深入理解状态与表单底层机制的开发者对照实践。资料按主题切成多个独立模块，每块都遵循“先讲原理再动手实现”的节奏，建议不要只看视频，而是边看边在本地仓库里跟着重写，遇到卡点再回看对应片段，这样比空看更容易把抽象的调度流程落到代码结构上。

建议的切入顺序与可复用模块

如果时间有限，建议先从 Redux 系列切入，因为它体量适中且结构清晰：从实现核心 createStore、combineReducers，到常用中间件、react-redux 的订阅与连接，能快速建立起“状态变更如何驱动视图”的完整心智模型。接着切到 React18 新特性源码剖析，重点理解并发渲染、优先级调度、自动批处理等机制，这部分对排查渲染性能问题很关键。表单方向则按 Antd4 Form 到 Formily 的顺序推进：先手写一个简化版 Form，理解 Field 注册、校验、适配类组件；再进入 Formily，从入门到 formily-core、formily-react、formily-reactive-react 的分层实现，看清一个工业级表单引擎如何拆解数据层、视图层、响应式层。每个模块产出的实现都可以沉淀为可复用脚手架，比如自研 Redux、迷你 Form 内核、响应式订阅工具，后续在中后台项目里按需裁剪复用。

学完后能独立做什么与练习配合方式

把这几块对照跑完后，你能独立做几件偏工程的事：一是自研一套轻量状态管理库并按需加中间件，而不是只会调第三方包；二是实现一个可控的表单内核，支持字段注册、联动、校验、异步校验，并能适配自定义组件库；三是在排查 React 渲染异常、调度优先级、Context 性能瓶颈时有源码级判断依据。配合练习时，建议每个主题先花半天通看原理片段，再用一到两天做本地重写，重写时刻意不看原始实现，先按自己的理解搭结构，卡住再对照。表单和响应式部分尤其值得写单测，验证字段订阅、派发更新、校验触发是否符合预期。Redux 系列完成后，可以尝试把自研版本接到一个已有项目里替换官方库，观察行为差异，这种对照式实践比单纯复现更能暴露理解盲区。整体节奏不贪快，按模块逐个闭环，比并行推进多个主题更容易把知识固化成可迁移的工程能力。

课程目录

01、React18新特性源码剖析》01、React18新特性源码级剖析 1.mp4 262.20M
01、React18新特性源码剖析》02、React18新特性源码级剖析 2.mp4 48.28M
01、React18新特性源码剖析》03、React18新特性源码级剖析 3.mp4 148.42M
02、Antd4 Form》01、1. 初步实现AntD4 Form.mp4 223.03M
02、Antd4 Form》02、2. 实现校验与适配类组件.mp4 62.82M
02、Antd4 Form》03、3. 实现函数组件版Field与总结.mp4 42.64M
03、Formily》02、2. Formily原理.mp4 19.81M
03、Formily》03、3.实现formily-antd.mp4 60.51M
03、Formily》04、4.实现formily-react.mp4 46.61M
03、Formily》05、5.实现formily-reactive-react.mp4 62.92M
03、Formily》06、6.实现formily-core基础.mp4 203.31M
03、Formily》07、7.实现formily-core数据校验.mp4 73.79M
04、精通Redux系列》01、1. 实现redux.mp4 96.33M
04、精通Redux系列》02、2. 实现常用redux中间件.mp4 118.47M
04、精通Redux系列》03、3. 实现redux combineReducers.mp4 31.84M
04、精通Redux系列》04、4. react-redux 基础.mp4 38.36M
04、精通Redux系列》05、5. react-redux基础使用.mp4 66.77M
04、精通Redux系列》06、6. 实现 react-redux Provider与connect.mp4 101.93M
04、精通Redux系列》08、8. react18版的react-redux.mp4 27.56M
05、精通Router系列》01、1. react-router 6 基础使用.mp4 91.01M
05、精通Router系列》02、2.实现Routes.mp4 38.79M
05、精通Router系列》03、3. 实现路由切换.mp4 58.16M
05、精通Router系列》04、4.实现路由渲染.mp4 88.65M
05、精通Router系列》05、5. 路由匹配，支持动态路由.mp4 47.05M
05、精通Router系列》06、6. 路由守卫.mp4 80.37M
05、精通Router系列》07、7. 实现Navigate与useNavigate.mp4 32.75M
05、精通Router系列》08、8. 懒加载.mp4 18.59M
05、精通Router系列》09、9. 标记选中的Link，并实现useMatch与useResolvedPath.mp4 65.23M
06、异步解决方案》01、1. 异步解决方案-上.mp4 87.43M
06、异步解决方案》02、1. 异步解决方案-下.mp4 71.75M
06、异步解决方案》03、2. redux-saga使用.mp4 105.03M
07、Redux-Saga系列》02、2. 实现effects.mp4 29.06M
07、Redux-Saga系列》03、3. 实现createSagaMiddleware.mp4 66.89M
07、Redux-Saga系列》04、4. 实现redux-saga与redux的通信.mp4 61.89M
08、DVA系列》01、1. DVA基础.mp4 105.61M
08、DVA系列》02、2. DVA原理.mp4 94.78M
09、React源码剖析》01、1. 为什么学习源码.mp4 46.84M
09、React源码剖析》02、2.如何调试React源码.mp4 66.38M
09、React源码剖析》03、3. React中常见的数据结构-1.mp4 90.28M
09、React源码剖析》04、3. React中常见的数据结构-2.mp4 67.14M
09、React源码剖析》05、4. 初次渲染与更新-1.mp4 96.00M
09、React源码剖析》06、4. 初次渲染与更新-2.mp4 89.76M
09、React源码剖析》07、4. 初次渲染与更新-3.mp4 87.02M
09、React源码剖析》08、4. 初次渲染与更新-4.mp4 80.23M
09、React源码剖析》09、4. 初次渲染与更新-5.mp4 18.01M
09、React源码剖析》10、5.任务调度-1.mp4 72.50M
09、React源码剖析》11、5.任务调度-2.mp4 91.03M
09、React源码剖析》12、5.任务调度-3.mp4 16.40M
09、React源码剖析》13、6. 类组件.mp4 129.33M
09、React源码剖析》14、7. 函数组件.mp4 68.80M
09、React源码剖析》15、8.diff原理：reconcileChildren.mp4 64.49M
09、React源码剖析》16、9. Context原理.mp4 123.26M
10、mini react》01、1. mini-react指南.mp4 10.36M
10、mini react》02、2. 虚拟DOM与fiber.mp4 65.63M
10、mini react》03、3. fiber的构建与任务执行.mp4 139.30M
10、mini react》04、4. 初次渲染渲染.mp4 44.45M
10、mini react》05、5. 实现原生节点初次渲染.mp4 95.13M
10、mini react》06、6. 实现函数组件、类组件、文本、Fragment的初次渲染.mp4 92.78M
10、mini react》07、7. React中的任务调度与最小堆.mp4 59.91M
10、mini react》08、8. 实现任务调度.mp4 119.71M
10、mini react》10、10. 实现useReducer.mp4 200.93M
10、mini react》11、11. 实现useState.mp4 46.39M
10、mini react》12、12. 节点的删除与更新.mp4 27.38M
10、mini react》14、14. 删除多个老节点.mp4 19.04M
10、mini react》19、17. 实现useEffect与useLayoutEffect.mp4 109.96M
01、React18新特性源码剖析》02、React18新特性源码级剖析