React18内核探秘:手写React高质量源码迈向高阶开发

课程介绍

React18内核探秘:手写React高质量源码迈向高阶开发,经百课优(baikeu.com)精心整理发布。很多课程只是分析源码实现的表像,而缺乏对背后规律的探索。本课通过手写5000+源码,深入理解 React 内部机制,不仅帮助大家理解 React18 的源码实现,还可以透过现象看到本质,掌握源码背后的思想和规律。同时深度剖析 React 源码设计思想,有效提升代码设计能力,为成长为前端架构师做好夯实基础。

相关课程推荐:

最新 React 技术栈,实战复杂低代码项目-仿问卷星|高清完结无密

React18+TS+NestJS+GraphQL 全栈开发在线教育平台|完结

Web前端架构师2022版|已完结

React18内核探秘:手写React高质量源码迈向高阶开发React18内核探秘:手写React高质量源码迈向高阶开发

课程资源目录

├── 1-课程简介/
│   └── [8.0M] 1-1 导学
├── 2-登高望远,手写源码前的思想准备/
│   ├── [4.5M] 2-1 思想准备01-本章介绍
│   ├── [ 10M] 2-2 思想准备02-源码观
│   ├── [ 69M] 2-3 思想准备03-React是什么
│   ├── [ 29M] 2-4 思想准备04-React架构演进过程
│   ├── [5.7M] 2-5 思想准备05-树立数据结构与算法的意识
│   ├── [4.7M] 2-6 思想准备06-树立用原子视角看问题的意识
│   ├── [9.9M] 2-7 思想准备07-理解React源码学习的基本方法
│   └── [2.3M] 2-8 思想准备08-小结
└── 3-原始版-初始化渲染:实现最原始的渲染过程/
├── [8.8M] 3-1 -本章介绍
├── [ 25M] 3-2 -环境搭建
├── [ 37M] 3-3 -虚拟DOM与真实DOM的实况对比
├── [ 27M] 3-4 -JSX的相关概念和原理
├── [ 17M] 3-5 -React和ReactDOM职责划分
├── [ 59M] 3-6 -createElement
├── [ 60M] 3-7 -render函数
├── [ 22M] 3-8 -setPropsForDom
├── [ 72M] 3-9 -初始化渲染调试
├── [ 15M] 3-10 -思考题
└── [1.1M] 3-11 -小结
├── 4-原始版-引入函数组件与类组件提升渲染能力/
│   ├── [3.2M] 4-1 本章介绍
│   ├── [ 30M] 4-2 组件概念介绍
│   ├── [ 47M] 4-3 实现函数组件的基础功能
│   ├── [ 47M] 4-4 类组件的基本实现
│   ├── [ 24M] 4-5 类组件的更新机制分析
│   ├── [ 61M] 4-6 类组件setState函数的实现
│   ├── [ 88M] 4-7 类组件setState函数的实现
│   ├── [ 28M] 4-8 事件合成机制原理介绍
│   ├── [ 68M] 4-9 实现事件合成机制
│   ├── [ 79M] 4-10 实现事件合成机制
│   ├── [ 60M] 4-11 ref原理分析
│   ├── [ 24M] 4-12 原生标签和类组件ref的实现
│   ├── [ 46M] 4-13 引入forwardRef的底层逻辑
│   ├── [ 39M] 4-14 forwardRef的实现
│   ├── [ 54M] 4-15 组件相关代码调试
│   ├── [ 12M] 4-16 思考题与解答
│   └── [1.4M] 4-17 小结
├── 5-原始版-对渲染过程进行优化-DOM DIFF/
│   ├── [9.8M] 5-1 -本章介绍
│   ├── [ 50M] 5-2 原理分析
│   ├── [ 33M] 5-3 原理分析
│   ├── [ 66M] 5-4 源码实现-简单场景-1
│   ├── [ 64M] 5-5 源码实现-简单场景-2
│   ├── [107M] 5-6 源码实现-复杂场景-1
│   ├── [ 61M] 5-7 源码实现-复杂场景-2
│   ├── [ 76M] 5-8 源码实现-代码调试
│   ├── [ 55M] 5-9 源码实现-代码调试
│   ├── [ 21M] 5-10 -思考题和解答
│   └── [1.7M] 5-11 -小结
├── 6-原始版-类组件的增强:生命周期/
│   ├── 【更多it资源 www.baikeu.com】React18
│   ├── [3.3M] 6-1 -本章介绍
│   ├── [ 15M] 6-2 -生命周期的本质
│   ├── [ 18M] 6-3 -生命周期图的观察
│   ├── [ 82M] 6-4 -常用生命周期函数案例
│   ├── [ 48M] 6-5 -常用生命周期函数代码实现
│   ├── [ 26M] 6-6 -shouldComponentUpdate案例
│   ├── [ 39M] 6-7 -shouldComponentUpdate源码实现
│   ├── [ 46M] 6-8 -getDefirvedStateFromProps案例
│   ├── [ 26M] 6-9 -getDefirvedStateFromProp源码实现
│   ├── [ 74M] 6-10 -getSnapshotBeforeUpdate案例
│   ├── [ 68M] 6-11 -getSnapshotBeforeUpdate源码实现
│   ├── [ 73M] 6-12 -生命周期函数代码调试
│   ├── [9.6M] 6-13 -思考题与解答
│   └── [870K] 6-14 -本章小结
├── 7-原始版-进一步探索对渲染过程的性能优化/
│   ├── @更多it资源 www.baikeu.com
│   ├── [1.8M] 7-1 -本章介绍
│   ├── [ 28M] 7-2 -PureComponent案例
│   ├── [ 29M] 7-3 -PureComponent源码实现
│   ├── [ 14M] 7-4 -memo案例
│   ├── [ 90M] 7-5 -1-memo源码实现
│   ├── [ 64M] 7-6 -2-memo源码实现
│   ├── [ 67M] 7-7 -代码调试
│   ├── [ 49M] 7-8 -思考题
│   └── [1.6M] 7-9 -小结
├── 8-原始版-引入日常开发的利器:Hooks/
│   ├── [2.4M] 8-1 -本章介绍
│   ├── [ 24M] 8-2 -Hooks概况
│   ├── [ 16M] 8-3 -useSstate案例观察
│   ├── [100M] 8-4 -useState源码实现
│   ├── [ 16M] 8-5 -useReducer案例观察
│   ├── [ 15M] 8-6 -useReducer源码实现
│   ├── [ 39M] 8-7 -useEffect及useLayoutEffect源码实现
│   ├── [ 78M] 8-8 -useEffect及useLayoutEffect源码实现
│   ├── [ 22M] 8-9 -useRef案例和源码
│   ├── [ 33M] 8-10 -useImperativeHandle案例和源码
│   ├── [ 38M] 8-11 -useMemo及useCallback案例
│   ├── [ 32M] 8-12 -useMemo及useCallback源码实现
│   ├── [ 46M] 8-13 -代码调试
│   ├── [ 14M] 8-14 -思考题及解答
│   └── [2.4M] 8-15 -小结
├── 9-React18-React 性能革命:Fiber 架构的设计理念/
│   ├── [1.6M] 9-1 -本章介绍
│   ├── [ 68M] 9-2 -为什么需要Fiber架构
│   ├── [ 22M] 9-3 -Fiber架构是什么
│   ├── [ 26M] 9-4 -Fiber是什么
│   ├── [ 20M] 9-5 -双缓冲策略
│   ├── [ 30M] 9-6 -工作循环
│   ├── [ 11M] 9-7 -并发模式
│   ├── [ 10M] 9-8 -思考题及解答
│   └── [2.2M] 9-9 -本章小结
├── 10-React18-初始化渲染/
│   ├── 【更多it资源 www.baikeu.com】
│   ├── [1.9M] 10-1 -本章介绍
│   ├── [ 29M] 10-2 -环境准备
│   ├── [ 59M] 10-3 -jsxDev代码实现
│   ├── [ 86M] 10-4 createRoot-1
│   ├── [107M] 10-5 createRoot-2
│   ├── [ 63M] 10-6 -createRoot的类型表达实现及调试
│   ├── [ 13M] 10-7 -render函数阶段划分
│   ├── [ 54M] 10-8 updateContainer代码实现-1
│   ├── [ 29M] 10-9 -2updateContainer代码实现
│   ├── [ 54M] 10-10 -1-scheduleUpdateOnFiber
│   ├── [ 63M] 10-11 scheduleUpdateOnFiber-2
│   ├── [ 82M] 10-12 beginWork1-1
│   ├── [ 79M] 10-13 beginWork1-2
│   ├── [ 50M] 10-14 beginWork2-1
│   ├── [ 67M] 10-15 beginWork2-2
│   ├── [ 96M] 10-16 -beginWork调试
│   ├── [ 80M] 10-17 -completeWork1
│   ├── [119M] 10-18 completeWork2-1
│   ├── [ 52M] 10-19 completeWork2-2
│   ├── [102M] 10-20 -completeWork3
│   ├── [121M] 10-21 -completeWork调试
│   ├── [ 98M] 10-22 commitWork代码实现-1
│   ├── [114M] 10-23 commitWork代码实现-2
│   ├── [ 54M] 10-24 -代码调试
│   ├── [ 76M] 10-25 -函数组件
│   ├── [9.1M] 10-26 -思考题
│   └── [ 25M] 10-27 -小结
└── 11-React18-合成事件系统/
├── [7.2M] 11-1 -本章介绍
├── [ 10M] 11-2 -思路分析
├── [ 63M] 11-3 -事件名注册
├── [ 99M] 11-4 -注册监听事件
├── [ 92M] 11-5 事件派发主要逻辑-1
├── [114M] 11-6 事件派发主要逻辑-2
├── [ 66M] 11-7 -收集监听器函数
├── [ 68M] 11-8 -合成事件对象
├── [ 50M] 11-9 -事件函数回调
├── [ 53M] 11-10 -代码调试
├── [ 13M] 11-11 -思考题
└── [6.8M] 11-12 -小结
├── 12-React18-组件更新/
│   ├── [4.5M] 12-1 -本章介绍
│   ├── [ 55M] 12-2 dom diff思路分析 1
│   ├── [ 39M] 12-3 dom diff思路分析 2
│   ├── [110M] 12-4 -单节点dom diff
│   ├── [ 59M] 12-5 多节点dom diff 1
│   ├── [ 75M] 12-6 多节点dom diff 2
│   ├── [ 99M] 12-7 -多节点dom diff 3
│   ├── [ 32M] 12-8 多节点dom diff 4
│   ├── [ 62M] 12-9 多节点dom diff 5
│   ├── [7.3M] 12-10 -思考题和解答
│   └── [7.7M] 12-11 -小结
├── 13-React18-Hooks/
│   ├── [6.2M] 13-1 -本章介绍
│   ├── [ 48M] 13-2 useReducer挂载-1
│   ├── [ 61M] 13-3 useReducer挂载-2
│   ├── [115M] 13-4 -useReducer触发更新
│   ├── [101M] 13-5 useReducer更新渲染1-1
│   ├── [ 61M] 13-6 useReducer更新渲染1-2
│   ├── [ 70M] 13-7 -useReducer更新渲染2-1
│   ├── [ 63M] 13-8 -useReducer更新渲染2-2
│   ├── [ 70M] 13-9 -useReducer更新渲染3
│   ├── [ 95M] 13-10 -useReducer调试
│   ├── [112M] 13-11 -useState
│   ├── [ 67M] 13-12 -useEffect挂载-1
│   ├── [ 70M] 13-13 -useEffect挂载-2
│   ├── [ 71M] 13-14 useEffect更新1-1
│   ├── [ 70M] 13-15 useEffect更新1-2
│   ├── [117M] 13-16 -useEffect更新2
│   ├── [ 37M] 13-17 -useEffect调试
│   ├── [ 91M] 13-18 -useLayoutEffect
│   ├── [7.6M] 13-19 -思考题及解答
│   └── [6.5M] 13-20 -小结
├── 14-React18-Lane模型与优先级/
│   ├── [ 14M] 14-1 -本章介绍
│   ├── [ 16M] 14-2 -本章介绍
│   ├── [ 77M] 14-3 -二进制的计算
│   ├── [ 47M] 14-4 -最小堆算法原理
│   ├── [ 41M] 14-5 -最小堆算法实现-1
│   ├── [ 64M] 14-6 -最小堆算法实现-2
│   ├── [ 50M] 14-7 -React18优先级体系
│   └── [ 14M] 14-8 -小结
├── 15-React18-调度系统/
│   ├── [ 25M] 15-1 -本章介绍
│   ├── [ 95M] 15-2 -调度核心逻辑1
│   ├── [ 75M] 15-3 调度核心逻辑2-1
│   ├── [ 58M] 15-4 调度核心逻辑2-2
│   ├── [ 80M] 15-5 -ReactFiberLane和ReactEventPriority-1
│   ├── [ 88M] 15-6 -ReactFiberLane和ReactEventPriority-2
│   ├── [122M] 15-7 Lane模型下的更新队列-1
│   ├── [105M] 15-8 Lane模型下的更新队列-2
│   ├── [ 32M] 15-9 Lane模型下的更新队列-3
│   ├── [110M] 15-10 -加入优先级的初始化渲染
│   └── [ 12M] 15-11 -本章小结
├── 16-React18-并发渲染/
│   ├── [4.8M] 16-1 -本章介绍
│   ├── [ 82M] 16-2 -同步渲染
│   ├── [102M] 16-3 -并发渲染
│   ├── [4.7M] 16-4 -思考题
│   └── [ 13M] 16-5 -小结

发表回复

登录... 后才能评论