React 全站：Redux + Flux + webpack + Babel 整合開發

內容描述

<內容簡介>
本書從現代前端開發的標準、趨勢和常用工具入手，由此引出了優秀的構建工具webpack 和JavaScript庫React，之後用一系列的實例來闡述兩者的特色、概念和基本使用方法。隨著應用複雜度的增加，進而介紹了Flux 和Redux 兩種架構思想，並且使用Redux 對現有程序進行改造，最後介紹了在開發過程中出現的反模式和性能優化方法。

第1 章 現代前端開發 .................................................................. 1
1.1 ES6——新一代的JavaScript 標準 ........................................................ 1
1.1.1 語言特性 .................................................................................................. 2
1.1.2 使用Babel .............................................................................................. 10
1.1.3 小結 ........................................................................................................ 13
1.2 前端組件化方案 ................................................................................. 13
1.2.1 JavaScript 模塊化方案 ............................................................................ 14
1.2.2 前端的模塊化和組件化 .......................................................................... 16
1.2.3 小結 ........................................................................................................ 18
1.3 輔助工具 ............................................................................................ 19
1.3.1 包管理器（Package Manager） .............................................................. 19
1.3.2 任務流工具（Task Runner） .................................................................. 23
1.3.3 模塊打包工具（Bundler）...................................................................... 26
第2 章 webpack ........................................................................28
2.1 webpack 的特點與優勢 ....................................................................... 28
2.1.1 webpack 與RequireJS、browserify ......................................................... 29
2.1.2 模塊規範 ................................................................................................ 30
2.1.3 非javascript 模塊支持 ............................................................................ 31
2.1.4 構建產物 ................................................................................................ 32
2.1.5 使用 ........................................................................................................ 33
2.1.6 webpack 的特色 ...................................................................................... 35
2.1.7 小結 ........................................................................................................ 38
2.2 基於webpack 進行開發 ...................................................................... 38
2.2.1 安裝 ........................................................................................................ 38
2.2.2 Hello world ............................................................................................. 39
2.2.3 使用loader .............................................................................................. 43
2.2.4 配置文件 ................................................................................................ 46
2.2.5 使用plugin ............................................................................................. 48
2.2.6 實時構建 ................................................................................................ 50
第3 章 初識React .....................................................................52
3.1 使用React 與傳統前端開發的比較 .................................................... 54
3.1.1 傳統做法 ................................................................................................ 54
3.1.2 全量更新 ................................................................................................ 56
3.1.3 使用React .............................................................................................. 57
3.1.4 小結 ........................................................................................................ 59
3.2 JSX ..................................................................................................... 59
3.2.1 來歷 ........................................................................................................ 59
3.2.2 語法 ........................................................................................................ 60
3.2.3 編譯JSX ................................................................................................. 63
3.2.4 小結 ........................................................................................................ 64
3.3 React+webpack 開發環境 ................................................................... 64
3.3.1 安裝配置Babel ....................................................................................... 64
3.3.2 安裝配置ESLint ..................................................................................... 65
3.3.3 配置webpack .......................................................................................... 66
3.3.4 添加測試頁面 ......................................................................................... 68
3.3.5 添加組件熱加載（HMR）功能 .............................................................. 70
3.3.6 小結 ........................................................................................................ 71
3.4 組件 .................................................................................................... 72
3.4.1 props 屬性 ............................................................................................... 73
3.4.2 state 狀態 ................................................................................................ 76
3.4.3 組件生命周期 ......................................................................................... 78
3.4.4 組合組件 ................................................................................................ 80
3.4.5 無狀態函數式組件 .................................................................................. 82
3.4.6 state 設計原則 ......................................................................................... 82
3.4.7 DOM 操作 .............................................................................................. 83
3.5 Virtual DOM ....................................................................................... 85
3.5.1 DOM ....................................................................................................... 85
3.5.2 虛擬元素 ................................................................................................ 86
3.5.3 比較差異 ................................................................................................ 88
第4 章 實踐React .....................................................................91
4.1 開發項目 ............................................................................................ 91
4.1.1 將原型圖分割成不同組件 ...................................................................... 92
4.1.2 創造每個靜態組件 .................................................................................. 93
4.1.3 組合靜態組件 ......................................................................................... 96
4.1.4 添加state 的結構 .................................................................................... 99
4.1.5 組件交互設計 ........................................................................................ 100
4.1.6 組合成為最終版本 ................................................................................. 102
4.1.7 小結 ....................................................................................................... 105
4.2 測試 .................................................................................................. 106
4.2.1 通用測試工具簡介 ................................................................................. 106
4.2.2 React 測試工具及方法 ........................................................................... 108
4.2.3 配置測試環境 ........................................................................................ 109
4.2.4 Shallow Render ...................................................................................... 110
4.2.5 DOM Rendering ..................................................................................... 114
4.2.6 小結 ....................................................................................................... 116
第5 章 Flux 架構及其實現 ........................................................ 117
5.1 Flux ................................................................................................... 117
5.1.1 單向數據流 ............................................................................................ 118
5.1.2 項目結構 ............................................................................................... 119
5.1.3 Dispatcher 和action ............................................................................... 119
5.1.4 store 和Dispatcher ................................................................................. 122
5.1.5 store 和view .......................................................................................... 124
5.1.6 Flux 的優缺點 ........................................................................................ 126
5.1.7 Flux 的實現 ........................................................................................... 126
5.2 Redux ................................................................................................ 126
5.2.1 動機 ....................................................................................................... 127
5.2.2 三大定律 ............................................................................................... 127
5.2.3 組成 ....................................................................................................... 129
5.2.4 數據流 ................................................................................................... 136
5.2.5 使用middleware .................................................................................... 137
第6 章 使用Redux .................................................................. 142
6.1 在React 項目中使用Redux .............................................................. 142
6.1.1 如何在React 項目中使用Redux ............................................................ 142
6.1.2 react-redux ............................................................................................. 147
6.1.3 組件組織 ............................................................................................... 152
6.1.4 開發工具 ............................................................................................... 155
6.2 使用Redux 重構Deskmark .............................................................. 157
6.2.1 概要 ....................................................................................................... 157
6.2.2 創建與觸發action .................................................................................. 158
6.2.3 使用middleware .................................................................................... 159
6.2.4 實現reducer ........................................................................................... 163
6.2.5 創建與連接store ................................................................................... 165
第7 章 React＋Redux 進階 ...................................................... 168
7.1 常見誤解 .......................................................................................... 168
7.1.1 React 的角色 .......................................................................................... 169
7.1.2 JSX 的角色 ............................................................................................ 169
7.1.3 React 的性能 .......................................................................................... 170
7.1.4 “短路”式性能優化 ............................................................................... 171
7.1.5 無狀態函數式組件的性能 ..................................................................... 172
7.2 反模式 .............................................................................................. 173
7.2.1 基於props 得到初始state ...................................................................... 173
7.2.2 使用refs 獲取子組件 ............................................................................. 176
7.2.3 冗餘事實 ............................................................................................... 178
7.2.4 組件的隱式數據源 ................................................................................. 180
7.2.5 不被預期的副作用 ................................................................................. 182
7.3 性能優化 .......................................................................................... 183
7.3.1 優化原則 ............................................................................................... 183
7.3.2 性能分析 ............................................................................................... 184
7.3.3 生產環境版本 ........................................................................................ 187
7.3.4 避免不必要的render ............................................................................. 188
7.3.5 合理拆分組件 ........................................................................................ 199
7.3.6 合理使用組件內部state ......................................................................... 200
7.3.7 小結 ....................................................................................................... 203
7.4 社區產物 .......................................................................................... 203
7.4.1 Flux 及其實現 ........................................................................................ 203
7.4.2 Flux Standard Action .............................................................................. 204
7.4.3 Ducks ..................................................................................................... 206
7.4.4 GraphQL/Relay 與Falcor ....................................................................... 207
7.4.5 副作用的處理 ........................................................................................ 209