React设计原理

第1篇 理念篇
第1章 前端框架原理概览
1.1 初识前端框架
1.1.1 如何描述UI
1.1.2 如何组织UI与逻辑
1.1.3 如何在组件之间传输数据
· · · · · · (更多)

第1篇 理念篇
第1章 前端框架原理概览
1.1 初识前端框架
1.1.1 如何描述UI
1.1.2 如何组织UI与逻辑
1.1.3 如何在组件之间传输数据
1.1.4 前端框架的分类依据
1.1.5 React中的自变量与因变量
1.2 前端框架使用的技术
1.2.1 编程：细粒度更新
1.2.2 AOT
1.2.3 Virtual DOM
1.3 前端框架的实现原理
1.3.1 Svelte
1.3.2 Vue3
1.3.3 React
1.4 总结
第2章 React理念
2.1 问题与解决思路
2.1.1 事件循环
2.1.2 浏览器渲染
2.1.3 CPU瓶颈
2.1.4 I/O瓶颈
2.2 底层架构的演进
2.2.1 新旧架构介绍
2.2.2 主打特性的迭代
2.2.3 渐进升级策略的迭代
2.3 Fiber架构
2.3.1 FiberNode的含义
2.3.2 双缓存机制
2.3.3 mount时Fiber Tree的构建
2.3.4 update时Fiber Tree的构建
2.4 调试React源码
2.4.1 仓库结构概览
2.4.2 以本书推荐方式调试源码
2.4.3 以官方方式调试源码
2.5 总结
第2篇 架构篇
第3章 render阶段
3.1 流程概览
3.2 beginWork
3.3 React中的位运算
3.3.1 基本的三种位运算
3.3.2 位运算在“标记状态”中的应用
3.4 completeWork
3.4.1 flags冒泡
3.4.2 mount概览
3.4.3 update概览
3.5 编程：ReactDOM Renderer
3.6 总结
第4章 commit阶段
4.1 流程概览
4.1.1 子阶段的执行流程
4.1.2 Effects list
4.2 错误处理
4.2.1 捕获错误
4.2.2 构造callback
4.2.3 执行callback
4.3 BeforeMutation阶段
4.4 Mutation阶段
4.4.1 删除DOM元素
4.4.2 插入、移动DOM元素
4.4.3 更新DOM元素
4.4.4 Fiber Tree切换
4.5 Layout阶段
4.6 总结
第5章 schedule阶段
5.1 编程：简易schedule阶段实现
5.1.1 Scheduler简介
5.1.2 改造后的schedule方法
5.1.3 改造后的perform方法
5.1.4 改造后的完整流程
5.2 Scheduler的实现
5.2.1 流程概览
5.2.2 优先级队列的实现
5.2.3 宏任务的选择
5.3 lane模型
5.3.1 React与Scheduler的结合
5.3.2 基于expirationTime的算法
5.3.3 基于lane的算法
5.4 lane模型在React中的应用
5.4.1 初始化lane
5.4.2 从fiberNode到FiberRootNode
5.4.3 调度FiberRootNode
5.4.4 调度策略
5.4.5 解决饥饿问题
5.4.6 root.pendingLanes工作流程
5.5 Batched Updates
5.5.1 Batched Updates发展史
5.5.2 不同框架Batched Updates的区别
5.6 总结
第3篇 实现篇
第6章 状态更新流程
6.1 编程：简易事件系统实现
6.1.1 实现SyntheticEvent
6.1.2 实现事件传播机制
6.1.3 收集路径中的事件回调函数
6.1.4 捕获、冒泡阶段的实现
6.2 Update
6.2.1 心智模型
6.2.2 数据结构
6.2.3 updateQueue
6.2.4 产生update
6.2.5 消费update需要考虑的问题
6.2.6 消费update
6.3 ReactDOM.createRoot流程
6.4 useState流程
6.5 性能优化
6.5.1 eagerState策略
6.5.2 bailout策略
6.5.3 bailout策略的示例
6.5.4 bailout与Context API
6.5.5 对日常开发的启示
6.6 总结
第7章 reconcile流程
7.1 单节点Diff
7.2 多节点Diff
7.2.1 设计思路
7.2.2 算法实现
7.3 编程：实现Diff算法
7.3.1 遍历前的准备工作
7.3.2 核心遍历逻辑
7.3.3 遍历后的收尾工作
7.4 总结
第8章 FC与Hooks实现
8.1 心智模型
8.1.1 代数效应
8.1.2 FC与Suspense
8.1.3 Suspense工作流程
8.2 编程：简易useState实现
8.2.1 实现“产生更新的流程”
8.2.2 实现useState
8.2.3 简易实现的不足
8.3 Hooks流程概览
8.3.1 dispatcher
8.3.2 Hooks的数据结构
8.3.3 Hooks执行流程
8.4 useState与useReducer
8.5 effect相关Hook
8.5.1 数据结构
8.5.2 声明阶段
8.5.3 调度阶段
8.5.4 执行阶段
8.6 useMemo与useCallback
8.6.1 mount时执行流程
8.6.2 update时执行流程
8.6.3 useMemo的妙用
8.7 useRef
8.7.1 实现原理
8.7.2 ref的工作流程
8.7.3 ref的失控
8.7.4 ref失控的防治
8.8 useTransition
8.8.1 useTransition实现原理
8.8.2 useTransition工作流程
8.8.3 entangle机制
8.8.4 entangle实现原理
8.8.5 entangle工作流程
8.9 useDeferredValue
8.10 编程：实现useErrorBoundary
8.10.1 定义dispatcher
8.10.2 实现逻辑
8.10.3 提取公共方法
8.10.4 render阶段错误处理流程
8.10.5 commit阶段错误处理流程
8.11 总结
· · · · · · (收起)