React Hooks 實戰 React Hooks in Action: With Suspense and Concurrent Mode

目    錄

 

 

 

 

 

 

第Ⅰ部分  React Hooks介紹及應用

第1章  逐漸演進的React 3

1.1  什麽是React 3

1.1.1  用組件構建UI 4

1.1.2  同步狀態和UI 6

1.1.3  理解組件的類型 9

1.2  React中的新增功能 11

1.3  可以為函數式組件添加

狀態的React Hooks 12

1.3.1  有狀態的函數式組件：

更少的代碼，更好的

組織結構 12

1.3.2  自定義hook：更易於

代碼復用 14

1.3.3  第三方的hook提供了

完備的、經過良好測試

的功能 17

1.4  通過Concurrent模式和

Suspense獲得更好的UX 18

1.4.1  Concurrent模式 19

1.4.2  Suspense 20

1.5  全新的React發布渠道 21

1.6  本書讀者對象 21

1.7  開始吧 22

1.8  本章小結 22

第2章  使用useState hook管理組件

的狀態 23

2.1  搭建預訂管理應用程序 24

2.1.1  通過create-react-app

生成應用程序的框架 26

2.1.2  編輯四個關鍵文件 27

2.1.3  為應用程序添加數據庫

文件 30

2.1.4  創建頁面組件和

UserPicker.js文件 31

2.2  通過useState存儲、使用和

設置值 32

2.2.1  給變量賦新值並不會

更新UI 33

2.2.2  調用useState返回一個值

和一個updater函數 36

2.2.3  調用updater函數替換

之前的狀態值 40

2.2.4  將函數傳遞給useState

作為初始值 43

2.2.5  設置新狀態時需要使用

之前的狀態 44

2.3  多次調用useState以處理

多個狀態值 46

2.3.1  使用下拉菜單設置

狀態 46

2.3.2  使用復選框設置狀態 49

2.4  復習函數式組件概念 52

2.5  本章小結 55

第3章  使用useReducer hook

管理組件的狀態 57

3.1  在響應一個事件時更新

多個狀態值 58

3.1.1  不可預測的狀態變化會

將用戶帶離焦點 58

3.1.2  通過可預測的狀態變化

讓用戶沉浸在電影中 59

3.2  通過useReducer管理更

復雜的狀態 61

3.2.1  使用reducer及一個預

定義的action集更新

狀態 62

3.2.2  為BookablesList組件

構建reducer 64

3.2.3  使用useReducer訪問組件

狀態並分派action 67

3.3  通過函數生成初始狀態 70

3.3.1  引入WeekPicker組件 71

3.3.2  創建用以處理日期和

星期的工具函數 72

3.3.3  構建幫助組件管理

日期的reducer 73

3.3.4  向useReducer hook傳遞

初始化函數 74

3.3.5  使用WeekPicker更新

BookingsPage 75

3.4  復習useReducer的相關

概念 76

3.5  本章小結 79

第4章  處理副作用 81

4.1  通過簡單示例探討

useEffect API 82

4.1.1  在每次渲染後運行副

作用 82

4.1.2  僅當組件被掛載時運行

副作用 84

4.1.3  通過返回一個函數清理

副作用 86

4.1.4  通過指定依賴項控制

effect的運行時間 88

4.1.5  總結調用useEffect hook

的方式 91

4.1.6  在瀏覽器重繪之前調用

useLayoutEffect運行

effect 91

4.2  獲取數據 92

4.2.1  新建一個db.json文件 92

4.2.2  設置JSON服務器 92

4.2.3  通過useEffect hook獲取

數據 94

4.2.4  使用async和await 96

4.3  獲取BookablesList組件的

數據 97

4.3.1  測試數據加載的過程 97

4.3.2  更新reducer以管理加載

中狀態和錯誤狀態 98

4.3.3  創建一個用於加載

數據的輔助函數 100

4.3.4  加載可預訂對象 102

4.4  本章小結 103

第5章  使用useRef hook管理組件

狀態 105

5.1  更新狀態但不觸發重新

渲染 106

5.1.1  對比useState和useRef

在更新狀態值時的

區別 106

5.1.2  調用useRef 108

5.2  在ref中保存計時器ID 109

5.3  保存DOM元素的引用 112

5.3.1  在事件響應中將焦點

設置到指定元素上 112

5.3.2  利用ref控制文本框 115

5.4  本章小結 118

第6章  管理應用程序的狀態 119

6.1  向子組件傳遞共享狀態 120

6.1.1  通過設置子組件的prop

傳遞父組件的狀態 120

6.1.2  從父組件接收狀態

作為prop 121

6.1.3  從父組件接收updater

函數作為prop 123

6.2  拆分組件 125

6.2.1  將組件視為大型應用

程序的一部分 125

6.2.2  在一個頁面上組織

多個組件 126

6.2.3  創建BookableDetails

組件 127

6.3  共享useReducer返回的

狀態和dispatch函數 129

6.3.1  在BookablesView組件

中管理狀態 130

6.3.2  從reducer中刪除

一個action 131

6.3.3  在BookablesList組件

中接收狀態和dispatch

函數 131

6.4  共享useState返回的狀態

和updater函數 134

6.4.1  在BookablesView組件中

管理選定的可預訂

信息 135

6.4.2  在BookablesList中接收

可預訂信息和updater

函數 136

6.5  使用useCallback傳遞函數

以避免重復定義 141

6.5.1  使用prop傳入的函數

作為依賴項 142

6.5.2  使用useCallback hook

維護函數的標識 143

6.6  本章小結 144

第7章  使用useMemo管理

性能 147

7.1  廚子不喜歡製作一人份的

小蛋糕 148

7.1.1  使用高開銷算法生成

變位詞 149

7.1.2  避免多餘的函數

調用 151

7.2  通過useMemo記憶化

高開銷函數 152

7.3  在Bookings頁面上組織

組件 153

7.3.1  使用useState管理選定的

可預訂對象 155

7.3.2  使用useReducer和useState管理選定的星期和預訂

信息 155

7.4  使用useMemo高效創建

預訂信息網格組件 158

7.4.1  生成時間段和日期的

網格 158

7.4.2  生成預訂信息的查詢

對象 161

7.4.3  提供數據加載函數

getBookings 163

7.4.4  創建BookingsGrid組件

並調用useMemo 164

7.4.5  在useEffect中獲取數據

時處理多個響應競爭

的情況 167

7.5  本章小結 172

第8章  使用Context API管理

狀態 175

8.1  從上層的組件樹中獲取

狀態 176

8.1.1  當頁面首次加載時顯示

一條行為召喚的

消息 177

8.1.2  當用戶選定預訂信息時

顯示預訂信息詳情 178

8.1.3  顯示一個用於編輯用戶

預訂信息的按鈕——

問題 179

8.1.4  顯示一個用於編輯用戶

預訂信息的按鈕——

解決方案 180

8.2  使用自定義的provider和

多個context 185

8.2.1  將對象用作context provider

的值 186

8.2.2  將狀態移到自定義

provider中 187

8.2.3  使用多個context 191

8.2.4  為context指定一個

默認值 195

8.3  本章小結 195

第9章  創建自定義hook 197

9.1  將功能提取到自定義

hook中 199

9.1.1  重新組織通用功能 201

9.1.2  在組件外部聲明

自定義hook 202

9.1.3  在自定義hook中調用

自定義hook 203

9.2  遵循hook的規則 205

9.2.1  僅在組件的最頂層

調用hook 206

9.2.2  只從React函數式組件中

調用hook 206

9.2.3  使用ESLint插件檢查

hook的規則 206

9.3  更多關於自定義hook的

示例 207

9.3.1  使用useWindowSize hook

獲取窗口尺寸 207

9.3.2  使用useLocalStorage hook

獲取/設置值 209

9.4  使用自定義hook消費

context值 210

9.5  使用自定義hook封裝數據

請求 213

9.5.1  開發useFetch hook 213

9.5.2  使用useFetch hook返回

的data、status和error

屬性 214

9.5.3  創建專用的數據請求

hook：useBookings 216

9.6  本章小結 220

第10章  使用第三方hook 223

10.1  利用React Router訪問

URL中的狀態 224

10.1.1  設置路由並開啟嵌套

路由功能 225

10.1.2  為Bookables頁面添加

嵌套的路由 226

10.1.3  利用useParams hook

獲取URL參數 227

10.1.4  使用useNavigate hook

導航 229

10.2  獲取和設置查詢字符串中

的查詢參數 233

10.2.1  從查詢字符串獲取

查詢參數 234

10.2.2  設置查詢字符串 239

10.3  使用React Query讓數據

獲取過程更流暢 242

10.3.1  React Query簡介 243

10.3.2  組件可訪問React Query

的client實例 245

10.3.3  使用useQuery獲取

數據 245

10.3.4  訪問查詢緩存中的

數據 248

10.3.5  使用useMutation更新

服務端狀態 251

10.4  本章小結 254

第Ⅱ部分  揭秘React Concurrent特性

第11章  利用Suspense進行代碼

  分割 259

11.1  利用import函數動態導入

代碼 260

11.1.1  新建Web頁面並在

單擊按鈕時加載

JavaScript 260

11.1.2  默認導出和命名

導出 261

11.1.3  使用靜態導入

加載JavaScript 261

 

11.1.4  調用import函數動態

加載JavaScript 262

11.2  利用lazy和Suspense動態

導入組件 264

11.2.1  利用lazy函數將組件

包裝成懶加載

組件 264

11.2.2  利用Suspense組件

聲明回退內容 267

11.2.3  理解lazy和Suspense

組件協同工作的

方式 270

11.2.4  根據路由進行代碼

分割 271

11.3  利用錯誤邊界捕獲

異常 273

11.3.1  在React文檔中查看

錯誤邊界的示例 274

11.3.2  開發一個自定義錯誤

邊界 275

11.3.3  從異常中恢復 277

11.4  本章小結 278

第12章  整合數據請求和

  Suspense 281

12.1  使用Suspense請求

數據 282

12.1.1  封裝promise並上報

其狀態 283

12.1.2  利用promise狀態

整合Suspense 284

12.1.3  盡可能早地開始請求

數據 285

12.1.4  請求新的數據 286

12.1.5  從異常中恢復 289

12.1.6  閱讀React文檔 290

12.2  整合React Query、Suspense和錯誤邊界 292

12.3  使用Suspense加載

圖片 294

12.3.1  使用React Query

和Suspense提供圖片

加載回退UI 295

12.3.2  利用React Query提前

請求圖片和數據 297

12.4  本章小結 299

第13章  實驗特性：useTransition、useDeferredValue和

SuspenseList 301

13.1  在不同狀態間更順滑地

過渡 302

13.1.1  利用useTransition

避免狀態退化 303

13.1.2  利用isPending為用戶

提供反饋 304

13.1.3  為通用組件添加過渡

特性 306

13.1.4  利用useDeferredValue

保存舊值 307

13.2  使用SuspenseList管理多個回退UI 309

13.2.1  顯示多種來源的

數據 310

13.2.2  利用SuspenseList控制

多個回退UI 311

13.3  Concurrent模式及

未來 313

13.4  本章小結 314