React設計原理

第1篇 理念篇
第1章 前端框架原理概覽 2
1.1 初識前端框架 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 前端框架使用的技術 20
1.2.1 編程：細粒度更新 20
1.2.2 AOT 29
1.2.3 Virtual DOM 32
1.3 前端框架的實現(xiàn)原理 35
1.3.1 Svelte 35
1.3.2 Vue3 43
1.3.3 React 46
1.4 總結 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 底層架構的演進 57
2.2.1 新舊架構介紹 58
2.2.2 主打特性的迭代 60
2.2.2 漸進升級策略的迭代 61
2.3 Fiber架構 65
2.3.1 FiberNode的含義 65
2.3.2 雙緩存機制 68
2.3.3 mount時Fiber Tree的構建 69
2.3.4 update時Fiber Tree的構建 71
2.4 調試React源碼 72
2.4.1 倉庫結構概覽 73
2.4.2 以本書推薦方式調試源碼 74
2.4.3 以官方方式調試源碼 75
2.5 總結 77
第2篇 架構篇
第3章 render階段 80
3.1 流程概覽 81
3.2 beginWork 83
3.3 React中的位運算 87
3.3.1 基本的三種位運算 88
3.3.2 位運算在“標記狀態(tài)”中的應用 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 總結 104
第4章 commit階段 105
4.1 流程概覽 106
4.1.1 子階段的執(zhí)行流程 108
4.1.2 Effects list 111
4.2 錯誤處理 113
4.2.1 捕獲錯誤 115
4.2.2 構造callback 116
4.2.3 執(zhí)行callback 118
4.3 BeforeMutation階段 119
4.4 Mutation階段 120
4.4.1 刪除DOM元素 120
4.4.2 插入、移動DOM元素 122
4.4.3 更新DOM元素 125
4.4.4 Fiber Tree切換 127
4.5 Layout階段 127
4.6 總結 129
第5章 schedule階段 130
5.1 編程：簡易schedule階段實現(xiàn) 131
5.1.1 Scheduler簡介 133
5.1.2 改造后的schedule方法 134
5.1.3 改造后的perform方法 137
5.1.4 改造后的完整流程 140
5.2 Scheduler的實現(xiàn) 148
5.2.1 流程概覽 149
5.2.2 優(yōu)先級隊列的實現(xiàn) 151
5.2.3 宏任務的選擇 152
5.3 Lane模型 154
5.3.1 React與Scheduler的結合 155
5.3.2 基于expirationTime的算法 159
5.3.3 基于Lane的算法 163
5.4 Lane模型在React中的應用 166
5.4.1 初始化lane 168
5.4.2 從fiberNode到FiberRootNode 171
5.4.3 調度FiberRootNode 173
5.4.4 調度策略 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 總結 190
第3篇 實現(xiàn)篇
第6章 狀態(tài)更新流程 192
6.1 編程：簡易事件系統(tǒng)實現(xiàn) 193
6.1.1 實現(xiàn)SyntheticEvent 195
6.1.2 實現(xiàn)事件傳播機制 196
6.1.3 收集路徑中的事件回調函數(shù) 197
6.1.4 捕獲、冒泡階段的實現(xiàn) 198
6.2 Update 201
6.2.1 心智模型 201
6.2.2 數(shù)據(jù)結構 202
6.2.3 updateQueue 206
6.2.4 產生update 207
6.2.5 消費update需要考慮的問題 211
6.2.6 消費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 對日常開發(fā)的啟示 239
6.6 總結 243
第7章 reconcile流程 244
7.1 單節(jié)點Diff 247
7.2 多節(jié)點Diff 251
7.2.1 設計思路 254
7.2.2 算法實現(xiàn) 255
7.3 編程：實現(xiàn)Diff算法 261
7.3.1 遍歷前的準備工作 264
7.3.2 核心遍歷邏輯 265
7.3.3 遍歷后的收尾工作 267
7.4 總結 269
第8章 FC與Hooks實現(xiàn) 270
8.1 心智模型 271
8.1.1 代數(shù)效應 271
8.1.2 FC與Suspense 273
8.1.3 Suspense工作流程 279
8.2 編程：簡易useState實現(xiàn) 284
8.2.1 實現(xiàn)“產生更新的流程” 284
8.2.2 實現(xiàn)useState 288
8.2.3 簡易實現(xiàn)的不足 293
8.3 Hooks流程概覽 294
8.3.1 dispatcher 294
8.3.2 Hooks的數(shù)據(jù)結構 296
8.3.3 Hooks執(zhí)行流程 297
8.4 useState與useReducer 299
8.5 effect相關Hook 302
8.5.1 數(shù)據(jù)結構 303
8.5.2 聲明階段 304
8.5.3 調度階段 306
8.5.4 執(zhí)行階段 308
8.6 useMemo與useCallback 309
8.6.1 mount時執(zhí)行流程 309
8.6.2 update時執(zhí)行流程 310
8.6.3 useMemo的妙用 311
8.7 useRef 312
8.7.1 實現(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實現(xiàn)原理 322
8.8.2 useTransition工作流程 324
8.8.3 entangle機制 326
8.8.4 entangle實現(xiàn)原理 327
8.8.5 entangle工作流程 328
8.9 useDeferredValue 333
8.10 編程：實現(xiàn)useErrorBoundary 336
8.10.1 定義dispatcher 338
8.10.2 實現(xiàn)邏輯 339
8.10.3 提取公共方法 342
8.10.4 render階段錯誤處理流程 343
8.10.5 commit階段錯誤處理流程 349
8.11 總結 351