React設(shè)計(jì)原理

第1篇 理念篇
第1章 前端框架原理概覽 2
1.1 初識(shí)前端框架 3
1.1.1 如何描述UI 3
1.1.2 如何組織UI與邏輯 8
1.1.3 如何在組件之間傳輸數(shù)據(jù) 12
1.1.4 前端框架的分類依據(jù) 14
1.1.5 React中的自變量與因變量 18
1.2 前端框架使用的技術(shù) 20
1.2.1 編程：細(xì)粒度更新 20
1.2.2 AOT 29
1.2.3 Virtual DOM 32
1.3 前端框架的實(shí)現(xiàn)原理 35
1.3.1 Svelte 35
1.3.2 Vue3 43
1.3.3 React 46
1.4 總結(jié) 48
第2章 React理念 49
2.1 問題與解決思路 49
2.1.1 事件循環(huán) 50
2.1.2 瀏覽器渲染 53
2.1.3 CPU瓶頸 55
2.1.4 I/O瓶頸 56
2.2 底層架構(gòu)的演進(jìn) 57
2.2.1 新舊架構(gòu)介紹 58
2.2.2 主打特性的迭代 60
2.2.2 漸進(jìn)升級(jí)策略的迭代 61
2.3 Fiber架構(gòu) 65
2.3.1 FiberNode的含義 65
2.3.2 雙緩存機(jī)制 68
2.3.3 mount時(shí)Fiber Tree的構(gòu)建 69
2.3.4 update時(shí)Fiber Tree的構(gòu)建 71
2.4 調(diào)試React源碼 72
2.4.1 倉庫結(jié)構(gòu)概覽 73
2.4.2 以本書推薦方式調(diào)試源碼 74
2.4.3 以官方方式調(diào)試源碼 75
2.5 總結(jié) 77
第2篇 架構(gòu)篇
第3章 render階段 80
3.1 流程概覽 81
3.2 beginWork 83
3.3 React中的位運(yùn)算 87
3.3.1 基本的三種位運(yùn)算 88
3.3.2 位運(yùn)算在“標(biāo)記狀態(tài)”中的應(yīng)用 89
3.4 completeWork 90
3.4.1 flags冒泡 91
3.4.2 mount概覽 91
3.4.3 update概覽 96
3.5 編程：ReactDOM Renderer 98
3.6 總結(jié) 104
第4章 commit階段 105
4.1 流程概覽 106
4.1.1 子階段的執(zhí)行流程 108
4.1.2 Effects list 111
4.2 錯(cuò)誤處理 113
4.2.1 捕獲錯(cuò)誤 115
4.2.2 構(gòu)造callback 116
4.2.3 執(zhí)行callback 118
4.3 BeforeMutation階段 119
4.4 Mutation階段 120
4.4.1 刪除DOM元素 120
4.4.2 插入、移動(dòng)DOM元素 122
4.4.3 更新DOM元素 125
4.4.4 Fiber Tree切換 127
4.5 Layout階段 127
4.6 總結(jié) 129
第5章 schedule階段 130
5.1 編程：簡(jiǎn)易schedule階段實(shí)現(xiàn) 131
5.1.1 Scheduler簡(jiǎn)介 133
5.1.2 改造后的schedule方法 134
5.1.3 改造后的perform方法 137
5.1.4 改造后的完整流程 140
5.2 Scheduler的實(shí)現(xiàn) 148
5.2.1 流程概覽 149
5.2.2 優(yōu)先級(jí)隊(duì)列的實(shí)現(xiàn) 151
5.2.3 宏任務(wù)的選擇 152
5.3 Lane模型 154
5.3.1 React與Scheduler的結(jié)合 155
5.3.2 基于expirationTime的算法 159
5.3.3 基于Lane的算法 163
5.4 Lane模型在React中的應(yīng)用 166
5.4.1 初始化lane 168
5.4.2 從fiberNode到FiberRootNode 171
5.4.3 調(diào)度FiberRootNode 173
5.4.4 調(diào)度策略 175
5.4.5 解決饑餓問題 178
5.4.6 root.pendingLanes工作流程 182
5.5 Batched Updates 186
5.5.1 Batched Updates發(fā)展史 187
5.5.2 不同框架Batched Updates的區(qū)別 189
5.6 總結(jié) 190
第3篇 實(shí)現(xiàn)篇
第6章 狀態(tài)更新流程 192
6.1 編程：簡(jiǎn)易事件系統(tǒng)實(shí)現(xiàn) 193
6.1.1 實(shí)現(xiàn)SyntheticEvent 195
6.1.2 實(shí)現(xiàn)事件傳播機(jī)制 196
6.1.3 收集路徑中的事件回調(diào)函數(shù) 197
6.1.4 捕獲、冒泡階段的實(shí)現(xiàn) 198
6.2 Update 201
6.2.1 心智模型 201
6.2.2 數(shù)據(jù)結(jié)構(gòu) 202
6.2.3 updateQueue 206
6.2.4 產(chǎn)生update 207
6.2.5 消費(fèi)update需要考慮的問題 211
6.2.6 消費(fèi)update 214
6.3 ReactDOM.createRoot流程 219
6.4 useState流程 220
6.5 性能優(yōu)化 222
6.5.1 eagerState策略 223
6.5.2 bailout策略 227
6.5.3 bailout策略的示例 233
6.5.4 bailout與Context API 235
6.5.5 對(duì)日常開發(fā)的啟示 239
6.6 總結(jié) 243
第7章 reconcile流程 244
7.1 單節(jié)點(diǎn)Diff 247
7.2 多節(jié)點(diǎn)Diff 251
7.2.1 設(shè)計(jì)思路 254
7.2.2 算法實(shí)現(xiàn) 255
7.3 編程：實(shí)現(xiàn)Diff算法 261
7.3.1 遍歷前的準(zhǔn)備工作 264
7.3.2 核心遍歷邏輯 265
7.3.3 遍歷后的收尾工作 267
7.4 總結(jié) 269
第8章 FC與Hooks實(shí)現(xiàn) 270
8.1 心智模型 271
8.1.1 代數(shù)效應(yīng) 271
8.1.2 FC與Suspense 273
8.1.3 Suspense工作流程 279
8.2 編程：簡(jiǎn)易u(yù)seState實(shí)現(xiàn) 284
8.2.1 實(shí)現(xiàn)“產(chǎn)生更新的流程” 284
8.2.2 實(shí)現(xiàn)useState 288
8.2.3 簡(jiǎn)易實(shí)現(xiàn)的不足 293
8.3 Hooks流程概覽 294
8.3.1 dispatcher 294
8.3.2 Hooks的數(shù)據(jù)結(jié)構(gòu) 296
8.3.3 Hooks執(zhí)行流程 297
8.4 useState與useReducer 299
8.5 effect相關(guān)Hook 302
8.5.1 數(shù)據(jù)結(jié)構(gòu) 303
8.5.2 聲明階段 304
8.5.3 調(diào)度階段 306
8.5.4 執(zhí)行階段 308
8.6 useMemo與useCallback 309
8.6.1 mount時(shí)執(zhí)行流程 309
8.6.2 update時(shí)執(zhí)行流程 310
8.6.3 useMemo的妙用 311
8.7 useRef 312
8.7.1 實(shí)現(xiàn)原理 313
8.7.2 ref的工作流程 314
8.7.3 ref的失控 317
8.7.4 ref失控的防治 318
8.8 useTransition 321
8.8.1 useTransition實(shí)現(xiàn)原理 322
8.8.2 useTransition工作流程 324
8.8.3 entangle機(jī)制 326
8.8.4 entangle實(shí)現(xiàn)原理 327
8.8.5 entangle工作流程 328
8.9 useDeferredValue 333
8.10 編程：實(shí)現(xiàn)useErrorBoundary 336
8.10.1 定義dispatcher 338
8.10.2 實(shí)現(xiàn)邏輯 339
8.10.3 提取公共方法 342
8.10.4 render階段錯(cuò)誤處理流程 343
8.10.5 commit階段錯(cuò)誤處理流程 349
8.11 總結(jié) 351