第 一部分 React基礎(chǔ)
第 1章 你好，React 3
1.1 React技術(shù)簡(jiǎn)介 3
1.2 貫穿全書的聊天應(yīng)用oh-my-chat 3
1.3 快速創(chuàng)建React項(xiàng)目 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項(xiàng)目 8
1.3.5 提交代碼到代碼倉(cāng)庫(kù) 12
1.4 編寫基礎(chǔ)應(yīng)用代碼 13
1.4.1 項(xiàng)目實(shí)現(xiàn)：編寫聊天視圖代碼 13
1.4.2 AI輔助：生成聯(lián)系人視圖代碼 20
1.5 React的技術(shù)生態(tài) 22
1.5.1 一些開源React組件庫(kù) 23
1.5.2 什么是React全家桶 23
1.5.3 React Native簡(jiǎn)介 24
1.6 AI輔助的前端開發(fā)概述 24
1.7 小結(jié) 25
第 2章 JSX語(yǔ)法 26
2.1 JSX語(yǔ)法基礎(chǔ) 27
2.1.1 JSX是一種語(yǔ)法糖 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 透?jìng)髯釉��?45
2.3.4 屬性展開語(yǔ)法 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àng)目實(shí)現(xiàn)：繼續(xù)拆分oh-my-chat的組件 60
3.5.4 項(xiàng)目實(shí)現(xiàn)：將組件拆分為獨(dú)立文件 63
3.5.5 組件拆分的一些心得 65
3.6 AI輔助：AI與組件樹設(shè)計(jì) 66
3.6.1 AI輔助：用AI指導(dǎo)組件拆分 66
3.6.2 AI輔助：根據(jù)代碼畫出組件樹 67
3.7 過(guò)時(shí)API：類組件 68
3.7.1 函數(shù)組件的崛起 68
3.7.2 還有必要學(xué)習(xí)類組件嗎 70
3.8 小結(jié) 71
第4章 數(shù)據(jù)驅(qū)動(dòng)（上）：React的數(shù)據(jù) 72
4.1 React是數(shù)據(jù)驅(qū)動(dòng)的前端框架 73
4.2 Props：父組件傳給子組件的數(shù)據(jù) 73
4.2.1 如何聲明和使用props 74
4.2.2 項(xiàng)目實(shí)現(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àng)目實(shí)現(xiàn)：利用state管理oh-my-chat列表數(shù)據(jù) 80
4.3.4 更新state的自動(dòng)批處理 85
4.4 context：組件樹共享的全局?jǐn)?shù)據(jù) 86
4.5 小結(jié) 88
第5章 數(shù)據(jù)驅(qū)動(dòng)（下）：組件間通信 89
5.1 React組件間通信 89
5.2 組件間通信模式：狀態(tài)提升 90
5.2.1 什么是狀態(tài)提升 90
5.2.2 項(xiàng)目實(shí)現(xiàn)：利用狀態(tài)提升實(shí)現(xiàn)聯(lián)系人列表和詳情的聯(lián)動(dòng) 91
5.3 組件間通信模式：屬性鉆取 93
5.3.1 什么是屬性鉆取 93
5.3.2 項(xiàng)目實(shí)現(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àng)目實(shí)現(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àng)目實(shí)現(xiàn)：在oh-my-chat加入副作用 110
6.3.1 項(xiàng)目實(shí)現(xiàn)：利用副作用讀取遠(yuǎn)程消息 110
6.3.2 項(xiàng)目實(shí)現(xiàn)：顯示發(fā)送消息的相對(duì)時(shí)間 114
6.3.3 項(xiàng)目實(shí)現(xiàn)：自動(dòng)滾動(dòng)到消息列表末尾 116
6.4 開發(fā)模式下的useEffect 117
6.4.1 依賴項(xiàng)數(shù)組的靜態(tài)檢查 117
6.4.2 為什么副作用會(huì)被觸發(fā)兩次 118
6.5 小結(jié) 118
第7章 事件處理 119
7.1 React合成事件 120
7.2 合成事件與原生DOM事件的區(qū)別 120
7.2.1 注冊(cè)事件監(jiān)聽函數(shù)的方式不同 120
7.2.2 特定事件的行為不同 121
7.2.3 實(shí)際注冊(cè)的目標(biāo)DOM元素不同 122
7.3 合成事件的冒泡與捕獲 122
7.4 受控組件 123
7.5 在React中使用原生DOM事件 124
7.5.1 使用原生DOM事件的典型場(chǎng)景 124
7.5.2 項(xiàng)目實(shí)現(xiàn)：使用原生DOM事件實(shí)現(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àng)目實(shí)現(xiàn)：為oh-my-chat實(shí)現(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更新過(guò)程 144
9.1.2 組件生命周期 144
9.1.3 副作用的生命周期 147
9.2 虛擬DOM 147
9.2.1 什么是虛擬DOM 147
9.2.2 真實(shí)DOM有什么問(wèn)題 148
9.3 協(xié)調(diào) 149
9.3.1 Diffing算法 149
9.3.2 觸發(fā)協(xié)調(diào)的場(chǎng)景 150
9.3.3 什么是Fiber協(xié)調(diào)引擎 150
9.3.4 Fiber中的重要概念和模型 151
9.3.5 協(xié)調(diào)過(guò)程是怎樣的 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ù)的實(shí)現(xiàn) 160
10.3.1 手動(dòng)實(shí)現(xiàn) 160
10.3.2 可持久化數(shù)據(jù)結(jié)構(gòu)和Immutable.js 160
10.3.3 如何解決原理和直覺(jué)的矛盾 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 何時(shí)引入獨(dú)立的狀態(tài)管理框架 166
10.5.2 Zustand簡(jiǎn)介 167
10.5.3 利用Immer在Zustand中操作不可變數(shù)據(jù) 168
10.5.4 項(xiàng)目實(shí)現(xiàn)：利用Zustand Immer共享狀態(tài)數(shù)據(jù) 169
10.5.5 項(xiàng)目實(shí)現(xiàn)：利用Zustand Immer實(shí)現(xiàn)修改和刪除聯(lián)系人 170
10.5.6 可否混用React內(nèi)建state和Zustand 172
10.6 小結(jié) 172
第 11章 優(yōu)化性能與用戶體驗(yàn) 173
11.1 性能優(yōu)化的時(shí)機(jī)與思路 173
11.1.1 不要過(guò)早做性能優(yōu)化 174
11.1.2 應(yīng)用性能問(wèn)題的表現(xiàn) 174
11.1.3 定位性能問(wèn)題的根源 175
11.2 React組件的性能優(yōu)化 176
11.2.1 利用性能優(yōu)化Hook：useMemo緩存計(jì)算結(jié)果 176
11.2.2 利用React純組件避免不必要的渲染 177
11.2.3 利用性能優(yōu)化Hook：useCallback避免純組件失效 179
11.2.4 區(qū)分低優(yōu)先級(jí)的更新：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性能問(wèn)題 183
11.5 AI輔助：分析React報(bào)錯(cuò)信息 185
11.6 小結(jié) 186
第 12章 可擴(kuò)展的React代碼 187
12.1 React代碼的分解和抽象 187
12.1.1 React應(yīng)用代碼中的抽象 188
12.1.2 項(xiàng)目實(shí)現(xiàn)：自定義Hooks 188
12.1.3 組件組合 190
12.2 可復(fù)用的自定義Hooks 190
12.3 可復(fù)用的React組件 191
12.3.1 項(xiàng)目實(shí)現(xiàn)：抽取公共組件 192
12.3.2 項(xiàng)目實(shí)現(xiàn)：在組件中暴露DOM元素 194
12.3.3 高階組件 196
12.3.4 React組件庫(kù) 198
12.4 可擴(kuò)展的代碼目錄結(jié)構(gòu) 198
12.4.1 典型的React項(xiàng)目文件目錄結(jié)構(gòu) 198
12.4.2 項(xiàng)目實(shí)現(xiàn)：大中型React項(xiàng)目推薦的文件目錄結(jié)構(gòu) 199
12.4.3 項(xiàng)目實(shí)現(xiàn)：模塊導(dǎo)入路徑過(guò)長(zhǎng)怎么辦 200
12.5 AI輔助：代碼審查 201
12.6 小結(jié) 202
第三部分 Web應(yīng)用開發(fā)
第 13章 前端路由 205
13.1 前端路由簡(jiǎn)介 205
13.1.1 什么是前端路由 205
13.1.2 前端路由與傳統(tǒng)后端路由的區(qū)別 206
13.2 利用React Router實(shí)現(xiàn)React前端路由 207
13.2.1 React Router基本用法 207
13.2.2 項(xiàng)目實(shí)現(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 針對(duì)整個(gè)表單的批量數(shù)據(jù)綁定 216
14.3 表單驗(yàn)證 217
14.4 表單提交和錯(cuò)誤處理 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àng)目實(shí)現(xiàn)：用React Hook Form實(shí)現(xiàn)聯(lián)系人表單 228
14.8 小結(jié) 231
第 15章 與服務(wù)器端通信 232
15.1 與服務(wù)器端通信的要點(diǎn) 233
15.1.1 服務(wù)器端通信的異步性 233
15.1.2 HTTP請(qǐng)求的數(shù)據(jù)格式 234
15.1.3 認(rèn)證授權(quán) 234
15.1.4 錯(cuò)誤處理 235
15.1.5 緩存HTTP請(qǐng)求 235
15.1.6 安全性 235
15.2 在React中實(shí)現(xiàn)與服務(wù)器端通信 236
15.2.1 使用瀏覽器標(biāo)準(zhǔn)fetch API 236
15.2.2 使用開源網(wǎng)絡(luò)請(qǐng)求庫(kù)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)管理庫(kù)React Query 240
15.4.1 什么是異步狀態(tài)管理 240
15.4.2 項(xiàng)目實(shí)現(xiàn)：使用React Query緩存對(duì)話列表的網(wǎng)絡(luò)請(qǐng)求 241
15.4.3 項(xiàng)目實(shí)現(xiàn)：使用React Query變更對(duì)話列表數(shù)據(jù) 242
15.4.4 React Query的其他功能 245
15.5 小結(jié) 245
第 16章 質(zhì)量保證 246
16.1 前端項(xiàng)目的質(zhì)量保證 246
16.1.1 質(zhì)量保證與軟件測(cè)試的區(qū)別與聯(lián)系 247
16.1.2 人工測(cè)試與自動(dòng)化測(cè)試 247
16.1.3 前端開發(fā)者應(yīng)該了解的測(cè)試金字塔 248
16.2 React項(xiàng)目的端到端測(cè)試 249
16.2.1 使用Playwright創(chuàng)建端到端測(cè)試項(xiàng)目 249
16.2.2 項(xiàng)目實(shí)現(xiàn)：設(shè)計(jì)端到端測(cè)試用例 250
16.2.3 項(xiàng)目實(shí)現(xiàn)：使用Playwright開發(fā)端到端測(cè)試用例 251
16.2.4 項(xiàng)目實(shí)現(xiàn)：提升Playwright測(cè)試用例的可維護(hù)性 252
16.2.5 其他端到端測(cè)試工具 253
16.3 React單元測(cè)試 254
16.3.1 React單元測(cè)試的范圍和目標(biāo) 254
16.3.2 項(xiàng)目實(shí)現(xiàn)：用Jest RTL編寫單元測(cè)試 254
16.3.3 項(xiàng)目實(shí)現(xiàn)：為oh-my-chat的React組件編寫單元測(cè)試 257
16.4 AI輔助：生成測(cè)試代碼 258
16.5 小結(jié) 260
第 17章 工程化與架構(gòu) 261
17.1 配置React項(xiàng)目 261
17.1.1 React項(xiàng)目腳手架 262
17.1.2 構(gòu)建與轉(zhuǎn)譯 262
17.1.3 靜態(tài)代碼檢查與格式化 264
17.1.4 代碼自動(dòng)補(bǔ)全 264
17.1.5 自動(dòng)化測(cè)試與代碼覆蓋率統(tǒng)計(jì) 264
17.2 使用TypeScript語(yǔ)言開發(fā)React項(xiàng)目 265
17.2.1 什么是TypeScript 265
17.2.2 項(xiàng)目實(shí)現(xiàn)：在React項(xiàng)目中使用TypeScript 266
17.2.3 項(xiàng)目實(shí)現(xiàn)：用TypeScript定義組件props類型 266
17.2.4 用TypeScript定義Hooks類型 267
17.2.5 在React項(xiàng)目中使用TypeScript的建議 268
17.3 部署React項(xiàng)目 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 對(duì)React未來(lái)的展望 272
17.7 AI輔助：前端開發(fā)的其他環(huán)節(jié) 273
17.8 小結(jié) 274
第 18章 AI聊天機(jī)器人 275
18.1 項(xiàng)目實(shí)現(xiàn)：安裝Ollama 276
18.2 項(xiàng)目實(shí)現(xiàn)：基于LangChain實(shí)現(xiàn)聊天機(jī)器人功能 276
18.2.1 項(xiàng)目實(shí)現(xiàn)：基礎(chǔ)的機(jī)器人回復(fù) 276
18.2.2 項(xiàng)目實(shí)現(xiàn)：流式對(duì)話 278
18.2.3 項(xiàng)目實(shí)現(xiàn)：多輪對(duì)話 279
18.3 小結(jié) 280