AI輔助React Web應用開發實踐：基於React 19和GitHub Copilot

宋一瑋，專註於前端架構與工程化實踐近20年，現任FreeWheel基礎架構部前端架構師，負責React技術棧選型、關鍵模塊開發，以及團隊能力建設；曾供職於IBM、亞馬遜、時光網等公司，基於以React為主的框架主導開發了10余個大型企業級應用和消費級應用，涵蓋電商系統、視頻廣告管理平臺、數據可視化平臺及移動端應用，其中一些應用的全球日活用戶超過百萬；在極客時間開設專欄“現代React Web開發實戰”，已吸引2萬多用戶訂閱學習，獲得廣泛認可。

第 一部分　React基礎

第 1章　你好，React　3

1.1　React技術簡介　3

1.2　貫穿全書的聊天應用oh-my-chat　3

1.3　快速創建React項目　5

1.3.1　準備開發環境　5

1.3.2　選擇代碼編輯器　7

1.3.3　AI輔助：安裝AI代碼編輯器　7

1.3.4　使用create-vite創建React項目　8

1.3.5　提交代碼到代碼倉庫　12

1.4　編寫基礎應用代碼　13

1.4.1　項目實現：編寫聊天視圖代碼　13

1.4.2　AI輔助：生成聯系人視圖代碼　20

1.5　React的技術生態　22

1.5.1　一些開源React組件庫　23

1.5.2　什麼是“React全家桶”　23

1.5.3　React Native簡介　24

1.6　AI輔助的前端開發概述　24

1.7　小結　25

第 2章　JSX語法　26

2.1　JSX語法基礎　27

2.1.1　JSX是一種語法糖　27

2.1.2　JSX的“X”：標記的基本寫法　30

2.1.3　JSX的“JS”：JavaScript表達式　34

2.1.4　JSX與HTML的異同　35

2.2　進一步理解JSX　36

2.2.1　前端開發的聲明式與命令式　36

2.2.2　JSX的產物：React元素　37

2.2.3　不用JSX還能寫React代碼嗎　39

2.3　編寫JSX的常用模式　39

2.3.1　條件渲染　40

2.3.2　循環渲染　42

2.3.3　透傳子元素　45

2.3.4　屬性展開語法　45

2.4　AI輔助：生成JSX代碼　46

2.5　小結　48

第3章　React組件　49

3.1　前端開發組件化　50

3.2　用函數定義React組件　51

3.3　組件與Hooks API　52

3.3.1　借用函數式編程理解Hooks　53

3.3.2　React Hooks有哪些　55

3.3.3　Hooks的使用規則　55

3.4　組件樹　56

3.5　如何拆分React組件　57

3.5.1　用React Developer Tools查看組件樹　58

3.5.2　拆分組件的原則和常見方法　59

3.5.3　項目實現：繼續拆分oh-my-chat的組件　60

3.5.4　項目實現：將組件拆分為獨立文件　63

3.5.5　組件拆分的一些心得　65

3.6　AI輔助：AI與組件樹設計　66

3.6.1　AI輔助：用AI指導組件拆分　66

3.6.2　AI輔助：根據代碼畫出組件樹　67

3.7　過時API：類組件　68

3.7.1　函數組件的崛起　68

3.7.2　還有必要學習類組件嗎　70

3.8　小結　71

第4章　數據驅動（上）：React的數據　72

4.1　React是數據驅動的前端框架　73

4.2　Props：父組件傳給子組件的數據　73

4.2.1　如何聲明和使用props　74

4.2.2　項目實現：利用props拆分oh-my-chat列表組件　75

4.3　state：組件自己的狀態數據　76

4.3.1　組件狀態　76

4.3.2　核心Hook：useState　77

4.3.3　項目實現：利用state管理oh-my-chat列表數據　80

4.3.4　更新state的自動批處理　85

4.4　context：組件樹共享的全局數據　86

4.5　小結　88

第5章　數據驅動（下）：組件間通信　89

5.1　React組件間通信　89

5.2　組件間通信模式：狀態提升　90

5.2.1　什麼是狀態提升　90

5.2.2　項目實現：利用狀態提升實現聯系人列表和詳情的聯動　91

5.3　組件間通信模式：屬性鉆取　93

5.3.1　什麼是屬性鉆取　93

5.3.2　項目實現：用context代替props切換視圖　94

5.4　AI輔助：重構組件代碼　98

5.5　React中的單向數據流　100

5.5.1　什麼是數據流　101

5.5.2　React單向數據流　101

5.5.3　項目實現：分析oh-my-chat的數據流　102

5.6　小結　103

第6章　React的副作用　104

6.1　什麼是副作用　104

6.1.1　前端領域的副作用　105

6.1.2　React中的副作用　105

6.1.3　React中的渲染和提交　105

6.2　核心Hook：useEffect　106

6.2.1　useEffect的基本用法　106

6.2.2　副作用的條件執行　107

6.2.3　副作用的清理函數　109

6.3　項目實現：在oh-my-chat加入副作用　110

6.3.1　項目實現：利用副作用讀取遠程消息　110

6.3.2　項目實現：顯示發送消息的相對時間　114

6.3.3　項目實現：自動滾動到消息列表末尾　116

6.4　開發模式下的useEffect　117

6.4.1　依賴項數組的靜態檢查　117

6.4.2　為什麼副作用會被觸發兩次　118

6.5　小結　118

第7章　事件處理　119

7.1　React合成事件　120

7.2　合成事件與原生DOM事件的區別　120

7.2.1　註冊事件監聽函數的方式不同　120

7.2.2　特定事件的行為不同　121

7.2.3　實際註冊的目標DOM元素不同　122

7.3　合成事件的冒泡與捕獲　122

7.4　受控組件　123

7.5　在React中使用原生DOM事件　124

7.5.1　使用原生DOM事件的典型場景　124

7.5.2　項目實現：使用原生DOM事件實現Click-outside　125

7.6　小結　126

第8章　組件樣式　127

8.1　現代前端樣式開發面臨的挑戰　128

8.2　React應用中開發樣式的方案　128

8.2.1　內聯樣式　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　項目實現：為oh-my-chat實現CSS組件化　132

8.4.1　技術選型：Linaria框架　133

8.4.2　Linaria框架的安裝和基本用法　133

8.4.3　嵌套選擇器　136

8.4.4　在樣式中使用組件數據　138

8.5　AI輔助：修改組件樣式　139

8.5　小結　140

第二部分　React進階

第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　協調　149

9.3.1　Diffing算法　149

9.3.2　觸發協調的場景　150

9.3.3　什麼是Fiber協調引擎　150

9.3.4　Fiber中的重要概念和模型　151

9.3.5　協調過程是怎樣的　152

9.4　小結　155

第 10章　應用狀態管理　156

10.1　什麼是應用狀態管理　157

10.2　不可變數據　158

10.2.1　什麼是不可變數據　158

10.2.2　不可變數據在React中的作用　159

10.3　不可變數據的實現　160

10.3.1　手動實現　160

10.3.2　可持久化數據結構和Immutable.js　160

10.3.3　如何解決原理和直覺的矛盾　161

10.3.4　在React中使用Immer　161

10.4　再談React應用狀態　162

10.4.1　React應用中的狀態分類　162

10.4.2　全局狀態與局部狀態　164

10.4.3　狀態Hook：useReducer　165

10.5　狀態管理框架Zustand　166

10.5.1　何時引入獨立的狀態管理框架　166

10.5.2　Zustand簡介　167

10.5.3　利用Immer在Zustand中操作不可變數據　168

10.5.4　項目實現：利用Zustand + Immer共享狀態數據　169

10.5.5　項目實現：利用Zustand + Immer實現修改和刪除聯系人　170

10.5.6　可否混用React內建state和Zustand　172

10.6　小結　172

第 11章　優化性能與用戶體驗　173

11.1　性能優化的時機與思路　173

11.1.1　不要過早做性能優化　174

11.1.2　應用性能問題的表現　174

11.1.3　定位性能問題的根源　175

11.2　React組件的性能優化　176

11.2.1　利用性能優化Hook：useMemo緩存計算結果　176

11.2.2　利用React純組件避免不必要的渲染　177

11.2.3　利用性能優化Hook：useCallback避免純組件失效　179

11.2.4　區分低優先級的更新：startTransition和useTransition　181

11.3　React應用的整體性能優化　183

11.3.1　為生產環境構建　183

11.3.2　代碼分割　183

11.4　AI輔助：分析React性能問題　183

11.5　AI輔助：分析React報錯信息　185

11.6　小結　186

第 12章　可擴展的React代碼　187

12.1　React代碼的分解和抽象　187

12.1.1　React應用代碼中的抽象　188

12.1.2　項目實現：自定義Hooks　188

12.1.3　組件組合　190

12.2　可復用的自定義Hooks　190

12.3　可復用的React組件　191

12.3.1　項目實現：抽取公共組件　192

12.3.2　項目實現：在組件中暴露DOM元素　194

12.3.3　高階組件　196

12.3.4　React組件庫　198

12.4　可擴展的代碼目錄結構　198

12.4.1　典型的React項目文件目錄結構　198

12.4.2　項目實現：大中型React項目推薦的文件目錄結構　199

12.4.3　項目實現：模塊導入路徑過長怎麼辦　200

12.5　AI輔助：代碼審查　201

12.6　小結　202

第三部分　Web應用開發

第 13章　前端路由　205

13.1　前端路由簡介　205

13.1.1　什麼是前端路由　205

13.1.2　前端路由與傳統後端路由的區別　206

13.2　利用React Router實現React前端路由　207

13.2.1　React Router基本用法　207

13.2.2　項目實現：為oh-my-chat加入前端路由　208

13.3　React代碼分割和懶加載　210

13.3.1　React的代碼分割　210

13.3.2　利用React.lazy和Suspense進行懶加載　211

13.3.3　利用React Router進行懶加載　212

13.4　小結　212

第 14章　表單處理　213

14.1　表單處理的要素　214

14.2　表單的數據綁定　214

14.2.1　雙向數據綁定　214

14.2.2　單向數據綁定　215

14.2.3　操作原生表單控件DOM　215

14.2.4　針對整個表單的批量數據綁定　216

14.3　表單驗證　217

14.4　表單提交和錯誤處理　219

14.5　非受控組件與受控組件的區別　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開發表單　227

14.7.1　React Hook Form的基本用法　227

14.7.2　項目實現：用React Hook Form實現聯系人表單　228

14.8　小結　231

第 15章　與服務器端通信　232

15.1　與服務器端通信的要點　233

15.1.1　服務器端通信的異步性　233

15.1.2　HTTP請求的數據格式　234

15.1.3　認證授權　234

15.1.4　錯誤處理　235

15.1.5　緩存HTTP請求　235

15.1.6　安全性　235

15.2　在React中實現與服務器端通信　236

15.2.1　使用瀏覽器標準fetch API　236

15.2.2　使用開源網絡請求庫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　異步狀態管理庫React Query　240

15.4.1　什麼是異步狀態管理　240

15.4.2　項目實現：使用React Query緩存對話列表的網絡請求　241

15.4.3　項目實現：使用React Query變更對話列表數據　242

15.4.4　React Query的其他功能　245

15.5　小結　245

第 16章　質量保證　246

16.1　前端項目的質量保證　246

16.1.1　質量保證與軟件測試的區別與聯系　247

16.1.2　人工測試與自動化測試　247

16.1.3　前端開發者應該了解的測試金字塔　248

16.2　React項目的端到端測試　249

16.2.1　使用Playwright創建端到端測試項目　249

16.2.2　項目實現：設計端到端測試用例　250

16.2.3　項目實現：使用Playwright開發端到端測試用例　251

16.2.4　項目實現：提升Playwright測試用例的可維護性　252

16.2.5　其他端到端測試工具　253

16.3　React單元測試　254

16.3.1　React單元測試的範圍和目標　254

16.3.2　項目實現：用Jest + RTL編寫單元測試　254

16.3.3　項目實現：為oh-my-chat的React組件編寫單元測試　257

16.4　AI輔助：生成測試代碼　258

16.5　小結　260

第 17章　工程化與架構　261

17.1　配置React項目　261

17.1.1　React項目腳手架　262

17.1.2　構建與轉譯　262

17.1.3　靜態代碼檢查與格式化　264

17.1.4　代碼自動補全　264

17.1.5　自動化測試與代碼覆蓋率統計　264

17.2　使用TypeScript語言開發React項目　265

17.2.1　什麼是TypeScript　265

17.2.2　項目實現：在React項目中使用TypeScript　266

17.2.3　項目實現：用TypeScript定義組件props類型　266

17.2.4　用TypeScript定義Hooks類型　267

17.2.5　在React項目中使用TypeScript的建議　268

17.3　部署React項目　268

17.3.1　部署構建後的靜態資源文件　268

17.3.2　CI/CD持續集成與交付　269

17.4　線上監控　269

17.5　靈活的React架構　270

17.5.1　CSR、SSR與SSG　270

17.5.2　基於React的Web開發框架Next.js　272

17.6　對React未來的展望　272

17.7　AI輔助：前端開發的其他環節　273

17.8　小結　274

第 18章　AI聊天機器人　275

18.1　項目實現：安裝Ollama　276

18.2　項目實現：基於LangChain實現聊天機器人功能　276

18.2.1　項目實現：基礎的機器人回復　276

18.2.2　項目實現：流式對話　278

18.2.3　項目實現：多輪對話　279

18.3　小結　280