React設計原理

第1篇 理念篇
第1章 前端框架原理概覽 2
1.1 初識前端框架 3
1.1.1 如何描述UI 3
1.1.2 如何組織UI與邏輯 8
1.1.3 如何在元件之間傳輸資料 12
1.1.4 前端框架的分類依據 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 前端框架的實現原理 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 事件迴圈 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 位元運算在“標記狀態”中的應用 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 子階段的執行流程 108
4.1.2 Effects list 111
4.2 錯誤處理 113
4.2.1 捕獲錯誤 115
4.2.2 構造callback 116
4.2.3 執行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階段實現 131
5.1.1 Scheduler簡介 133
5.1.2 改造後的schedule方法 134
5.1.3 改造後的perform方法 137
5.1.4 改造後的完整流程 140
5.2 Scheduler的實現 148
5.2.1 流程概覽 149
5.2.2 優先順序佇列的實現 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發展史 187
5.5.2 不同框架Batched Updates的區別 189
5.6 總結 190

第3篇 實現篇
第6章 狀態更新流程 192
6.1 程式設計：簡易事件系統實現 193
6.1.1 實現SyntheticEvent 195
6.1.2 實現事件傳播機制 196
6.1.3 收集路徑中的事件回呼函數 197
6.1.4 捕獲、冒泡階段的實現 198
6.2 Update 201
6.2.1 心智模型 201
6.2.2 資料結構 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 性能優化 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 對日常開發的啟示 239
6.6 總結 243
第7章 reconcile流程 244
7.1 單節點Diff 247
7.2 多節點Diff 251
7.2.1 設計思路 254
7.2.2 演算法實現 255
7.3 程式設計：實現Diff演算法 261
7.3.1 遍歷前的準備工作 264
7.3.2 核心遍歷邏輯 265
7.3.3 遍歷後的收尾工作 267
7.4 總結 269
第8章 FC與Hooks實現 270
8.1 心智模型 271
8.1.1 代數效應 271
8.1.2 FC與Suspense 273
8.1.3 Suspense工作流程 279
8.2 程式設計：簡易useState實現 284
8.2.1 實現“產生更新的流程” 284
8.2.2 實現useState 288
8.2.3 簡易實現的不足 293
8.3 Hooks流程概覽 294
8.3.1 dispatcher 294
8.3.2 Hooks的資料結構 296
8.3.3 Hooks執行流程 297
8.4 useState與useReducer 299
8.5 effect相關Hook 302
8.5.1 資料結構 303
8.5.2 聲明階段 304
8.5.3 調度階段 306
8.5.4 執行階段 308
8.6 useMemo與useCallback 309
8.6.1 mount時執行流程 309
8.6.2 update時執行流程 310
8.6.3 useMemo的妙用 311
8.7 useRef 312
8.7.1 實現原理 313
8.7.2 ref的工作流程 314
8.7.3 ref的失控 317
8.7.4 ref失控的防治 318
8.8 useTransition 321
8.8.1 useTransition實現原理 322
8.8.2 useTransition工作流程 324
8.8.3 entangle機制 326
8.8.4 entangle實現原理 327
8.8.5 entangle工作流程 328
8.9 useDeferredValue 333
8.10 程式設計：實現useErrorBoundary 336
8.10.1 定義dispatcher 338
8.10.2 實現邏輯 339
8.10.3 提取公共方法 342
8.10.4 render階段錯誤處理流程 343
8.10.5 commit階段錯誤處理流程 349
8.11 總結 351

卡頌，前端工程師。曾先後就職於360奇舞團、位元組跳動等企業。技術社區活躍者，開源電子書《React技術揭秘》的作者。