《深入淺出React和Redux》,本書作者是資深開發人員,有過多年的開發經驗,總結了自己使用React和Redux的實戰經驗,系統分析React和Redux結合的優勢,與開發技巧,為開發大型系統提供參考。主要內容包括:React的基礎知識、如何設計易於維護的React組件、如何使用Redux控制數據流、React和Redux的相結合的方式、同構的React和Redux架構、React和Redux的性能最佳化、組件的測試等。
基本介紹
- 書名:深入淺出React和Redux
- 作者:程墨
- ISBN:9787111565635
- 頁數:268
- 定價:69
- 出版社:機械工業出版社出版
- 出版時間:2017-4-28
- 裝幀:平裝
內容簡介,作者簡介,目錄,
內容簡介
本書作者是資深開發人員,有過多年的開發經驗,總結了自己使用React和Redux的實戰經驗,系統分析React和Redux結合的優勢,與開發技巧,為開發大型系統提供參考。主要內容包括:React的基礎知識、如何設計易於維護的React組件、如何使用Redux控制數據流、React和Redux的相結合的方式、同構的React和Redux架構、React和Redux的性能最佳化、組件的測試等。
作者簡介
程墨,資深架構師,曾任職於摩托羅拉、雅虎和微軟,雲鳥配送平台聯合創始人,目前服務於美國視頻服務公司Hulu
目錄
前言
第1章 React新的前端思維方式1
1.1 初始化一個React項目1
1.2 增加一個新的React組件3
1.2.1 JSX6
1.2.2 JSX是進步還是倒退7
1.3 分解React套用8
1.4 React的工作方式10
1.4.1 jQuery如何工作10
1.4.2 React的理念11
1.4.3 Virtual DOM12
1.4.4 React工作方式的優點13
1.5 本章小結14
第2章 設計高質量的React組件16
2.1 易於維護組件的設計要素16
2.2 React組件的數據17
2.2.1 React的prop18
2.2.2 React的state22
2.2.3 prop和state的對比24
2.3 組件的生命周期25
2.3.1 裝載過程25
2.3.2 更新過程30
2.3.3 卸載過程34
2.4 組件向外傳遞數據34
2.5 React組件state和prop的局限37
2.6 本章小結39
第3章 從Flux到Redux40
3.1 Flux40
3.1.1 MVC框架的缺陷41
3.1.2 Flux套用43
3.1.3 Flux的優勢53
3.1.4 Flux的不足54
3.2 Redux56
3.2.1 Redux的基本原則56
3.2.2 Redux實例59
3.2.3 容器組件和傻瓜組件64
3.2.4 組件Context67
3.2.5 React-Redux71
3.3 本章小結73
第4章 模組化React和Redux套用75
4.1 模組化套用要點75
4.2 代碼檔案的組織方式76
4.2.1 按角色組織76
4.2.2 按功能組織78
4.3 模組接口79
4.4 狀態樹的設計81
4.4.1 一個狀態節點只屬於一個模組82
4.4.2 避免冗餘數據82
4.4.3 樹形結構扁平83
4.5 Todo套用實例83
4.5.1 Todo狀態設計84
4.5.2 action構造函式86
4.5.3 組合reducer87
4.5.4 Todo視圖90
4.5.5 樣式 98
4.5.6 不使用ref99
4.6 開發輔助工具100
4.6.1 Chrome擴展包100
4.6.2 redux-immutable-state-invariant輔助包101
4.6.3 工具套用101
4.7 本章小結103
第5章 React組件的性能最佳化105
5.1 單個React組件的性能最佳化105
5.1.1 發現浪費的渲染時間106
5.1.2 性能最佳化的時機107
5.1.3 React-Redux的should-ComponentUpdate實現108
5.2 多個React組件的性能最佳化115
5.2.1 React的調和(Reconciliation)過程116
5.2.2 Key的用法120
5.3 用reselect提高數據獲取性能122
5.3.1 兩階段選擇過程123
5.3.2 範式化狀態樹125
5.4 本章小結127
第6章 React高級組件129
6.1 高階組件129
6.1.1 代理方式的高階組件132
6.1.2 繼承方式的高階組件136
6.1.3 高階組件的顯示名139
6.1.4 曾經的React Mixin139
6.2 以函式為子組件140
6.2.1 實例CountDown142
6.2.2 性能最佳化問題145
6.3 本章小結146
第7章 Redux和伺服器通信147
7.1 React組件訪問伺服器147
7.1.1 代理功能訪問API148
7.1.2 React組件訪問伺服器的生命周期150
7.1.3 React組件訪問伺服器的優缺點153
7.2 Redux訪問伺服器154
7.2.1 redux-thunk中間件154
7.2.2 異步action對象 156
7.2.3 異步操作的模式157
7.2.4 異步操作的中止 163
7.3 Redux異步操作的其他方法165
7.3.1 如何挑選異步操作方式165
7.3.2 利用Promise實現異步操作167
7.4 本章小結 167
第8章 單元測試168
8.1 單元測試的原則168
8.2 單元測試環境搭建170
8.2.1 單元測試框架170
8.2.2 單元測試代碼組織172
8.2.3 輔助工具173
8.3 單元測試實例175
8.3.1 action構造函式測試175
8.3.2 異步action構造函式測試176
8.3.3 reducer測試178
8.3.4 無狀態React組件測試178
8.3.5 被連線的React組件測試179
8.4 本章小結180
第9章 擴展Redux182
9.2 中間件182
9.1.1 中間件接口183
9.1.2 使用中間件186
9.1.3 Promise中間件187
9.1.4 中間件開發原則190
9.2 Store Enhancer 191
9.2.1 增強器接口191
9.2.2 增強器實例reset192
9.3 本章小結194
第10章 動畫195
10.1 動畫的實現方式195
10.1.1 CSS3方式195
10.1.2 腳本方式197
10.2 ReactCSSTransitionGroup199
10.2.1 Todo套用動畫200
10.2.2 ReactCSSTransitionGroup規則202
10.3 React-Motion動畫庫205
10.3.1 React-Motion的設計原則205
10.3.2 Todo套用動畫206
10.4 本章小結210
第11章 多頁面套用211
11.1 單頁套用211
11.2 React-Router213
11.2.1 路由213
11.2.2 路由連結和嵌套216
11.2.3 默認連結218
11.2.4 集成Redux219
11.3 代碼分片221
11.3.1 彈射和配置webpack224
11.3.2 動態載入分片225
11.3.3 動態更新Store的reducer和狀態228
11.4 本章小結234
第12章 同構235
12.1 伺服器端渲染vs瀏覽器端渲染235
12.2 構建渲染動態內容伺服器239
12.2.1 設定Node.js和Express240
12.2.2 熱載入242
12.3 React同構246
12.3.1 React伺服器端渲染HTML247
12.3.2 脫水和注水248
12.3.3 伺服器端Redux Store249
12.3.4 支持伺服器和瀏覽器獲取共同數據源250
12.3.5 伺服器端路由251
12.4 同構實例252
12.5 本章小結257
結語258
第1章 React新的前端思維方式1
1.1 初始化一個React項目1
1.2 增加一個新的React組件3
1.2.1 JSX6
1.2.2 JSX是進步還是倒退7
1.3 分解React套用8
1.4 React的工作方式10
1.4.1 jQuery如何工作10
1.4.2 React的理念11
1.4.3 Virtual DOM12
1.4.4 React工作方式的優點13
1.5 本章小結14
第2章 設計高質量的React組件16
2.1 易於維護組件的設計要素16
2.2 React組件的數據17
2.2.1 React的prop18
2.2.2 React的state22
2.2.3 prop和state的對比24
2.3 組件的生命周期25
2.3.1 裝載過程25
2.3.2 更新過程30
2.3.3 卸載過程34
2.4 組件向外傳遞數據34
2.5 React組件state和prop的局限37
2.6 本章小結39
第3章 從Flux到Redux40
3.1 Flux40
3.1.1 MVC框架的缺陷41
3.1.2 Flux套用43
3.1.3 Flux的優勢53
3.1.4 Flux的不足54
3.2 Redux56
3.2.1 Redux的基本原則56
3.2.2 Redux實例59
3.2.3 容器組件和傻瓜組件64
3.2.4 組件Context67
3.2.5 React-Redux71
3.3 本章小結73
第4章 模組化React和Redux套用75
4.1 模組化套用要點75
4.2 代碼檔案的組織方式76
4.2.1 按角色組織76
4.2.2 按功能組織78
4.3 模組接口79
4.4 狀態樹的設計81
4.4.1 一個狀態節點只屬於一個模組82
4.4.2 避免冗餘數據82
4.4.3 樹形結構扁平83
4.5 Todo套用實例83
4.5.1 Todo狀態設計84
4.5.2 action構造函式86
4.5.3 組合reducer87
4.5.4 Todo視圖90
4.5.5 樣式 98
4.5.6 不使用ref99
4.6 開發輔助工具100
4.6.1 Chrome擴展包100
4.6.2 redux-immutable-state-invariant輔助包101
4.6.3 工具套用101
4.7 本章小結103
第5章 React組件的性能最佳化105
5.1 單個React組件的性能最佳化105
5.1.1 發現浪費的渲染時間106
5.1.2 性能最佳化的時機107
5.1.3 React-Redux的should-ComponentUpdate實現108
5.2 多個React組件的性能最佳化115
5.2.1 React的調和(Reconciliation)過程116
5.2.2 Key的用法120
5.3 用reselect提高數據獲取性能122
5.3.1 兩階段選擇過程123
5.3.2 範式化狀態樹125
5.4 本章小結127
第6章 React高級組件129
6.1 高階組件129
6.1.1 代理方式的高階組件132
6.1.2 繼承方式的高階組件136
6.1.3 高階組件的顯示名139
6.1.4 曾經的React Mixin139
6.2 以函式為子組件140
6.2.1 實例CountDown142
6.2.2 性能最佳化問題145
6.3 本章小結146
第7章 Redux和伺服器通信147
7.1 React組件訪問伺服器147
7.1.1 代理功能訪問API148
7.1.2 React組件訪問伺服器的生命周期150
7.1.3 React組件訪問伺服器的優缺點153
7.2 Redux訪問伺服器154
7.2.1 redux-thunk中間件154
7.2.2 異步action對象 156
7.2.3 異步操作的模式157
7.2.4 異步操作的中止 163
7.3 Redux異步操作的其他方法165
7.3.1 如何挑選異步操作方式165
7.3.2 利用Promise實現異步操作167
7.4 本章小結 167
第8章 單元測試168
8.1 單元測試的原則168
8.2 單元測試環境搭建170
8.2.1 單元測試框架170
8.2.2 單元測試代碼組織172
8.2.3 輔助工具173
8.3 單元測試實例175
8.3.1 action構造函式測試175
8.3.2 異步action構造函式測試176
8.3.3 reducer測試178
8.3.4 無狀態React組件測試178
8.3.5 被連線的React組件測試179
8.4 本章小結180
第9章 擴展Redux182
9.2 中間件182
9.1.1 中間件接口183
9.1.2 使用中間件186
9.1.3 Promise中間件187
9.1.4 中間件開發原則190
9.2 Store Enhancer 191
9.2.1 增強器接口191
9.2.2 增強器實例reset192
9.3 本章小結194
第10章 動畫195
10.1 動畫的實現方式195
10.1.1 CSS3方式195
10.1.2 腳本方式197
10.2 ReactCSSTransitionGroup199
10.2.1 Todo套用動畫200
10.2.2 ReactCSSTransitionGroup規則202
10.3 React-Motion動畫庫205
10.3.1 React-Motion的設計原則205
10.3.2 Todo套用動畫206
10.4 本章小結210
第11章 多頁面套用211
11.1 單頁套用211
11.2 React-Router213
11.2.1 路由213
11.2.2 路由連結和嵌套216
11.2.3 默認連結218
11.2.4 集成Redux219
11.3 代碼分片221
11.3.1 彈射和配置webpack224
11.3.2 動態載入分片225
11.3.3 動態更新Store的reducer和狀態228
11.4 本章小結234
第12章 同構235
12.1 伺服器端渲染vs瀏覽器端渲染235
12.2 構建渲染動態內容伺服器239
12.2.1 設定Node.js和Express240
12.2.2 熱載入242
12.3 React同構246
12.3.1 React伺服器端渲染HTML247
12.3.2 脫水和注水248
12.3.3 伺服器端Redux Store249
12.3.4 支持伺服器和瀏覽器獲取共同數據源250
12.3.5 伺服器端路由251
12.4 同構實例252
12.5 本章小結257
結語258