《React Hooks實戰》是是2022年8月清華大學出版社出版的圖書，作者是[英] 約翰·拉森（John Larsen），譯者是周軼、張兆陽和顏宇。
基本介紹
- 書名：React Hooks實戰
- 作者：[英] 約翰·拉森（John Larsen）
- 原作品：React Hooks in Action, With Suspense and Concurrent Mode
- 譯者：周軼、張兆陽、顏宇
- 出版社：清華大學出版社
- 出版時間：2022年8月
- 頁數：336 頁
- 定價：98 元
- 開本：16 開
- 裝幀：平裝
- ISBN：9787302613572
圖書目錄,
圖書目錄
第Ⅰ部分 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.2 獲取和設定查詢字元串中的查詢參數 233
10.3 使用React Query讓數據獲取過程更流暢 242
10.4 本章小結 254
第Ⅱ部分 揭秘React Concurrent特性
第11章 利用Suspense進行代碼分割 259
11.1 利用import函式動態導入代碼 260
11.2 利用lazy和Suspense動態導入組件 264
11.3 利用錯誤邊界捕獲異常 273
11.4 本章小結 278
第12章 整合數據請求和 Suspense 281
12.1 使用Suspense請求數據 282
12.2 整合React Query、Suspense和錯誤邊界 292
12.3 使用Suspense載入圖片 294
12.4 本章小結 299
第13章 實驗特性：useTransition、useDeferredValue和SuspenseList 301
13.1 在不同狀態間更順滑地過渡 302
13.2 使用SuspenseList管理多個回退UI 309
13.3 Concurrent模式及未來 313
13.4 本章小結 314
