React與React Native 跨平臺(tái)開(kāi)發(fā)：使用JavaScript與TypeScript構(gòu)建網(wǎng)頁(yè)端、桌面端和移動(dòng)端應(yīng)用

第1部分 React
第 1 章 為什么選擇 React 3
1.1 React 是什么 3
1.1.1 React 僅僅是視圖層 3
1.1.2 化繁為簡(jiǎn) 4
1.1.3 聲明式 UI 結(jié)構(gòu) 5
1.1.4 數(shù)據(jù)隨時(shí)間變化 7
1.1.5 性能至關(guān)重要 7
1.1.6 正確的抽象級(jí)別 9
1.2 React 的新功能 10
1.3 搭建一個(gè)新的 React 項(xiàng)目 11
1.4 使用 Web 打包工具 12
1.4.1 使用框架 13
1.4.2 在線(xiàn)代碼編輯器 13
1.5 本章小結(jié) 14
第 2 章 使用 JSX 渲染 15
2.1 技術(shù)要求 15
2.2 第一個(gè) JSX 內(nèi)容 15
2.3 渲染 HTML 17
2.3.1 內(nèi)置 HTML 標(biāo)簽 17
2.3.2 HTML 標(biāo)簽約定 18
2.3.3 描述 UI 結(jié)構(gòu) 19
2.4 創(chuàng)建自己的 JSX 元素 20
2.4.1 封裝 HTML 20
2.4.2 嵌套元素 21
2.5 使用 JavaScript 表達(dá)式 23
2.5.1 動(dòng)態(tài)屬性值和文本 23
2.5.2 處理事件 24
2.5.3 將集合映射到元素 26
2.6 構(gòu)建 JSX 片段 28
2.6.1 使用包裝元素 29
2.6.2 使用片段 29
2.7 本章小結(jié) 30
第 3 章 理解 React 組件和 Hooks 31
3.1 技術(shù)要求 31
3.2 React 組件簡(jiǎn)介 31
3.3 組件屬性是什么 32
3.3.1 傳遞屬性值 33
3.3.2 默認(rèn)屬性值 35
3.4 組件狀態(tài)是什么 35
3.5 React 鉤子 36
3.5.1 使用鉤子維護(hù)狀態(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 使用鉤子進(jìn)行記憶化處理 46
3.8.1 useMemo() 鉤子 46
3.8.2 useCallback() 鉤子 47
3.8.3 useRef() 鉤子 48
3.9 本章小結(jié) 49
第 4 章 React 方式中的事件處理 51
4.1 技術(shù)要求 51
4.2 聲明事件處理程序 51
4.2.1 聲明處理函數(shù) 52
4.2.2 多個(gè)事件處理程序 52
4.3 聲明內(nèi)聯(lián)事件處理程序 53
4.4 將處理程序綁定到元素 53
4.5 使用合成事件對(duì)象 54
4.6 理解事件池化 56
4.7 本章小結(jié) 57
第 5 章 打造可復(fù)用組件 59
5.1 技術(shù)要求 59
5.2 可重用的 HTML 元素 59
5.3 單體組件的難點(diǎn) 60
5.3.1 JSX 標(biāo)記 60
5.3.2 初始狀態(tài) 61
5.3.3 事件處理程序?qū)崿F(xiàn) 62
5.4 重構(gòu)組件結(jié)構(gòu) 64
5.4.1 從 JSX 開(kāi)始 65
5.4.2 實(shí)現(xiàn)文章列表組件 66
5.4.3 實(shí)現(xiàn)文章項(xiàng)目組件 68
5.4.4 實(shí)現(xiàn) AddArticle 組件 69
5.5 渲染屬性 70
5.6 渲染組件樹(shù) 72
5.7 本章小結(jié) 73
第 6 章 TypeScript 類(lèi)型檢查和驗(yàn)證 75
6.1 技術(shù)要求 75
6.2 了解預(yù)期行為 75
6.2.1 屬性驗(yàn)證的重要性 75
6.2.2 屬性驗(yàn)證的缺失可能導(dǎo)致的潛在問(wèn)題 76
6.2.3 屬性驗(yàn)證的選項(xiàng) 76
6.3 TypeScript 簡(jiǎn)介 78
6.3.1 為什么要使用 TypeScript 79
6.3.2 在項(xiàng)目中設(shè)置 TypeScript 80
6.3.3 TypeScript 中的基本類(lèi)型 82
6.3.4 接口和類(lèi)型別名 85
6.4 在 React 中使用 TypeScript 86
6.4.1 在 React 組件中對(duì)屬性進(jìn)行類(lèi)型檢查 86
6.4.2 類(lèi)型狀態(tài) 88
6.4.3 事件處理器的類(lèi)型定義 89
6.4.4 上下文類(lèi)型檢查 89
6.4.5 引用類(lèi)型檢查 90
6.5 本章小結(jié) 91
第 7 章 使用路由處理導(dǎo)航 93
7.1 技術(shù)要求 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 查詢(xún)參數(shù) 101
7.4 使用鏈接組件 103
7.4.1 基本鏈接 103
7.4.2 URL 和查詢(xún)參數(shù) 104
7.5 本章小結(jié) 106
第 8 章 使用延遲組件和 Suspense 進(jìn)行代碼分割 107
8.1 技術(shù)要求 107
8.2 使用 lazy() API 107
8.2.1 動(dòng)態(tài)導(dǎo)入和捆綁包 108
8.2.2 組件延遲加載 109
8.3 使用 Suspense 組件 109
8.3.1 頂層 Suspense 組件 109
8.3.2 使用旋轉(zhuǎn)圖標(biāo)回退 111
8.4 避免使用延遲組件 112
8.5 探索延遲頁(yè)面和路由 114
8.6 本章小結(jié) 115
第 9 章 用戶(hù)界面框架組件 117
9.1 技術(shù)要求 117
9.2 布局與組織 117
9.2.1 使用容器 118
9.2.2 構(gòu)建響應(yīng)式網(wǎng)格布局 119
9.3 使用導(dǎo)航組件 122
9.3.1 Drawer 導(dǎo)航 122
9.3.2 使用標(biāo)簽導(dǎo)航 125
9.4 收集用戶(hù)輸入 127
9.4.1 復(fù)選框和單選按鈕 127
9.4.2 文本輸入和選擇輸入 128
9.4.3 使用按鈕 130
9.5 使用樣式和主題 132
9.5.1 創(chuàng)建樣式 132
9.5.2 自定義主題 133
9.6 本章小結(jié) 134
第 10 章 高性能狀態(tài)更新 135
10.1 技術(shù)要求 135
10.2 批量更新?tīng)顟B(tài) 135
10.3 優(yōu)先處理狀態(tài)更新 139
10.4 處理異步狀態(tài)更新 142
10.5 本章小結(jié) 145
第 11 章 從服務(wù)器獲取數(shù)據(jù) 147
11.1 技術(shù)要求 147
11.2 處理遠(yuǎn)程數(shù)據(jù) 147
11.3 使用 Fetch API 151
11.4 使用 Axios 154
11.5 使用 TanStack Query 156
11.6 使用 GraphQL 157
11.7 本章小結(jié) 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 本章小結(jié) 172
第 13 章 服務(wù)器端渲染 173
13.1 技術(shù)要求 173
13.2 在服務(wù)器上工作 173
13.2.1 服務(wù)器端渲染 174
13.2.2 靜態(tài)站點(diǎn)和增量式靜態(tài)生成 176
13.3 使用 Next.js 178
13.4 React 服務(wù)器組件 185
13.5 本章小結(jié) 188
第 14 章 React 中的單元測(cè)試 189
14.1 技術(shù)要求 189
14.2 總體測(cè)試 189
14.3 單元測(cè)試 191
14.3.1 設(shè)置測(cè)試環(huán)境 192
14.3.2 Vitest 特性 193
14.3.3 模擬 196
14.4 測(cè)試 ReactJS 201
14.5 本章小結(jié) 206
第2部分 React Native
第 15 章 為什么選擇 React Native 209
15.1 技術(shù)要求 209
15.2 什么是 React Native 209
15.3 React 和 JSX 211
15.4 移動(dòng)瀏覽器體驗(yàn) 211
15.5 Android 和 iOS：不同卻又相同 212
15.6 移動(dòng) Web 應(yīng)用的案例 212
15.7 本章小結(jié) 213
第 16 章 React Native 內(nèi)部機(jī)制 215
16.1 探索 React Native 架構(gòu) 215
16.2 React Native 當(dāng)前架構(gòu) 217
16.2.1 作為 React Native 一部分的 JS 218
16.2.2 React Native 未來(lái)架構(gòu) 220
16.3 解釋 JS 和原生模塊 222
16.3.1 React Navigation 222
16.3.2 UI 組件庫(kù) 222
16.3.3 啟動(dòng)屏幕 223
16.3.4 圖標(biāo) 223
16.3.5 錯(cuò)誤處理 223
16.3.6 推送通知 224
16.3.7 空中更新 224
16.3.8 JS 庫(kù) 225
16.4 探索 React Native 組件和 API 225
16.5 本章小結(jié) 226
第 17 章 快速啟動(dòng) React Native 項(xiàng)目 227
17.1 技術(shù)要求 227
17.2 探索 React Native 命令行工具 227
17.3 安裝和使用 Expo 命令行工具 228
17.4 在手機(jī)上查看應(yīng)用 229
17.5 在 Expo Snack 上查看應(yīng)用 232
17.6 本章小結(jié) 234
第 18 章 使用 Flexbox 構(gòu)建響應(yīng)式布局 235
18.1 技術(shù)要求 235
18.2 引入 Flexbox 235
18.3 引入 React Native 樣式 236
18.4 使用 Styled Components 庫(kù) 239
18.5 構(gòu)建 Flexbox 布局 240
18.5.1 簡(jiǎn)單的 3 列布局 240
18.5.2 改進(jìn)后的 3 列布局 243
18.5.3 靈活的行 245
18.5.4 靈活的網(wǎng)格 247
18.5.5 靈活的行和列 249
18.6 本章小結(jié) 251
第 19 章 屏幕間的導(dǎo)航 253
19.1 技術(shù)要求 253
19.2 導(dǎo)航的基礎(chǔ)知識(shí) 253
19.3 路由參數(shù) 257
19.4 導(dǎo)航標(biāo)題欄 260
19.5 標(biāo)簽和抽屜導(dǎo)航 263
19.6 基于文件的導(dǎo)航 266
19.7 本章小結(jié) 268
第 20 章 渲染項(xiàng)目列表 269
20.1 技術(shù)要求 269
20.2 渲染數(shù)據(jù)集合 269
20.3 對(duì)列表進(jìn)行排序和過(guò)濾 272
20.4 獲取列表數(shù)據(jù) 276
20.5 延遲加載列表 278
20.6 實(shí)現(xiàn)下拉刷新功能 281
20.7 本章小結(jié) 282
第 21 章 地理位置與地圖 283
21.1 技術(shù)要求 283
21.2 使用 Geolocation API 283
21.3 渲染地圖 286
21.4 標(biāo)注興趣點(diǎn) 287
21.4.1 繪制點(diǎn) 287
21.4.2 繪制覆蓋層 289
21.5 本章小結(jié) 290
第 22 章 收集用戶(hù)輸入 293
22.1 技術(shù)要求 293
22.2 收集文本輸入 293
22.3 從選項(xiàng)列表中選擇 296
22.4 在開(kāi)啟和關(guān)閉之間切換 301
22.5 收集日期/時(shí)間輸入 303
22.6 本章小結(jié) 306
第 23 章 響應(yīng)用戶(hù)手勢(shì) 307
23.1 技術(shù)要求 307
23.2 用手指滾動(dòng) 307
23.3 提供觸摸反饋 309
23.4 使用可滑動(dòng)和可取消的組件 313
23.5 本章小結(jié) 317
第 24 章 顯示進(jìn)度 319
24.1 技術(shù)要求 319
24.2 理解進(jìn)度和可用性 319
24.3 指示進(jìn)度 320
24.4 探索導(dǎo)航指示器 321
24.5 測(cè)量進(jìn)度 323
24.6 步驟進(jìn)度 325
24.7 本章小結(jié) 327
第 25 章 展示模態(tài)屏幕 329
25.1 技術(shù)要求 329
25.2 術(shù)語(yǔ)定義 329
25.3 獲取用戶(hù)確認(rèn) 330
25.4 錯(cuò)誤確認(rèn) 333
25.5 被動(dòng)通知 337
25.6 活動(dòng)模態(tài)框 338
25.7 本章小結(jié) 340
第 26 章 使用動(dòng)畫(huà) 343
26.1 技術(shù)要求 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 庫(kù) 345
26.4 動(dòng)畫(huà)布局組件 345
26.5 動(dòng)畫(huà)組件樣式 349
26.6 本章小結(jié) 351
第 27 章 控制圖像顯示 353
27.1 技術(shù)要求 353
27.2 加載圖像 353
27.3 調(diào)整圖像大小 355
27.4 延遲加載圖像 357
27.5 渲染圖標(biāo) 360
27.6 本章小結(jié) 362
第 28 章 離線(xiàn)使用 363
28.1 技術(shù)要求 363
28.2 檢測(cè)網(wǎng)絡(luò)狀態(tài) 363
28.3 存儲(chǔ)應(yīng)用程序數(shù)據(jù) 365
28.4 同步應(yīng)用程序數(shù)據(jù) 369
28.5 本章小結(jié) 373