React開發(fā)實踐：掌握Redux與Hooks應(yīng)用

第1章  JavaScript基礎(chǔ)知識 1
1.1  JavaScript構(gòu)造函數(shù) 1
1.1.1  原始構(gòu)造函數(shù) 1
1.1.2  構(gòu)造函數(shù)中的實例屬性和靜態(tài)屬性 2
1.1.3  構(gòu)造函數(shù)中的實例方法和靜態(tài)方法 3
1.2  ES6 class關(guān)鍵字創(chuàng)建類 4
1.3  class類繼承 6
1.3.1  屬性繼承 6
1.3.2  方法繼承 7
1.3.3  創(chuàng)建類的私有屬性和方法 8
1.4  深入解析JavaScript ES6展開運算符 9
1.5  ES6數(shù)組迭代方法 11
1.5.1  map()方法 11
1.5.2  forEach()方法 12
1.5.3  filter()方法 14
1.5.4  some()方法 15
1.5.5  every()方法 16
1.5.6  reduce()方法 17
1.6  ES6解構(gòu)賦值 18
1.7  箭頭函數(shù)中的this指向 20
第2章  React基礎(chǔ)入門 23
2.1  React簡介 23
2.1.1  React、Vue、Angular三大框架流行趨勢 24
2.1.2  React的優(yōu)勢 24
2.2  Hello React開啟你的React之旅 25
2.3  React組件化開發(fā) 27
2.4  渲染書籍列表案例 29
2.5  計數(shù)器案例 31
2.6  JSX語法詳解 32
2.6.1  JSX基本使用 32
2.6.2  JSX中嵌入表達(dá)式 34
2.6.3  JSX綁定屬性 35
2.6.4  動態(tài)設(shè)置class屬性 37
2.7  綁定this的三種方法 39
2.8  事件參數(shù)傳遞 42
2.9  菜單排他 43
2.10  React條件渲染 44
2.11  React列表渲染 46
第3章  React腳手架應(yīng)用 49
3.1  安裝create-react-app腳手架 49
3.2  React腳手架項目目錄結(jié)構(gòu)及作用 50
3.3  React腳手架渲染Hello React 51
3.4  React函數(shù)式組件的定義及使用 53
第4章  React生命周期 55
4.1  認(rèn)識生命周期 55
4.2  componentDidMount()生命周期函數(shù)的應(yīng)用 56
4.3  componentDidUpdate()生命周期函數(shù)的應(yīng)用 58
4.4  componentWillUnmount()生命周期函數(shù)的應(yīng)用 59
第5章  組件通信 62
5.1  組件嵌套 62
5.2  父組件向子組件傳遞數(shù)據(jù) 64
5.3  prop-types數(shù)據(jù)類型校驗 66
5.4  子組件向父組件傳遞數(shù)據(jù) 67
5.5  組件通信選項卡案例 70
5.6  children子元素模擬插槽 74
5.7  props模擬插槽 75
5.8  模擬作用域插槽 76
5.9  Context數(shù)據(jù)傳遞 79
5.10  事件總線 82
第6章  React組件化開發(fā) 85
6.1  setState()的作用以及用法 85
6.2  組件性能優(yōu)化shouldComponentUpdate 87
6.3  組件性能優(yōu)化PureComponent 89
6.4  函數(shù)組件性能優(yōu)化 91
6.5  組件中state數(shù)據(jù)不可變性原則 92
6.6  使用ref獲取DOM的三種方式 93
6.7  ref獲取組件 95
6.8  受控組件與非受控組件 97
6.9  Checkbox受控表單組件應(yīng)用 99
6.10  Select受控表單組件應(yīng)用 102
6.11  React高階組件 104
6.12  高階組件的應(yīng)用場景 106
6.13  高階組件應(yīng)用案例 107
6.14  Portals的應(yīng)用 109
6.15  Fragment組件 110
第7章  React動畫及CSS樣式 112
7.1  react-transition-group動畫庫 112
7.2  CSSTransition生命周期函數(shù) 115
7.3  SwitchTransition動畫 116
7.4  TransitionGroup動畫 118
7.5  在React中如何引入CSS 120
7.5.1  內(nèi)聯(lián)式CSS 120
7.5.2  CSS文件引入 122
7.5.3  CSS Module 123
7.5.4  CSS in JS 124
7.5.5  styled-components的數(shù)據(jù)傳遞和動態(tài)樣式設(shè)置 126
7.5.6  添加class屬性 127
第8章  Redux 130
8.1  Redux簡介 130
8.2  Redux訂閱與取消訂閱 132
8.3  調(diào)用函數(shù)生成action對象 133
8.4  react-redux庫的應(yīng)用 135
8.5  Redux異步請求數(shù)據(jù) 138
8.6  reduce-thunk中間件的應(yīng)用 141
8.7  Redux模塊拆分 145
8.8  Redux Toolkit的應(yīng)用 146
第9章  React-Router 150
9.1  路由的基本應(yīng)用 150
9.2  NavLink的應(yīng)用 152
9.3  Navigate重定向?qū)Ш浇M件 154
9.4  配置Not Found頁面 156
9.5  嵌套路由 157
9.6  鏈?zhǔn)铰酚商D(zhuǎn) 159
9.7  高階組件實現(xiàn)在class組件中使用useNavigate() 161
9.8  動態(tài)路由參數(shù)傳遞 163
9.9  路由查詢參數(shù)傳遞 165
9.10  抽離路由匹配規(guī)則模塊 167
9.11  懶加載與路由分包 169
第10章  React Hooks 171
10.1  體驗Hooks 171
10.2  useState詳解 174
10.3  Redux Hook 175
10.4  shallowEqual性能優(yōu)化 177
10.5  useEffect Hook 179
10.6  useContext Hook 181
10.7  useRef Hook 183
10.8  useMemo和useCallback Hook 184
10.9  自定義Hook 187
10.10  使用第三方Hook 191
第11章  項目實戰(zhàn) 193
11.1  項目概述 193
11.2  創(chuàng)建React項目 195
11.3  配置路徑別名及l(fā)ess樣式 197
11.4  CSS樣式重置 199
11.5  配置Router 200
11.6  封裝Axios網(wǎng)絡(luò)請求 203
11.7  Header區(qū)域樣式開發(fā) 205
11.8  實現(xiàn)首頁Banner區(qū)域和廣告區(qū)域樣式布局 208
11.9  實現(xiàn)首頁商家推薦區(qū)域和產(chǎn)品中心區(qū)域樣式布局 211
11.10  Footer區(qū)域樣式開發(fā) 215
11.11  發(fā)送網(wǎng)絡(luò)請求獲取首頁數(shù)據(jù) 217
11.12  父組件向子組件傳值（一） 220
11.13  父組件向子組件傳值（二） 222
11.14  產(chǎn)品列表頁面布局 224
11.15  渲染產(chǎn)品列表數(shù)據(jù) 227
11.16  產(chǎn)品詳情頁面業(yè)務(wù)邏輯 231
11.17  使用Ant Design實現(xiàn)輪播圖模塊 234
第12章  React組件庫Ant Design 237
12.1  Ant Design簡介及安裝 237
12.2  Ant Design按鈕和圖標(biāo) 238
12.3  Ant Design表單和輸入框 243
12.4  Ant Design導(dǎo)航菜單和布局 246
12.5  Ant Design數(shù)據(jù)展示和表格 248
12.6  Ant Design彈窗和通知 251
12.7  Ant Design圖表和地圖 253
12.8  Ant Design自定義主題和樣式定制 256