React Hooks實(shí)戰(zhàn)

第Ⅰ部分  React Hooks介紹及應(yīng)用
第1章  逐漸演進(jìn)的React 3
1.1  什么是React 3
1.1.1  用組件構(gòu)建UI 4
1.1.2  同步狀態(tài)和UI 6
1.1.3  理解組件的類型 9
1.2  React中的新增功能 11
1.3  可以為函數(shù)式組件添加
狀態(tài)的React Hooks 12
1.3.1  有狀態(tài)的函數(shù)式組件：
更少的代碼，更好的
組織結(jié)構(gòu) 12
1.3.2  自定義hook：更易于
代碼復(fù)用 14
1.3.3  第三方的hook提供了
完備的、經(jīng)過良好測試
的功能 17
1.4  通過Concurrent模式和
Suspense獲得更好的UX 18
1.4.1  Concurrent模式 19
1.4.2  Suspense 20
1.5  全新的React發(fā)布渠道 21
1.6  本書讀者對象 21
1.7  開始吧 22
1.8  本章小結(jié) 22
第2章  使用useState hook管理組件
的狀態(tài) 23
2.1  搭建預(yù)訂管理應(yīng)用程序 24
2.1.1  通過create-react-app
生成應(yīng)用程序的框架 26
2.1.2  編輯四個(gè)關(guān)鍵文件 27
2.1.3  為應(yīng)用程序添加數(shù)據(jù)庫
文件 30
2.1.4  創(chuàng)建頁面組件和
UserPicker.js文件 31
2.2  通過useState存儲、使用和
設(shè)置值 32
2.2.1  給變量賦新值并不會
更新UI 33
2.2.2  調(diào)用useState返回一個(gè)值
和一個(gè)updater函數(shù) 36
2.2.3  調(diào)用updater函數(shù)替換
之前的狀態(tài)值 40
2.2.4  將函數(shù)傳遞給useState
作為初始值 43
2.2.5  設(shè)置新狀態(tài)時(shí)需要使用
之前的狀態(tài) 44
2.3  多次調(diào)用useState以處理
多個(gè)狀態(tài)值 46
2.3.1  使用下拉菜單設(shè)置
狀態(tài) 46
2.3.2  使用復(fù)選框設(shè)置狀態(tài) 49
2.4  復(fù)習(xí)函數(shù)式組件概念 52
2.5  本章小結(jié) 55
第3章  使用useReducer hook
管理組件的狀態(tài) 57
3.1  在響應(yīng)一個(gè)事件時(shí)更新
多個(gè)狀態(tài)值 58
3.1.1  不可預(yù)測的狀態(tài)變化會
將用戶帶離焦點(diǎn) 58
3.1.2  通過可預(yù)測的狀態(tài)變化
讓用戶沉浸在電影中 59
3.2  通過useReducer管理更
復(fù)雜的狀態(tài) 61
3.2.1  使用reducer及一個(gè)預(yù)
定義的action集更新
狀態(tài) 62
3.2.2  為BookablesList組件
構(gòu)建reducer 64
3.2.3  使用useReducer訪問組件
狀態(tài)并分派action 67
3.3  通過函數(shù)生成初始狀態(tài) 70
3.3.1  引入WeekPicker組件 71
3.3.2  創(chuàng)建用以處理日期和
星期的工具函數(shù) 72
3.3.3  構(gòu)建幫助組件管理
日期的reducer 73
3.3.4  向useReducer hook傳遞
初始化函數(shù) 74
3.3.5  使用WeekPicker更新
BookingsPage 75
3.4  復(fù)習(xí)useReducer的相關(guān)
概念 76
3.5  本章小結(jié) 79
第4章  處理副作用 81
4.1  通過簡單示例探討
useEffect API 82
4.1.1  在每次渲染后運(yùn)行副
作用 82
4.1.2  僅當(dāng)組件被掛載時(shí)運(yùn)行
副作用 84
4.1.3  通過返回一個(gè)函數(shù)清理
副作用 86
4.1.4  通過指定依賴項(xiàng)控制
effect的運(yùn)行時(shí)間 88
4.1.5  總結(jié)調(diào)用useEffect hook
的方式 91
4.1.6  在瀏覽器重繪之前調(diào)用
useLayoutEffect運(yùn)行
effect 91
4.2  獲取數(shù)據(jù) 92
4.2.1  新建一個(gè)db.json文件 92
4.2.2  設(shè)置JSON服務(wù)器 92
4.2.3  通過useEffect hook獲取
數(shù)據(jù) 94
4.2.4  使用async和await 96
4.3  獲取BookablesList組件的
數(shù)據(jù) 97
4.3.1  測試數(shù)據(jù)加載的過程 97
4.3.2  更新reducer以管理加載
中狀態(tài)和錯(cuò)誤狀態(tài) 98
4.3.3  創(chuàng)建一個(gè)用于加載
數(shù)據(jù)的輔助函數(shù) 100
4.3.4  加載可預(yù)訂對象 102
4.4  本章小結(jié) 103
第5章  使用useRef hook管理組件
狀態(tài) 105
5.1  更新狀態(tài)但不觸發(fā)重新
渲染 106
5.1.1  對比useState和useRef
在更新狀態(tài)值時(shí)的
區(qū)別 106
5.1.2  調(diào)用useRef 108
5.2  在ref中保存計(jì)時(shí)器ID 109
5.3  保存DOM元素的引用 112
5.3.1  在事件響應(yīng)中將焦點(diǎn)
設(shè)置到指定元素上 112
5.3.2  利用ref控制文本框 115
5.4  本章小結(jié) 118
第6章  管理應(yīng)用程序的狀態(tài) 119
6.1  向子組件傳遞共享狀態(tài) 120
6.1.1  通過設(shè)置子組件的prop
傳遞父組件的狀態(tài) 120
6.1.2  從父組件接收狀態(tài)
作為prop 121
6.1.3  從父組件接收updater
函數(shù)作為prop 123
6.2  拆分組件 125
6.2.1  將組件視為大型應(yīng)用
程序的一部分 125
6.2.2  在一個(gè)頁面上組織
多個(gè)組件 126
6.2.3  創(chuàng)建BookableDetails
組件 127
6.3  共享useReducer返回的
狀態(tài)和dispatch函數(shù) 129
6.3.1  在BookablesView組件
中管理狀態(tài) 130
6.3.2  從reducer中刪除
一個(gè)action 131
6.3.3  在BookablesList組件
中接收狀態(tài)和dispatch
函數(shù) 131
6.4  共享useState返回的狀態(tài)
和updater函數(shù) 134
6.4.1  在BookablesView組件中
管理選定的可預(yù)訂
信息 135
6.4.2  在BookablesList中接收
可預(yù)訂信息和updater
函數(shù) 136
6.5  使用useCallback傳遞函數(shù)
以避免重復(fù)定義 141
6.5.1  使用prop傳入的函數(shù)
作為依賴項(xiàng) 142
6.5.2  使用useCallback hook
維護(hù)函數(shù)的標(biāo)識 143
6.6  本章小結(jié) 144
第7章  使用useMemo管理
性能 147
7.1  廚子不喜歡制作一人份的
小蛋糕 148
7.1.1  使用高開銷算法生成
變位詞 149
7.1.2  避免多余的函數(shù)
調(diào)用 151
7.2  通過useMemo記憶化
高開銷函數(shù) 152
7.3  在Bookings頁面上組織
組件 153
7.3.1  使用useState管理選定的
可預(yù)訂對象 155
7.3.2  使用useReducer和useState管理選定的星期和預(yù)訂
信息 155
7.4  使用useMemo高效創(chuàng)建
預(yù)訂信息網(wǎng)格組件 158
7.4.1  生成時(shí)間段和日期的
網(wǎng)格 158
7.4.2  生成預(yù)訂信息的查詢
對象 161
7.4.3  提供數(shù)據(jù)加載函數(shù)
getBookings 163
7.4.4  創(chuàng)建BookingsGrid組件
并調(diào)用useMemo 164
7.4.5  在useEffect中獲取數(shù)據(jù)
時(shí)處理多個(gè)響應(yīng)競爭
的情況 167
7.5  本章小結(jié) 172
第8章  使用Context API管理
狀態(tài) 175
8.1  從上層的組件樹中獲取
狀態(tài) 176
8.1.1  當(dāng)頁面首次加載時(shí)顯示
一條行為召喚的
消息 177
8.1.2  當(dāng)用戶選定預(yù)訂信息時(shí)
顯示預(yù)訂信息詳情 178
8.1.3  顯示一個(gè)用于編輯用戶
預(yù)訂信息的按鈕——
問題 179
8.1.4  顯示一個(gè)用于編輯用戶
預(yù)訂信息的按鈕——
解決方案 180
8.2  使用自定義的provider和
多個(gè)context 185
8.2.1  將對象用作context provider
的值 186
8.2.2  將狀態(tài)移到自定義
provider中 187
8.2.3  使用多個(gè)context 191
8.2.4  為context指定一個(gè)
默認(rèn)值 195
8.3  本章小結(jié) 195
第9章  創(chuàng)建自定義hook 197
9.1  將功能提取到自定義
hook中 199
9.1.1  重新組織通用功能 201
9.1.2  在組件外部聲明
自定義hook 202
9.1.3  在自定義hook中調(diào)用
自定義hook 203
9.2  遵循h(huán)ook的規(guī)則 205
9.2.1  僅在組件的最頂層
調(diào)用hook 206
9.2.2  只從React函數(shù)式組件中
調(diào)用hook 206
9.2.3  使用ESLint插件檢查
hook的規(guī)則 206
9.3  更多關(guān)于自定義hook的
示例 207
9.3.1  使用useWindowSize hook
獲取窗口尺寸 207
9.3.2  使用useLocalStorage hook
獲取/設(shè)置值 209
9.4  使用自定義hook消費(fèi)
context值 210
9.5  使用自定義hook封裝數(shù)據(jù)
請求 213
9.5.1  開發(fā)useFetch hook 213
9.5.2  使用useFetch hook返回
的data、status和error
屬性 214
9.5.3  創(chuàng)建專用的數(shù)據(jù)請求
hook：useBookings 216
9.6  本章小結(jié) 220
第10章  使用第三方hook 223
10.1  利用React Router訪問
URL中的狀態(tài) 224
10.1.1  設(shè)置路由并開啟嵌套
路由功能 225
10.1.2  為Bookables頁面添加
嵌套的路由 226
10.1.3  利用useParams hook
獲取URL參數(shù) 227
10.1.4  使用useNavigate hook
導(dǎo)航 229
10.2  獲取和設(shè)置查詢字符串中
的查詢參數(shù) 233
10.2.1  從查詢字符串獲取
查詢參數(shù) 234
10.2.2  設(shè)置查詢字符串 239
10.3  使用React Query讓數(shù)據(jù)
獲取過程更流暢 242
10.3.1  React Query簡介 243
10.3.2  組件可訪問React Query
的client實(shí)例 245
10.3.3  使用useQuery獲取
數(shù)據(jù) 245
10.3.4  訪問查詢緩存中的
數(shù)據(jù) 248
10.3.5  使用useMutation更新
服務(wù)端狀態(tài) 251
10.4  本章小結(jié) 254
第Ⅱ部分  揭秘React Concurrent特性
第11章  利用Suspense進(jìn)行代碼
  分割 259
11.1  利用import函數(shù)動態(tài)導(dǎo)入
代碼 260
11.1.1  新建Web頁面并在
單擊按鈕時(shí)加載
JavaScript 260
11.1.2  默認(rèn)導(dǎo)出和命名
導(dǎo)出 261
11.1.3  使用靜態(tài)導(dǎo)入
加載JavaScript 261
11.1.4  調(diào)用import函數(shù)動態(tài)
加載JavaScript 262
11.2  利用lazy和Suspense動態(tài)
導(dǎo)入組件 264
11.2.1  利用lazy函數(shù)將組件
包裝成懶加載
組件 264
11.2.2  利用Suspense組件
聲明回退內(nèi)容 267
11.2.3  理解lazy和Suspense
組件協(xié)同工作的
方式 270
11.2.4  根據(jù)路由進(jìn)行代碼
分割 271
11.3  利用錯(cuò)誤邊界捕獲
異常 273
11.3.1  在React文檔中查看
錯(cuò)誤邊界的示例 274
11.3.2  開發(fā)一個(gè)自定義錯(cuò)誤
邊界 275
11.3.3  從異常中恢復(fù) 277
11.4  本章小結(jié) 278
第12章  整合數(shù)據(jù)請求和
  Suspense 281
12.1  使用Suspense請求
數(shù)據(jù) 282
12.1.1  封裝promise并上報(bào)
其狀態(tài) 283
12.1.2  利用promise狀態(tài)
整合Suspense 284
12.1.3  盡可能早地開始請求
數(shù)據(jù) 285
12.1.4  請求新的數(shù)據(jù) 286
12.1.5  從異常中恢復(fù) 289
12.1.6  閱讀React文檔 290
12.2  整合React Query、Suspense和錯(cuò)誤邊界 292
12.3  使用Suspense加載
圖片 294
12.3.1  使用React Query
和Suspense提供圖片
加載回退UI 295
12.3.2  利用React Query提前
請求圖片和數(shù)據(jù) 297
12.4  本章小結(jié) 299
第13章  實(shí)驗(yàn)特性：useTransition、useDeferredValue和
SuspenseList 301
13.1  在不同狀態(tài)間更順滑地
過渡 302
13.1.1  利用useTransition
避免狀態(tài)退化 303
13.1.2  利用isPending為用戶
提供反饋 304
13.1.3  為通用組件添加過渡
特性 306
13.1.4  利用useDeferredValue
保存舊值 307
13.2  使用SuspenseList管理多個(gè)回退UI 309
13.2.1  顯示多種來源的
數(shù)據(jù) 310
13.2.2  利用SuspenseList控制
多個(gè)回退UI 311
13.3  Concurrent模式及
未來 313
13.4  本章小結(jié) 314