ReactJS實(shí)踐入門

第1章  Hello,World！ 1
1.1  在沒有工具鏈的情況下
如何使用React 1
1.2  使用Create React App
和JSX創(chuàng)建交互式
“Hello,World”應(yīng)用程序 6
1.3  本章小結(jié) 7
第2章  React基礎(chǔ) 9
2.1  React名稱的由來 9
2.2  UI層 10
2.3  虛擬DOM 11
2.4  React的原理 12
2.4.1  關(guān)于組件 12
2.4.2  組合與繼承 13
2.4.3  React是聲明式的 13
2.4.4  React是慣用語 14
2.4.5  為什么要學(xué)習(xí)React 15
2.4.6  React與其他框架的
比較 15
2.4.7  React不是什么 17
2.5  本章小結(jié) 18
第3章  JSX 21
3.1  JSX不是HTML 21
3.2  什么是JSX 26
3.2.1  JSX的工作方式 26
3.2.2  轉(zhuǎn)譯器 28
3.3  JSX的語法基礎(chǔ) 29
3.3.1  JSX是JavaScript XML 29
3.3.2  避免使用保留字 30
3.3.3  JSX使用駝峰式命
名法 30
3.3.4  為DOM元素中的自定義
屬性加上data-前綴 30
3.3.5  JSX布爾屬性 31
3.3.6  使用花括號(hào)包含
JavaScript字面量 31
3.3.7  何時(shí)在JSX中使用
JavaScript 32
3.3.8  JSX中的條件 32
3.3.9  JSX中的表達(dá)式 34
3.3.10  在JSX中使用子
元素 35
3.3.11  React Fragment 36
3.3.12  本章小結(jié) 37
第4章  組件 39
4.1  什么是組件 39
4.2  組件和元素 40
4.2.1  組件定義元素 40
4.2.2  元素調(diào)用組件 41
4.3 內(nèi)置組件 42
4.3.1  HTML元素組件 42
4.3.2  Attributes和Props 46
4.4  用戶定義的組件 50
4.5  組件類型 51
4.5.1  類組件 51
4.5.2  逐步了解React類
組件 60
4.5.3  函數(shù)組件 67
4.5.4  函數(shù)組件和類組件的
區(qū)別 75
4.6  React子組件 75
4.6.1  this.props.children 75
4.6.2  Children的用法 76
4.7  組件的生命周期 79
4.7.1  掛載 79
4.7.2  更新 80
4.7.3  卸載 82
4.7.4  錯(cuò)誤處理 82
4.7.5  提高性能并避免錯(cuò)誤 82
4.8  渲染組件 87
4.8.1  用ReactDOM渲染 87
4.8.2  虛擬DOM 88
4.8.3  其他渲染引擎 89
4.9  組件的術(shù)語 91
4.10  本章小結(jié) 92
第5章  React DevTools 93
5.1  安裝和入門 93
5.2  檢查組件 95
5.2.1  使用組件樹 96
5.2.2  搜索組件 97
5.2.3  篩選組件 99
5.2.4  選擇組件 100
5.3  在DevTools中編輯組件
數(shù)據(jù) 101
5.4  使用額外的DevTools
功能 103
5.5  性能分析 104
5.6  本章小結(jié) 106
第6章  React數(shù)據(jù)流 107
6.1  單向數(shù)據(jù)流 107
6.1.1  理解單向數(shù)據(jù)流 108
6.1.2  為什么使用單向
數(shù)據(jù)流 109
6.2  Props 110
6.2.1  組件接收Props 110
6.2.2  Props可以是任何數(shù)據(jù)
類型 110
6.2.3  Props是只讀的 111
6.2.4  使用PropType驗(yàn)證
傳入的Props 112
6.2.5  默認(rèn)Props 123
6.3  ReactState 127
6.3.1  什么是state 127
6.3.2  初始化state 127
6.3.3  state和props的區(qū)別 130
6.3.4  更新狀態(tài) 130
6.3.5  狀態(tài)中應(yīng)包含的
內(nèi)容 140
6.3.6  構(gòu)建Reminders應(yīng)用
程序 141
6.3.7  狀態(tài)中不應(yīng)包含的
內(nèi)容 147
6.3.8  放置狀態(tài)的位置 147
6.3.9  狀態(tài)提升 148
6.3.10  關(guān)于key Prop 154
6.3.11  篩選提醒 160
6.3.12  實(shí)現(xiàn)isComplete
更改功能 164
6.4  轉(zhuǎn)換為類組件 166
6.5  本章小結(jié) 173
第7章  事件 175
7.1  React中事件的運(yùn)行
機(jī)制 175
7.2  什么是SyntheticEvent 177
7.3  使用事件偵聽器屬性 178
7.4  Event對(duì)象 178
7.5  支持的事件 180
7.6  事件處理函數(shù) 184
7.6.1  編寫內(nèi)聯(lián)事件處理
程序 184
7.6.2  在函數(shù)組件中編寫
事件處理程序 185
7.6.3  在類組件中編寫
事件處理程序 186
7.6.4  綁定事件處理程序
函數(shù) 187
7.6.5  將數(shù)據(jù)傳遞給
事件處理程序 190
7.7  本章小結(jié) 191
第8章  表單 193
8.1  表單具有狀態(tài) 193
8.2  受控輸入與非受控輸入 194
8.2.1  更新受控輸入 195
8.2.2  控制函數(shù)組件中的
輸入 195
8.2.3  控制類組件中的輸入 196
8.3  提升輸入狀態(tài) 197
8.4  使用非受控輸入 199
8.5  使用不同的表單元素 200
8.5.1  控制input元素 200
8.5.2  控制textarea元素 201
8.5.3  控制select元素 201
8.6  阻止默認(rèn)操作 202
8.7  本章小結(jié) 203
第9章  ref 205
9.1  什么是ref 205
9.2  如何在類組件中
創(chuàng)建ref 206
9.3  如何在函數(shù)組件中
創(chuàng)建ref 206
9.4  使用ref 206
9.5  創(chuàng)建回調(diào)ref 208
9.6  何時(shí)應(yīng)使用ref 209
9.7  何時(shí)不應(yīng)使用ref 210
9.8  示例 210
9.8.1  管理焦點(diǎn) 210
9.8.2  自動(dòng)選擇文本 210
9.8.3  控制媒體播放 212
9.8.4  設(shè)置滾動(dòng)位置 212
9.9  本章小結(jié) 213
第10章  樣式化React 215
10.1  樣式的重要性 215
10.2  將CSS導(dǎo)入HTML
文件 216
10.3  在組件中使用普通的舊
CSS 216
10.4  編寫內(nèi)聯(lián)樣式 218
10.4.1  JavaScript樣式
語法 219
10.4.2  為什么使用內(nèi)聯(lián)
樣式 220
10.4.3  為什么不使用內(nèi)聯(lián)
樣式 220
10.4.4  使用樣式模塊改進(jìn)
內(nèi)聯(lián)樣式 220
10.5  CSS模塊 221
10.5.1  命名CSS模塊
文件 222
10.5.2  高級(jí)CSS模塊
功能 223
10.6  CSS-IN-JS和樣式化
組件 224
10.7  本章小結(jié) 226
第11章  hook介紹 227
11.1  什么是hook 227
11.2  為什么要引入hook 227
11.3  使用hook的規(guī)則 228
11.4  內(nèi)置hook 229
11.4.1  使用useState管理
狀態(tài) 229
11.4.2  使用useEffect鏈入
生命周期 233
11.4.3  使用useContext訂閱
全局?jǐn)?shù)據(jù) 240
11.4.4  將邏輯和狀態(tài)與
useReducer相結(jié)合 241
11.4.5  使用useCallback緩存
回調(diào)函數(shù) 242
11.4.6  使用useMemo緩存
計(jì)算值 245
11.4.7  使用useRef訪問
子對(duì)象 246
11.4.8  使用useImperativeHandle
自定義公開值 247
11.4.9  使用useLayoutEffect
同步更新DOM 248
11.5  編寫自定義hook 248
11.6  使用UseDebugValue標(biāo)記
自定義hook 250
11.7  查找并使用自定義
hook 252
11.7.1  use-http 252
11.7.2  react-fetch-hook 252
11.7.3  axios-hook 252
11.7.4  react-hook-form 253
11.7.5  @rehooks/local-
storage 253
11.7.6  use-local-storage-
state 254
11.7.7  其他有趣的hook 254
11.7.8  hook列表 254
11.8  本章小結(jié) 254
第12章  路由 257
12.1  什么是路由 257
12.2  React中路由的用法 259
12.3  使用React Router 260
12.3.1  安裝并導(dǎo)入
react-router-dom 260
12.3.2  路由器組件 261
12.3.3  鏈接到路由 263
12.3.4  創(chuàng)建路由 268
12.3.5  location、history和
match對(duì)象 274
12.4  React Router hook 280
12.4.1  useHistory 281
12.4.2  useLocation 281
12.4.3  useParams 281
12.4.4  useRouteMatch 281
12.5  本章小結(jié) 281
第13章  錯(cuò)誤邊界 283
13.1  錦囊妙計(jì) 283
13.2  什么是錯(cuò)誤邊界 284
13.3  實(shí)現(xiàn)錯(cuò)誤邊界 286
13.3.1  構(gòu)建自己的
ErrorBoundary組件 286
13.3.2  安裝預(yù)先構(gòu)建的
ErrorBoundary組件 295
13.4  錯(cuò)誤邊界無法捕獲的
錯(cuò)誤 296
13.4.1  使用try/catch捕獲
錯(cuò)誤邊界中的錯(cuò)誤 296
13.4.2  使用react-error-boundary
捕獲事件處理程序中的
錯(cuò)誤 297
13.5  本章小結(jié) 298
第14章  部署React 299
14.1  什么是部署 299
14.2  構(gòu)建應(yīng)用程序 299
14.2.1  運(yùn)行build腳本 300
14.2.2  檢查build目錄 300
14.2.3  filenames的由來 302
14.3  部署的應(yīng)用程序有何
不同 303
14.4  開發(fā)模式與生產(chǎn)模式 303
14.5  發(fā)布到Web上 304
14.5.1  Web服務(wù)器托管 304
14.5.2  節(jié)點(diǎn)托管 304
14.5.3  使用Netlify進(jìn)行
部署 305
14.6  本章小結(jié) 308
第15章  從頭開始初始化React
項(xiàng)目 309
15.1  構(gòu)建自己的工具鏈 309
15.1.1  初始化項(xiàng)目 310
15.1.2  HTML文檔 310
15.1.3  主JavaScript文件 311
15.1.4  根組件 311
15.1.5  在瀏覽器中運(yùn)行 312
15.2  Webpack的工作原理 315
15.2.1  加載器 315
15.2.2  插件 315
15.3  自動(dòng)化構(gòu)建過程 316
15.3.1  制作HTML模板 316
15.3.2  開發(fā)服務(wù)器和熱
重載 317
15.3.3  測(cè)試工具 317
15.3.4  創(chuàng)建npm腳本 321
15.4  構(gòu)建源目錄 322
15.4.1  按文件類型分組 322
15.4.2  按功能分組 323
15.5  本章小結(jié) 323
第16章  獲取和緩存數(shù)據(jù) 325
16.1  異步代碼：與時(shí)間
有關(guān) 325
16.2  JavaScript永不休眠 326
16.3  在React中如何運(yùn)行異步
代碼 329
16.4  獲取數(shù)據(jù)的方法 331
16.5  使用Fetch獲取數(shù)據(jù) 332
16.6  使用axios獲取數(shù)據(jù) 332
16.7  使用Web Storage 334
16.7.1  Web Storage的兩個(gè)
屬性 334
16.7.2  何時(shí)使用
Web Storage 335
16.7.3  何時(shí)不使用
Web Storage 335
16.7.4  Web Storage是
同步的 335
16.7.5  使用localStorage的
示例 336
16.7.6  使用localStorage
存儲(chǔ)數(shù)據(jù) 336
16.7.7  從localStorage
讀取數(shù)據(jù) 337
16.7.8  從localStorage中
刪除數(shù)據(jù) 339
16.8  本章小結(jié) 339
第17章  Context API 341
17.1  什么是prop drilling 341
17.2  Context API如何解決
問題 342
17.2.1  創(chuàng)建Context 342
17.2.2  創(chuàng)建Provider 343
17.2.3  使用Context 343
17.3  Context的常見用例 345
17.4  不適用Context的情況 345
17.5  合成模式作為Context的
替代方案 346
17.6  示例應(yīng)用程序：用戶偏好
設(shè)置 349
17.7  本章小結(jié) 351
第18章  React Portal 353
18.1  什么是Portal 353
18.1.1  如何創(chuàng)建Portal 353
18.1.2  為什么不直接渲染
多個(gè)組件樹 356
18.2  常見用例 357
18.2.1  模態(tài)對(duì)話框的渲染與
交互 357
18.2.2  使用模態(tài)管理鍵盤
焦點(diǎn) 362
18.3  本章小結(jié) 363
第19章  React中的無障礙性 365
19.1  為什么無障礙性
很重要 365
19.2  無障礙性基礎(chǔ) 366
19.2.1  Web內(nèi)容無障礙性
指南(WCAG) 366
19.2.2  Web無障礙計(jì)劃-無障礙
富互聯(lián)網(wǎng)應(yīng)用程序
(WAI-ARIA) 367
19.3  在React組件中實(shí)現(xiàn)無障
礙性 367
19.3.1  React中的ARIA
屬性 367
19.3.2  語義化的HTML 368
19.3.3  表單無障礙性 369
19.3.4  React中的焦點(diǎn)
控制 369
19.3.5  React中的媒體
查詢 371
19.4  本章小結(jié) 373
第20章  高級(jí)主題 375
20.1  測(cè)試 375
20.1.1  Mocha 376
20.1.2  Enzyme 376
20.1.3  Chai 377
20.2  服務(wù)器端渲染 379
20.2.1  Flux 380
20.2.2  Redux 380
20.2.3  GraphQL 382
20.2.4  Apollo 383
20.2.5  React Native 383
20.2.6  Next.js 384
20.2.7  Gatsby 384
20.3  需要關(guān)注的人 384
20.4  有用的鏈接和資源 385
20.5  本章小結(jié) 385