React與React Native 跨平臺開發：使用JavaScript與TypeScript構建網頁端、桌面端和移動端應用 React and React Native : Build cross-platform JavaScript and TypeScript apps for the web, desktop, and mobile, 5/e

目錄

第1部分 React

第 1 章 為什麽選擇 React 3

1.1 React 是什麽 3

1.1.1 React 僅僅是視圖層 3

1.1.2 化繁為簡 4

1.1.3 聲明式 UI 結構 5

1.1.4 數據隨時間變化 7

1.1.5 性能至關重要 7

1.1.6 正確的抽象級別 9

1.2 React 的新功能 10

1.3 搭建一個新的 React 項目 11

1.4 使用 Web 打包工具 12

1.4.1 使用框架 13

1.4.2 在線代碼編輯器 13

1.5 本章小結 14

第 2 章 使用 JSX 渲染 15

2.1 技術要求 15

2.2 第一個 JSX 內容 15

2.3 渲染 HTML 17

2.3.1 內置 HTML 標簽 17

2.3.2 HTML 標簽約定 18

2.3.3 描述 UI 結構 19

2.4 創建自己的 JSX 元素 20

2.4.1 封裝 HTML 20

2.4.2 嵌套元素 21

2.5 使用 JavaScript 表達式 23

2.5.1 動態屬性值和文本 23

2.5.2 處理事件 24

2.5.3 將集合映射到元素 26

2.6 構建 JSX 片段 28

2.6.1 使用包裝元素 29

2.6.2 使用片段 29

2.7 本章小結 30

第 3 章 理解 React 組件和 Hooks 31

3.1 技術要求 31

3.2 React 組件簡介 31

3.3 組件屬性是什麽 32

3.3.1 傳遞屬性值 33

3.3.2 默認屬性值 35

3.4 組件狀態是什麽 35

3.5 React 鉤子 36

3.5.1 使用鉤子維護狀態 36

3.5.2 初始狀態值 37

3.6 執行初始化和清理操作 40

3.6.1 獲取組件數據 40

3.6.2 取消操作和重置狀態 42

3.6.3 優化副作用行為 44

3.7 使用上下文鉤子共享數據 45

3.8 使用鉤子進行記憶化處理 46

3.8.1 useMemo() 鉤子 46

3.8.2 useCallback() 鉤子 47

3.8.3 useRef() 鉤子 48

3.9 本章小結 49

第 4 章 React 方式中的事件處理 51

4.1 技術要求 51

4.2 聲明事件處理程序 51

4.2.1 聲明處理函數 52

4.2.2 多個事件處理程序 52

4.3 聲明內聯事件處理程序 53

4.4 將處理程序綁定到元素 53

4.5 使用合成事件對象 54

4.6 理解事件池化 56

4.7 本章小結 57

第 5 章 打造可復用組件 59

5.1 技術要求 59

5.2 可重用的 HTML 元素 59

5.3 單體組件的難點 60

5.3.1 JSX 標記 60

5.3.2 初始狀態 61

5.3.3 事件處理程序實現 62

5.4 重構組件結構 64

5.4.1 從 JSX 開始 65

5.4.2 實現文章列表組件 66

5.4.3 實現文章項目組件 68

5.4.4 實現 AddArticle 組件 69

5.5 渲染屬性 70

5.6 渲染組件樹 72

5.7 本章小結 73

第 6 章 TypeScript 類型檢查和驗證 75

6.1 技術要求 75

6.2 瞭解預期行為 75

6.2.1 屬性驗證的重要性 75

6.2.2 屬性驗證的缺失可能導致的潛在問題 76

6.2.3 屬性驗證的選項 76

6.3 TypeScript 簡介 78

6.3.1 為什麽要使用 TypeScript 79

6.3.2 在項目中設置 TypeScript 80

6.3.3 TypeScript 中的基本類型 82

6.3.4 接口和類型別名 85

6.4 在 React 中使用 TypeScript 86

6.4.1 在 React 組件中對屬性進行類型檢查 86

6.4.2 類型狀態 88

6.4.3 事件處理器的類型定義 89

6.4.4 上下文類型檢查 89

6.4.5 引用類型檢查 90

6.5 本章小結 91

第 7 章 使用路由處理導航 93

7.1 技術要求 93

7.2 聲明路由 93

7.2.1 Hello Route 94

7.2.2 解耦路由聲明 95

7.3 處理路由參數 98

7.3.1 路由中的資源 ID 98

7.3.2 查詢參數 101

7.4 使用鏈接組件 103

7.4.1 基本鏈接 103

7.4.2 URL 和查詢參數 104

7.5 本章小結 106

第 8 章 使用延遲組件和 Suspense 進行代碼分割 107

8.1 技術要求 107

8.2 使用 lazy() API 107

8.2.1 動態導入和捆綁包 108

8.2.2 組件延遲加載 109

8.3 使用 Suspense 組件 109

8.3.1 頂層 Suspense 組件 109

8.3.2 使用旋轉圖標回退 111

8.4 避免使用延遲組件 112

8.5 探索延遲頁面和路由 114

8.6 本章小結 115

第 9 章 用戶界面框架組件 117

9.1 技術要求 117

9.2 佈局與組織 117

9.2.1 使用容器 118

9.2.2 構建響應式網格佈局 119

9.3 使用導航組件 122

9.3.1 Drawer 導航 122

9.3.2 使用標簽導航 125

9.4 收集用戶輸入 127

9.4.1 復選框和單選按鈕 127

9.4.2 文本輸入和選擇輸入 128

9.4.3 使用按鈕 130

9.5 使用樣式和主題 132

9.5.1 創建樣式 132

9.5.2 自定義主題 133

9.6 本章小結 134

第 10 章 高性能狀態更新 135

10.1 技術要求 135

10.2 批量更新狀態 135

10.3 優先處理狀態更新 139

10.4 處理異步狀態更新 142

10.5 本章小結 145

第 11 章 從服務器獲取數據 147

11.1 技術要求 147

11.2 處理遠程數據 147

11.3 使用 Fetch API 151

11.4 使用 Axios 154

11.5 使用 TanStack Query 156

11.6 使用 GraphQL 157

11.7 本章小結 160

第 12 章 React 中的狀態管理 161

12.1 全局狀態是什麽 161

12.2 React Context API 和 useReducer 164

12.3 Redux 167

12.4 MobX 169

12.5 本章小結 172

第 13 章 服務器端渲染 173

13.1 技術要求 173

13.2 在服務器上工作 173

13.2.1 服務器端渲染 174

13.2.2 靜態站點和增量式靜態生成 176

13.3 使用 Next.js 178

13.4 React 服務器組件 185

13.5 本章小結 188

第 14 章 React 中的單元測試 189

14.1 技術要求 189

14.2 總體測試 189

14.3 單元測試 191

14.3.1 設置測試環境 192

14.3.2 Vitest 特性 193

14.3.3 模擬 196

14.4 測試 ReactJS 201

14.5 本章小結 206

第2部分 React Native

第 15 章 為什麽選擇 React Native 209

15.1 技術要求 209

15.2 什麽是 React Native 209

15.3 React 和 JSX 211

15.4 移動瀏覽器體驗 211

15.5 Android 和 iOS：不同卻又相同 212

15.6 移動 Web 應用的案例 212

15.7 本章小結 213

第 16 章 React Native 內部機制 215

16.1 探索 React Native 架構 215

16.2 React Native 當前架構 217

16.2.1 作為 React Native 一部分的 JS 218

16.2.2 React Native 未來架構 220

16.3 解釋 JS 和原生模塊 222

16.3.1 React Navigation 222

16.3.2 UI 組件庫 222

16.3.3 啟動屏幕 223

16.3.4 圖標 223

16.3.5 錯誤處理 223

16.3.6 推送通知 224

16.3.7 空中更新 224

16.3.8 JS 庫 225

16.4 探索 React Native 組件和 API 225

16.5 本章小結 226

第 17 章 快速啟動 React Native 項目 227

17.1 技術要求 227

17.2 探索 React Native 命令行工具 227

17.3 安裝和使用 Expo 命令行工具 228

17.4 在手機上查看應用 229

17.5 在 Expo Snack 上查看應用 232

17.6 本章小結 234

第 18 章 使用 Flexbox 構建響應式佈局 235

18.1 技術要求 235

18.2 引入 Flexbox 235

18.3 引入 React Native 樣式 236

18.4 使用 Styled Components 庫 239

18.5 構建 Flexbox 佈局 240

18.5.1 簡單的 3 列佈局 240

18.5.2 改進後的 3 列佈局 243

18.5.3 靈活的行 245

18.5.4 靈活的網格 247

18.5.5 靈活的行和列 249

18.6 本章小結 251

第 19 章 屏幕間的導航 253

19.1 技術要求 253

19.2 導航的基礎知識 253

19.3 路由參數 257

19.4 導航標題欄 260

19.5 標簽和抽屜導航 263

19.6 基於文件的導航 266

19.7 本章小結 268

第 20 章 渲染項目列表 269

20.1 技術要求 269

20.2 渲染數據集合 269

20.3 對列表進行排序和過濾 272

20.4 獲取列表數據 276

20.5 延遲加載列表 278

20.6 實現下拉刷新功能 281

20.7 本章小結 282

第 21 章 地理位置與地圖 283

21.1 技術要求 283

21.2 使用 Geolocation API 283

21.3 渲染地圖 286

21.4 標註興趣點 287

21.4.1 繪制點 287

21.4.2 繪制覆蓋層 289

21.5 本章小結 290

第 22 章 收集用戶輸入 293

22.1 技術要求 293

22.2 收集文本輸入 293

22.3 從選項列表中選擇 296

22.4 在開啟和關閉之間切換 301

22.5 收集日期/時間輸入 303

22.6 本章小結 306

第 23 章 響應用戶手勢 307

23.1 技術要求 307

23.2 用手指滾動 307

23.3 提供觸摸反饋 309

23.4 使用可滑動和可取消的組件 313

23.5 本章小結 317

第 24 章 顯示進度 319

24.1 技術要求 319

24.2 理解進度和可用性 319

24.3 指示進度 320

24.4 探索導航指示器 321

24.5 測量進度 323

24.6 步驟進度 325

24.7 本章小結 327

第 25 章 展示模態屏幕 329

25.1 技術要求 329

25.2 術語定義 329

25.3 獲取用戶確認 330

25.4 錯誤確認 333

25.5 被動通知 337

25.6 活動模態框 338

25.7 本章小結 340

第 26 章 使用動畫 343

26.1 技術要求 343

26.2 使用 React Native Reanimated 343

26.3 Animated API 343

26.3.1 React Native Reanimated 344

26.3.2 安裝 React Native Reanimated 庫 345

26.4 動畫佈局組件 345

26.5 動畫組件樣式 349

26.6 本章小結 351

第 27 章 控制圖像顯示 353

27.1 技術要求 353

27.2 加載圖像 353

27.3 調整圖像大小 355

27.4 延遲加載圖像 357

27.5 渲染圖標 360

27.6 本章小結 362

第 28 章 離線使用 363

28.1 技術要求 363

28.2 檢測網絡狀態 363

28.3 存儲應用程序數據 365

28.4 同步應用程序數據 369

28.5 本章小結 373