React 設計原理

本書致力於剖析React設計理念與實現原理，基於React 18版本源碼講解。全書劃分為3個篇章，第1篇為理念篇（第1章～第2章），講解React在主流前端框架中的定位與設計理念。第2篇為架構篇（第3章～第5章），講解React架構中的3個階段——schedule、render、commit，以及如何在架構中踐行設計理念。第3篇為實現篇（第6章～第8章），貫穿React架構中的3個階段，講解具體API的實現細節。本書的目標讀者包括有實際React項目經驗並希望更深入理解React的開發人員，以及沒有使用過React但對前端框架設計感興趣的開發人員。通過學習本書，讀者可以對當前主流前端框架的實現原理有清晰的認識，並對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