Skip to content

Open Books

Main Navigation 首页

OpenClaw设计与实现

React18内核探秘

Vue3源码剖析

微前端源码剖析

Appearance

Sidebar Navigation

01思想准备

本章介绍

树立正确的源码观

React是什么

React架构演进过程

树立数据结构与算法的意识

树立用原子视角看问题的意识

React18源码学习方法

02原始版-初始化渲染

本章介绍

环境准备

虚拟DOM与真实DOM的实况对比

JSX相关概念和原理

React和ReactDOM职责划分

createElement代码实现

实现 render、mount 和 createDOM进行初次渲染

实现函数setPropsForDOM为DOM设置属性

调试初始化渲染过程

思考题与解答

本章小结

03原始版-函数组件与类组件

本章介绍

函数组件与类组件介绍

实现函数组件基础功能

实现类组件基础功能

类组件的更新机制分析

实现类组件的setState方法

事件合成机制原理分析

事件合成机制的简单实现

ref的原理分析

类组件的ref源码实现

引入forwardRef的底层逻辑

实现forwardRef为函数组件提供ref的能力

调试函数组件与类组件相关代码

思考题与解答

本章小结

04原始版-DOMDIFF

本章介绍

React DOM DIFF原理

React DOM DIFF算法源码实现

调试DOM DIFF算法

思考题及解答

本章小结

05原始版-类组件的生命周期

本章介绍

生命周期的内涵

生命周期图观察

常用生命周期函数应用案例

常用生命周期函数源码实现

shouldComponentUpdate案例

shouldComponentUpdate实现

getDeriveStateFromProp案例

getDeriveStateFromProps源码实现

getSnapshotBeforeUpdate应用案例

getSnapshotBeforeUpdate源码实现

生命周期相关代码调试

思考题及解答

本章小结

06原始版-性能优化相关特性

本章介绍

PureComponent应用案例

PureComponent源码实现

memo应用案例

memo源码实现

调试PureComponent及memo相关的代码

思考题及解答

本章小结

07原始版-Hooks

本章介绍

Hooks存在的意义

useState应用案例

useState源码实现

useReducer应用案例

useReducer源码实现

useEffect及useLayoutEffect应用案例

useEffect及useLayoutEffect源码实现

useRef应用案例及源码实现

useImperativeHandle应用案例及源码实现

useMemo及useCallback应用案例

useMemo及useCallback源码实现

Hooks相关源码调试

思考题及解答

本章小结

08Fiber架构理论体系

本章介绍

为什么需要Fiber架构

Fiber架构是什么

Fiber是什么

双缓冲策略

什么是工作循环

什么是并发模式

思考题及解答

小结

09Fiber架构-初始化渲染

本章介绍

环境准备

jsx代码实现

createRoot

render函数的阶段划分

beginWork

completeWork

commitWork

代码调试

函数组件的初始化

思考题

小结

10Fiber架构-合成事件系统

本章介绍

事件系统实现思路分析

事件名注册

注册监听事件

派发事件的主要逻辑

收集注册的函数

合成事件

注册事件的回调

代码调试

思考题

小结

introduction

11Fiber架构-组件更新

本章介绍

domdiff思路分析

单节点domdiff

多节点domdiff

思考题

12Fiber架构-Hooks

本章介绍

useReducer挂载

useReducer触发更新

useReducer更新渲染1

useReducer更新渲染2

useState源码实现

useEffect挂载实现

useEffect更新实现

useLayoutEffect源码实现

代码调试

思考题

13Fiber架构-Lane模型与优先级

本章介绍

二进制基础计算

最小堆算法

React18的优先级体系

14Fiber架构-调度系统

本章介绍

调度核心逻辑

任务优先级与事件优先级

lane模型下的更新队列

加入优先级的初始化渲染

15Fiber架构-同步渲染与并发渲染

本章介绍

同步渲染

并发渲染

思考题

09.代码调试

fibertree 代码调试过程请看视频

最后更新于:

Pager

上一篇commitWork

下一篇函数组件的初始化

基于 VitePress 构建

09.代码调试 ​

09.代码调试