《React進階之路》詳細介紹了React技術(shù)棧涉及的主要技術(shù)。本書分為基礎(chǔ)篇、進階篇和實戰(zhàn)篇三部分;A(chǔ)篇主要介紹React的基本用法,包括React 16的新特性;進階篇深入講解組件state、虛擬DOM、高階組件等React中的重要概念,同時對初學者容易困惑的知識點做了介紹;實戰(zhàn)篇介紹React Router、Redux和MobX 3個React技術(shù)棧的重要成員,并通過實戰(zhàn)項目講解這些技術(shù)如何和React結(jié)合使用。
《React進階之路》示例豐富、注重實戰(zhàn),適用于從零開始學習React的初學者,或者已經(jīng)有一些React使用經(jīng)驗,但希望更加全面、深入理解React技術(shù)棧的開發(fā)人員。閱讀本書,需要先掌握基礎(chǔ)的前端開發(fā)知識。
目 錄
第1篇 基礎(chǔ)篇——React,一種革命性的UI開發(fā)理念
第1章 初識React 3
1.1 React簡介 3
1.2 ES 6語法簡介 4
1.3 開發(fā)環(huán)境及工具介紹 9
1.3.1 基礎(chǔ)環(huán)境 9
1.3.2 輔助工具 9
1.3.3 Create React App 10
1.4 本章小結(jié) 12
第2章 React基礎(chǔ) 13
2.1 JSX 13
2.1.1 JSX簡介 13
2.1.2 JSX語法 14
2.1.3 JSX不是必需的 16
2.2 組件 17
2.2.1 組件定義 17
2.2.2 組件的props 18
2.2.3 組件的state 21
2.2.4 有狀態(tài)組件和無狀態(tài)組件 23
2.2.5 屬性校驗和默認屬性 26
2.2.6 組件樣式 28
2.2.7 組件和元素 32
2.3 組件的生命周期 34
2.3.1 掛載階段 34
2.3.2 更新階段 35
2.3.3 卸載階段 36
2.4 列表和Keys 36
2.5 事件處理 39
2.6 表單 43
2.6.1 受控組件 44
2.6.2 非受控組件 51
2.7 本章小結(jié) 52
第3章 React 16新特性 53
3.1 render新的返回類型 53
3.2 錯誤處理 54
3.3 Portals 56
3.4 自定義DOM屬性 57
3.5 本章小結(jié) 58
第2篇 進階篇——用好React,你必須要知道的那些事
第4章 深入理解組件 60
4.1 組件state 60
4.1.1 設(shè)計合適的state 60
4.1.2 正確修改state 63
4.1.3 state與不可變對象 64
4.2 組件與服務(wù)器通信 66
4.2.1 組件掛載階段通信 66
4.2.2 組件更新階段通信 67
4.3 組件通信 68
4.3.1 父子組件通信 68
4.3.2 兄弟組件通信 71
4.3.3 Context 75
4.3.4 延伸 78
4.4 特殊的ref 79
4.4.1 在DOM元素上使用ref 79
4.4.2 在組件上使用ref 79
4.4.3 父組件訪問子組件的DOM節(jié)點 81
4.5 本章小結(jié) 82
第5章 虛擬DOM和性能優(yōu)化 83
5.1 虛擬DOM 83
5.2 Diff算法 84
5.3 性能優(yōu)化 87
5.4 性能檢測工具 90
5.5 本章小結(jié) 91
第6章 高階組件 92
6.1 基本概念 92
6.2 使用場景 93
6.3 參數(shù)傳遞 96
6.4 繼承方式實現(xiàn)高階組件 99
6.5 注意事項 99
6.6 本章小結(jié) 101
第3篇 實戰(zhàn)篇——在大型Web應(yīng)用中使用React
第7章 路由:用ReactRouter開發(fā)單頁面應(yīng)用 103
7.1 基本用法 103
7.1.1 單頁面應(yīng)用和前端路由 103
7.1.2 React Router 的安裝 104
7.1.3 路由器 104
7.1.4 路由配置 105
7.1.5 鏈接 107
7.2 項目實戰(zhàn) 108
7.2.1 后臺服務(wù)API介紹 108
7.2.2 路由設(shè)計 111
7.2.3 登錄頁 113
7.2.4 帖子列表頁 117
7.2.5 帖子詳情頁 125
7.3 代碼分片 133
7.4 本章小結(jié) 138
第8章 Redux:可預(yù)測的狀態(tài)管理機 139
8.1 簡介 139
8.1.1 基本概念 139
8.1.2 三大原則 141
8.2 主要組成 141
8.2.1 action 141
8.2.2 reducer 142
8.2.3 store 146
8.3 在React中使用Redux 148
8.3.1 安裝react-redux 148
8.3.2 展示組件和容器組件 148
8.3.3 connect 149
8.3.4 mapStateToProps 150
8.3.5 mapDispatchToProps 150
8.3.6 Provider 組件 151
8.4 中間件與異步操作 152
8.4.1 中間件 152
8.4.2 異步操作 154
8.5 本章小結(jié) 155
第9章 Redux項目實戰(zhàn) 156
9.1 組織項目結(jié)構(gòu) 156
9.2 設(shè)計state 161
9.2.1 錯誤1:以API作為設(shè)計state的依據(jù) 161
9.2.2 錯誤2:以頁面UI為設(shè)計state的依據(jù) 164
9.2.3 合理設(shè)計state 165
9.3 設(shè)計模塊 170
9.3.1 app模塊 170
9.3.2 auth模塊 171
9.3.3 posts模塊 173
9.3.4 comments模塊 177
9.3.5 users模塊 179
9.3.6 ui模塊 180
9.6.7 index模塊 181
9.4 連接Redux 182
9.4.1 注入state 182
9.4.2 注入action creators 184
9.4.3 connect連接PostList和Redux 185
9.5 Redux調(diào)試工具 187
9.6 性能優(yōu)化 188
9.6.1 React Router引起的組件重復渲染問題 188
9.6.2 Immutable.JS 193
9.6.3 Reselect 198
9.7 本章小結(jié) 199
第10章 MobX:簡單可擴展的狀態(tài)管理解決方案 200
10.1 簡介 200
10.2 主要組成 204
10.2.1 state 204
10.2.2 computed value 211
10.2.3 reaction 212
10.2.4 action 215
10.3 MobX響應(yīng)的常見誤區(qū) 216
10.4 在React中使用MobX 220
10.5 本章小結(jié) 221
第11章 MobX項目實戰(zhàn) 222
11.1 組織項目結(jié)構(gòu) 222
11.2 設(shè)計store 223
11.3 視圖層重構(gòu) 234
11.4 MobX調(diào)試工具 236
11.5 優(yōu)化建議 238
11.6 Redux與MobX比較 241
11.7 本章小結(jié) 242