第 一部分 React基礎(chǔ)
第 1章 你好，React 3
1.1 React技術(shù)簡介 3
1.2 貫穿全書的聊天應(yīng)用oh-my-chat 3
1.3 快速創(chuàng)建React項目 5
1.3.1 準(zhǔn)備開發(fā)環(huán)境 5
1.3.2 選擇代碼編輯器 7
1.3.3 AI輔助：安裝AI代碼編輯器 7
1.3.4 使用create-vite創(chuàng)建React項目 8
1.3.5 提交代碼到代碼倉庫 12
1.4 編寫基礎(chǔ)應(yīng)用代碼 13
1.4.1 項目實現(xiàn)：編寫聊天視圖代碼 13
1.4.2 AI輔助：生成聯(lián)系人視圖代碼 20
1.5 React的技術(shù)生態(tài) 22
1.5.1 一些開源React組件庫 23
1.5.2 什么是React全家桶 23
1.5.3 React Native簡介 24
1.6 AI輔助的前端開發(fā)概述 24
1.7 小結(jié) 25
第 2章 JSX語法 26
2.1 JSX語法基礎(chǔ) 27
2.1.1 JSX是一種語法糖 27
2.1.2 JSX的X：標(biāo)記的基本寫法 30
2.1.3 JSX的JS：JavaScript表達(dá)式 34
2.1.4 JSX與HTML的異同 35
2.2 進(jìn)一步理解JSX 36
2.2.1 前端開發(fā)的聲明式與命令式 36
2.2.2 JSX的產(chǎn)物：React元素 37
2.2.3 不用JSX還能寫React代碼嗎 39
2.3 編寫JSX的常用模式 39
2.3.1 條件渲染 40
2.3.2 循環(huán)渲染 42
2.3.3 透傳子元素 45
2.3.4 屬性展開語法 45
2.4 AI輔助：生成JSX代碼 46
2.5 小結(jié) 48
第3章 React組件 49
3.1 前端開發(fā)組件化 50
3.2 用函數(shù)定義React組件 51
3.3 組件與Hooks API 52
3.3.1 借用函數(shù)式編程理解Hooks 53
3.3.2 React Hooks有哪些 55
3.3.3 Hooks的使用規(guī)則 55
3.4 組件樹 56
3.5 如何拆分React組件 57
3.5.1 用React Developer Tools查看組件樹 58
3.5.2 拆分組件的原則和常見方法 59
3.5.3 項目實現(xiàn)：繼續(xù)拆分oh-my-chat的組件 60
3.5.4 項目實現(xiàn)：將組件拆分為獨立文件 63
3.5.5 組件拆分的一些心得 65
3.6 AI輔助：AI與組件樹設(shè)計 66
3.6.1 AI輔助：用AI指導(dǎo)組件拆分 66
3.6.2 AI輔助：根據(jù)代碼畫出組件樹 67
3.7 過時API：類組件 68
3.7.1 函數(shù)組件的崛起 68
3.7.2 還有必要學(xué)習(xí)類組件嗎 70
3.8 小結(jié) 71
第4章 數(shù)據(jù)驅(qū)動（上）：React的數(shù)據(jù) 72
4.1 React是數(shù)據(jù)驅(qū)動的前端框架 73
4.2 Props：父組件傳給子組件的數(shù)據(jù) 73
4.2.1 如何聲明和使用props 74
4.2.2 項目實現(xiàn)：利用props拆分oh-my-chat列表組件 75
4.3 state：組件自己的狀態(tài)數(shù)據(jù) 76
4.3.1 組件狀態(tài) 76
4.3.2 核心Hook：useState 77
4.3.3 項目實現(xiàn)：利用state管理oh-my-chat列表數(shù)據(jù) 80
4.3.4 更新state的自動批處理 85
4.4 context：組件樹共享的全局?jǐn)?shù)據(jù) 86
4.5 小結(jié) 88
第5章 數(shù)據(jù)驅(qū)動（下）：組件間通信 89
5.1 React組件間通信 89
5.2 組件間通信模式：狀態(tài)提升 90
5.2.1 什么是狀態(tài)提升 90
5.2.2 項目實現(xiàn)：利用狀態(tài)提升實現(xiàn)聯(lián)系人列表和詳情的聯(lián)動 91
5.3 組件間通信模式：屬性鉆取 93
5.3.1 什么是屬性鉆取 93
5.3.2 項目實現(xiàn)：用context代替props切換視圖 94
5.4 AI輔助：重構(gòu)組件代碼 98
5.5 React中的單向數(shù)據(jù)流 100
5.5.1 什么是數(shù)據(jù)流 101
5.5.2 React單向數(shù)據(jù)流 101
5.5.3 項目實現(xiàn)：分析oh-my-chat的數(shù)據(jù)流 102
5.6 小結(jié) 103
第6章 React的副作用 104
6.1 什么是副作用 104
6.1.1 前端領(lǐng)域的副作用 105
6.1.2 React中的副作用 105
6.1.3 React中的渲染和提交 105
6.2 核心Hook：useEffect 106
6.2.1 useEffect的基本用法 106
6.2.2 副作用的條件執(zhí)行 107
6.2.3 副作用的清理函數(shù) 109
6.3 項目實現(xiàn)：在oh-my-chat加入副作用 110
6.3.1 項目實現(xiàn)：利用副作用讀取遠(yuǎn)程消息 110
6.3.2 項目實現(xiàn)：顯示發(fā)送消息的相對時間 114
6.3.3 項目實現(xiàn)：自動滾動到消息列表末尾 116
6.4 開發(fā)模式下的useEffect 117
6.4.1 依賴項數(shù)組的靜態(tài)檢查 117
6.4.2 為什么副作用會被觸發(fā)兩次 118
6.5 小結(jié) 118
第7章 事件處理 119
7.1 React合成事件 120
7.2 合成事件與原生DOM事件的區(qū)別 120
7.2.1 注冊事件監(jiān)聽函數(shù)的方式不同 120
7.2.2 特定事件的行為不同 121
7.2.3 實際注冊的目標(biāo)DOM元素不同 122
7.3 合成事件的冒泡與捕獲 122
7.4 受控組件 123
7.5 在React中使用原生DOM事件 124
7.5.1 使用原生DOM事件的典型場景 124
7.5.2 項目實現(xiàn)：使用原生DOM事件實現(xiàn)Click-outside 125
7.6 小結(jié) 126
第8章 組件樣式 127
8.1 現(xiàn)代前端樣式開發(fā)面臨的挑戰(zhàn) 128
8.2 React應(yīng)用中開發(fā)樣式的方案 128
8.2.1 內(nèi)聯(lián)樣式 128
8.2.2 CSS Modules 129
8.2.3 CSS-in-JS 130
8.2.4 原子化CSS 131
8.3 如何選擇合適的CSS方案 131
8.4 項目實現(xiàn)：為oh-my-chat實現(xiàn)CSS組件化 132
8.4.1 技術(shù)選型：Linaria框架 133
8.4.2 Linaria框架的安裝和基本用法 133
8.4.3 嵌套選擇器 136
8.4.4 在樣式中使用組件數(shù)據(jù) 138
8.5 AI輔助：修改組件樣式 139
8.5 小結(jié) 140
第二部分 React進(jìn)階
第9章 生命周期與虛擬DOM 143
9.1 React的生命周期 144
9.1.1 React更新過程 144
9.1.2 組件生命周期 144
9.1.3 副作用的生命周期 147
9.2 虛擬DOM 147
9.2.1 什么是虛擬DOM 147
9.2.2 真實DOM有什么問題 148
9.3 協(xié)調(diào) 149
9.3.1 Diffing算法 149
9.3.2 觸發(fā)協(xié)調(diào)的場景 150
9.3.3 什么是Fiber協(xié)調(diào)引擎 150
9.3.4 Fiber中的重要概念和模型 151
9.3.5 協(xié)調(diào)過程是怎樣的 152
9.4 小結(jié) 155
第 10章 應(yīng)用狀態(tài)管理 156
10.1 什么是應(yīng)用狀態(tài)管理 157
10.2 不可變數(shù)據(jù) 158
10.2.1 什么是不可變數(shù)據(jù) 158
10.2.2 不可變數(shù)據(jù)在React中的作用 159
10.3 不可變數(shù)據(jù)的實現(xiàn) 160
10.3.1 手動實現(xiàn) 160
10.3.2 可持久化數(shù)據(jù)結(jié)構(gòu)和Immutable.js 160
10.3.3 如何解決原理和直覺的矛盾 161
10.3.4 在React中使用Immer 161
10.4 再談React應(yīng)用狀態(tài) 162
10.4.1 React應(yīng)用中的狀態(tài)分類 162
10.4.2 全局狀態(tài)與局部狀態(tài) 164
10.4.3 狀態(tài)Hook：useReducer 165
10.5 狀態(tài)管理框架Zustand 166
10.5.1 何時引入獨立的狀態(tài)管理框架 166
10.5.2 Zustand簡介 167
10.5.3 利用Immer在Zustand中操作不可變數(shù)據(jù) 168
10.5.4 項目實現(xiàn)：利用Zustand Immer共享狀態(tài)數(shù)據(jù) 169
10.5.5 項目實現(xiàn)：利用Zustand Immer實現(xiàn)修改和刪除聯(lián)系人 170
10.5.6 可否混用React內(nèi)建state和Zustand 172
10.6 小結(jié) 172
第 11章 優(yōu)化性能與用戶體驗 173
11.1 性能優(yōu)化的時機(jī)與思路 173
11.1.1 不要過早做性能優(yōu)化 174
11.1.2 應(yīng)用性能問題的表現(xiàn) 174
11.1.3 定位性能問題的根源 175
11.2 React組件的性能優(yōu)化 176
11.2.1 利用性能優(yōu)化Hook：useMemo緩存計算結(jié)果 176
11.2.2 利用React純組件避免不必要的渲染 177
11.2.3 利用性能優(yōu)化Hook：useCallback避免純組件失效 179
11.2.4 區(qū)分低優(yōu)先級的更新：startTransition和useTransition 181
11.3 React應(yīng)用的整體性能優(yōu)化 183
11.3.1 為生產(chǎn)環(huán)境構(gòu)建 183
11.3.2 代碼分割 183
11.4 AI輔助：分析React性能問題 183
11.5 AI輔助：分析React報錯信息 185
11.6 小結(jié) 186
第 12章 可擴(kuò)展的React代碼 187
12.1 React代碼的分解和抽象 187
12.1.1 React應(yīng)用代碼中的抽象 188
12.1.2 項目實現(xiàn)：自定義Hooks 188
12.1.3 組件組合 190
12.2 可復(fù)用的自定義Hooks 190
12.3 可復(fù)用的React組件 191
12.3.1 項目實現(xiàn)：抽取公共組件 192
12.3.2 項目實現(xiàn)：在組件中暴露DOM元素 194
12.3.3 高階組件 196
12.3.4 React組件庫 198
12.4 可擴(kuò)展的代碼目錄結(jié)構(gòu) 198
12.4.1 典型的React項目文件目錄結(jié)構(gòu) 198
12.4.2 項目實現(xiàn)：大中型React項目推薦的文件目錄結(jié)構(gòu) 199
12.4.3 項目實現(xiàn)：模塊導(dǎo)入路徑過長怎么辦 200
12.5 AI輔助：代碼審查 201
12.6 小結(jié) 202
第三部分 Web應(yīng)用開發(fā)
第 13章 前端路由 205
13.1 前端路由簡介 205
13.1.1 什么是前端路由 205
13.1.2 前端路由與傳統(tǒng)后端路由的區(qū)別 206
13.2 利用React Router實現(xiàn)React前端路由 207
13.2.1 React Router基本用法 207
13.2.2 項目實現(xiàn)：為oh-my-chat加入前端路由 208
13.3 React代碼分割和懶加載 210
13.3.1 React的代碼分割 210
13.3.2 利用React.lazy和Suspense進(jìn)行懶加載 211
13.3.3 利用React Router進(jìn)行懶加載 212
13.4 小結(jié) 212
第 14章 表單處理 213
14.1 表單處理的要素 214
14.2 表單的數(shù)據(jù)綁定 214
14.2.1 雙向數(shù)據(jù)綁定 214
14.2.2 單向數(shù)據(jù)綁定 215
14.2.3 操作原生表單控件DOM 215
14.2.4 針對整個表單的批量數(shù)據(jù)綁定 216
14.3 表單驗證 217
14.4 表單提交和錯誤處理 219
14.5 非受控組件與受控組件的區(qū)別 220
14.6 React 19新API：Form Actions 221
14.6.1 React 19中的Action 221
14.6.2 React 19新Hook：useFormStatus 223
14.6.3 React 19新Hook：useActionState 224
14.6.4 React 19新Hook：useOptimistic 225
14.7 基于React Hook Form開發(fā)表單 227
14.7.1 React Hook Form的基本用法 227
14.7.2 項目實現(xiàn)：用React Hook Form實現(xiàn)聯(lián)系人表單 228
14.8 小結(jié) 231
第 15章 與服務(wù)器端通信 232
15.1 與服務(wù)器端通信的要點 233
15.1.1 服務(wù)器端通信的異步性 233
15.1.2 HTTP請求的數(shù)據(jù)格式 234
15.1.3 認(rèn)證授權(quán) 234
15.1.4 錯誤處理 235
15.1.5 緩存HTTP請求 235
15.1.6 安全性 235
15.2 在React中實現(xiàn)與服務(wù)器端通信 236
15.2.1 使用瀏覽器標(biāo)準(zhǔn)fetch API 236
15.2.2 使用開源網(wǎng)絡(luò)請求庫Axios 237
15.3 React 19：新use API 237
15.3.1 React 19新API：use(Promise) 237
15.3.2 React 19新API：use(Context) 240
15.4 異步狀態(tài)管理庫React Query 240
15.4.1 什么是異步狀態(tài)管理 240
15.4.2 項目實現(xiàn)：使用React Query緩存對話列表的網(wǎng)絡(luò)請求 241
15.4.3 項目實現(xiàn)：使用React Query變更對話列表數(shù)據(jù) 242
15.4.4 React Query的其他功能 245
15.5 小結(jié) 245
第 16章 質(zhì)量保證 246
16.1 前端項目的質(zhì)量保證 246
16.1.1 質(zhì)量保證與軟件測試的區(qū)別與聯(lián)系 247
16.1.2 人工測試與自動化測試 247
16.1.3 前端開發(fā)者應(yīng)該了解的測試金字塔 248
16.2 React項目的端到端測試 249
16.2.1 使用Playwright創(chuàng)建端到端測試項目 249
16.2.2 項目實現(xiàn)：設(shè)計端到端測試用例 250
16.2.3 項目實現(xiàn)：使用Playwright開發(fā)端到端測試用例 251
16.2.4 項目實現(xiàn)：提升Playwright測試用例的可維護(hù)性 252
16.2.5 其他端到端測試工具 253
16.3 React單元測試 254
16.3.1 React單元測試的范圍和目標(biāo) 254
16.3.2 項目實現(xiàn)：用Jest RTL編寫單元測試 254
16.3.3 項目實現(xiàn)：為oh-my-chat的React組件編寫單元測試 257
16.4 AI輔助：生成測試代碼 258
16.5 小結(jié) 260
第 17章 工程化與架構(gòu) 261
17.1 配置React項目 261
17.1.1 React項目腳手架 262
17.1.2 構(gòu)建與轉(zhuǎn)譯 262
17.1.3 靜態(tài)代碼檢查與格式化 264
17.1.4 代碼自動補(bǔ)全 264
17.1.5 自動化測試與代碼覆蓋率統(tǒng)計 264
17.2 使用TypeScript語言開發(fā)React項目 265
17.2.1 什么是TypeScript 265
17.2.2 項目實現(xiàn)：在React項目中使用TypeScript 266
17.2.3 項目實現(xiàn)：用TypeScript定義組件props類型 266
17.2.4 用TypeScript定義Hooks類型 267
17.2.5 在React項目中使用TypeScript的建議 268
17.3 部署React項目 268
17.3.1 部署構(gòu)建后的靜態(tài)資源文件 268
17.3.2 CI CD持續(xù)集成與交付 269
17.4 線上監(jiān)控 269
17.5 靈活的React架構(gòu) 270
17.5.1 CSR、SSR與SSG 270
17.5.2 基于React的Web開發(fā)框架Next.js 272
17.6 對React未來的展望 272
17.7 AI輔助：前端開發(fā)的其他環(huán)節(jié) 273
17.8 小結(jié) 274
第 18章 AI聊天機(jī)器人 275
18.1 項目實現(xiàn)：安裝Ollama 276
18.2 項目實現(xiàn)：基于LangChain實現(xiàn)聊天機(jī)器人功能 276
18.2.1 項目實現(xiàn)：基礎(chǔ)的機(jī)器人回復(fù) 276
18.2.2 項目實現(xiàn)：流式對話 278
18.2.3 項目實現(xiàn)：多輪對話 279
18.3 小結(jié) 280