React全棧：Redux Flux webpack Babel整合開發

《React全棧：Redux Flux webpack Babel整合開發》一書作者張軒、楊寒星，由電子工業出版社2016年10月出版。

基本介紹

• 書名：React全棧：Redux+Flux+webpack+Babel整合開發
• 作者：張軒 楊寒星
• ISBN：978-7-121-29899-8
• 頁數：228
• 定價：69.00
• 出版社：電子工業出版社
• 出版時間：2016年10月
• 開本：16開

內容提要

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

《React全棧：Redux+Flux+webpack+Babel整合開發》適合有一定前端開發尤其是 JavaScript 基礎的讀者閱讀，如果您還沒有接觸過前端開發這個領域，請先閱讀前端開發的入門書籍。

目錄

第 1 章現代前端開發1

1.1ES6——新一代的 JavaScript 標準1

1.1.1語言特性2

1.1.2使用 Babel10

1.1.3小結13

1.2前端組件化方案13

1.2.1JavaScript 模組化方案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 章webpack28

2.1webpack 的特點與優勢28

2.1.1webpack 與 RequireJS、browserify29

2.1.2模組規範30

2.1.3非 javascript 模組支持31

2.1.4構建產物32

2.1.5使用33

2.1.6webpack 的特色35

2.1.7小結38

2.2基於 webpack 進行開發38

2.2.1安裝38

2.2.2Hello world39

2.2.3使用 loader43

2.2.4配置檔案46

2.2.5使用 plugin48

2.2.6實時構建50

第 3 章初識 React52

3.1使用 React 與傳統前端開發的比較54

3.1.1傳統做法54

3.1.2全量更新56

3.1.3使用 React57

3.1.4小結59

3.2JSX59

3.2.1來歷59

3.2.2語法60

3.2.3編譯 JSX63

3.2.4小結64

3.3React+webpack 開發環境64

3.3.1安裝配置 Babel64

3.3.2安裝配置 ESLint65

3.3.3配置 webpack66

3.3.4添加測試頁面68

3.3.5添加組件熱載入（HMR）功能70

3.3.6小結71

3.4組件72

3.4.1props 屬性73

3.4.2state 狀態76

3.4.3組件生命周期78

3.4.4組合組件80

3.4.5無狀態函式式組件82

3.4.6state 設計原則82

3.4.7DOM 操作83

3.5Virtual DOM85

3.5.1DOM85

3.5.2虛擬元素86

3.5.3比較差異88

第 4 章實踐 React91

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.2React 測試工具及方法108

4.2.3配置測試環境109

4.2.4Shallow Render110

4.2.5DOM Rendering114

4.2.6小結116

第 5 章Flux 架構及其實現117

5.1Flux117

5.1.1單向數據流118

5.1.2項目結構119

5.1.3Dispatcher 和 action119

5.1.4store 和 Dispatcher122

5.1.5store 和 view124

5.1.6Flux 的優缺點126

5.1.7Flux 的實現126

5.2Redux126

5.2.1動機127

5.2.2三大定律127

5.2.3組成129

5.2.4數據流136

5.2.5使用 middleware137

第 6 章使用 Redux142

6.1在 React 項目中使用 Redux142

6.1.1如何在 React 項目中使用 Redux142

6.1.2react-redux147

6.1.3組件組織152

6.1.4開發工具155

6.2使用 Redux 重構 Deskmark157

6.2.1概要157

6.2.2創建與觸發 action158

6.2.3使用 middleware159

6.2.4實現 reducer163

6.2.5創建與連線 store165

第 7 章React+Redux 進階168

7.1常見誤解168

7.1.1React 的角色169

7.1.2JSX 的角色169

7.1.3React 的性能170

7.1.4 “短路”式性能最佳化171

7.1.5無狀態函式式組件的性能172

7.2反模式173

7.2.1基於 props 得到初始 state173

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避免不必要的 render188

7.3.5合理拆分組件199

7.3.6合理使用組件內部 state200

7.3.7小結203

7.4社區產物203

7.4.1Flux 及其實現203

7.4.2Flux Standard Action204

7.4.3Ducks206

7.4.4GraphQL/Relay 與 Falcor207

7.4.5副作用的處理209