React與React Native 跨平臺開發(fā)：使用JavaScript與TypeScript構建網(wǎng)頁端、桌面端和移動端應用

第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 數(shù)據(jù)隨時間變化 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 內(nèi)容 15
2.3 渲染 HTML 17
2.3.1 內(nèi)置 HTML 標簽 17
2.3.2 HTML 標簽約定 18
2.3.3 描述 UI 結構 19
2.4 創(chuàng)建自己的 JSX 元素 20
2.4.1 封裝 HTML 20
2.4.2 嵌套元素 21
2.5 使用 JavaScript 表達式 23
2.5.1 動態(tài)屬性值和文本 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 組件狀態(tài)是什么 35
3.5 React 鉤子 36
3.5.1 使用鉤子維護狀態(tài) 36
3.5.2 初始狀態(tài)值 37
3.6 執(zhí)行初始化和清理操作 40
3.6.1 獲取組件數(shù)據(jù) 40
3.6.2 取消操作和重置狀態(tài) 42
3.6.3 優(yōu)化副作用行為 44
3.7 使用上下文鉤子共享數(shù)據(jù) 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 聲明處理函數(shù) 52
4.2.2 多個事件處理程序 52
4.3 聲明內(nèi)聯(lián)事件處理程序 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 初始狀態(tài) 61
5.3.3 事件處理程序?qū)崿F(xiàn) 62
5.4 重構組件結構 64
5.4.1 從 JSX 開始 65
5.4.2 實現(xiàn)文章列表組件 66
5.4.3 實現(xiàn)文章項目組件 68
5.4.4 實現(xiàn) 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 類型狀態(tài) 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 處理路由參數(shù) 98
7.3.1 路由中的資源 ID 98
7.3.2 查詢參數(shù) 101
7.4 使用鏈接組件 103
7.4.1 基本鏈接 103
7.4.2 URL 和查詢參數(shù) 104
7.5 本章小結 106
第 8 章 使用延遲組件和 Suspense 進行代碼分割 107
8.1 技術要求 107
8.2 使用 lazy() API 107
8.2.1 動態(tài)導入和捆綁包 108
8.2.2 組件延遲加載 109
8.3 使用 Suspense 組件 109
8.3.1 頂層 Suspense 組件 109
8.3.2 使用旋轉(zhuǎn)圖標回退 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 構建響應式網(wǎng)格布局 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 創(chuàng)建樣式 132
9.5.2 自定義主題 133
9.6 本章小結 134
第 10 章 高性能狀態(tài)更新 135
10.1 技術要求 135
10.2 批量更新狀態(tài) 135
10.3 優(yōu)先處理狀態(tài)更新 139
10.4 處理異步狀態(tài)更新 142
10.5 本章小結 145
第 11 章 從服務器獲取數(shù)據(jù) 147
11.1 技術要求 147
11.2 處理遠程數(shù)據(jù) 147
11.3 使用 Fetch API 151
11.4 使用 Axios 154
11.5 使用 TanStack Query 156
11.6 使用 GraphQL 157
11.7 本章小結 160
第 12 章 React 中的狀態(tài)管理 161
12.1 全局狀態(tài)是什么 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 靜態(tài)站點和增量式靜態(tài)生成 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 設置測試環(huán)境 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 內(nèi)部機制 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 靈活的網(wǎng)格 247
18.5.5 靈活的行和列 249
18.6 本章小結 251
第 19 章 屏幕間的導航 253
19.1 技術要求 253
19.2 導航的基礎知識 253
19.3 路由參數(shù) 257
19.4 導航標題欄 260
19.5 標簽和抽屜導航 263
19.6 基于文件的導航 266
19.7 本章小結 268
第 20 章 渲染項目列表 269
20.1 技術要求 269
20.2 渲染數(shù)據(jù)集合 269
20.3 對列表進行排序和過濾 272
20.4 獲取列表數(shù)據(jù) 276
20.5 延遲加載列表 278
20.6 實現(xiàn)下拉刷新功能 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 章 展示模態(tài)屏幕 329
25.1 技術要求 329
25.2 術語定義 329
25.3 獲取用戶確認 330
25.4 錯誤確認 333
25.5 被動通知 337
25.6 活動模態(tài)框 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 調(diào)整圖像大小 355
27.4 延遲加載圖像 357
27.5 渲染圖標 360
27.6 本章小結 362
第 28 章 離線使用 363
28.1 技術要求 363
28.2 檢測網(wǎng)絡狀態(tài) 363
28.3 存儲應用程序數(shù)據(jù) 365
28.4 同步應用程序數(shù)據(jù) 369
28.5 本章小結 373