全面深入講述React技術棧的第 1 本原創圖書，Strikingly聯合創始人及CTO郭達峰作序推薦，pure render專欄主創傾力打造

覆蓋React、Flux、Redux及可視化，幫助開發者在實踐中深入理解技術和源碼

前端組件化主流解決方案，一本書玩轉React“全家桶”

本書從幾個維度去介紹 React。一是作為 View 庫，它怎麼實現組件化，以及它背後的實現原理。二是擴展到 Flux 應用架構及重要的衍生品 Redux，它們怎麼與 React 結合做應用開發。三是對 React 與 server 的踫撞產生的一些思考。四是講述它在可視化方面的優勢與劣勢。

本書適合有一定經驗的前端開發人員閱讀。

陳屹，前端架構師，就職於阿裡巴巴。熱衷開源事業，長年專注於前端架構、數據可視化、Node.js等領域，知乎專欄pure render的創辦人。

第1章初入 React 世界 1
1．1React 簡介 1
1．1．1專注視圖層 1
1．1．2Virtual DOM 1
1．1．3函數式編程 2
1．2JSX 語法 3
1．2．1JSX 的由來 3
1．2．2JSX 基本語法 7
1．3React 組件 11
1．3．1組件的演變 11
1．3．2React 組件的構建 18
1．4React 數據流 21
1．4．1state 21
1．4．2props 23
1．5React 生命周期 29
1．5．1掛載或卸載過程 29
1．5．2數據更新過程 30
1．5．3整體流程 33
1．6React 與 DOM 34
1．6．1ReactDOM 35
1．6．2ReactDOM 的不穩定方法 36
1．6．3refs 38
1．6．4React 之外的 DOM 操作 40
1．7組件化實例：Tabs 組件 41
1．8小結 47
第2章漫淡 React 48
2．1事件繫統 48
2．1．1合成事件的綁定方式 48
2．1．2合成事件的實現機制 49
2．1．3在React中使用原生事件 51
2．1．4合成事件與原生事件混用 51
2．1．5對比React合成事件與JavaScript原生事件 54
2．2表單 55
2．2．1應用表單組件 55
2．2．2受控組件 60
2．2．3非受控組件 61
2．2．4對比受控組件和非受控組件 62
2．2．5表單組件的幾個重要屬性 63
2．3樣式處理 64
2．3．1基本樣式設置 64
2．3．2CSS Modules 66
2．4組件間通信 74
2．4．1父組件向子組件通信 74
2．4．2子組件向父組件通信 75
2．4．3跨級組件通信 77
2．4．4沒有嵌套關繫的組件通信 79
2．5組件間抽像 81
2．5．1mixin 81
2．5．2高階組件 86
2．5．3組合式組件開發實踐 93
2．6組件性能優化 97
2．6．1純函數 97
2．6．2PureRender 100
2．6．3Immutable 103
2．6．4key 109
2．6．5react-addons-perf 110
2．7動畫 111
2．7．1CSS 動畫與 JavaScript 動畫 111
2．7．2玩轉 React Transition 113
2．7．3緩動函數 116
2．8自動化測試 121
2．8．1Jest 121
2．8．2Enzyme 124
2．8．3自動化測試 125
2．9組件化實例：優化 Tabs 組件 125
2．10小結 133
第3章解讀 React 源碼 134
3．1初探 React 源碼 134
3．2Virtual DOM 模型 137
3．2．1創建 Rea素 138
3．2．2初始化組件入口 140
3．2．3文本組件 141
3．2．4DOM 標簽組件 144
3．2．5自定義組件 150
3．3生命周期的管理藝術 151
3．3．1初探 React 生命周期 152
3．3．2詳解 React 生命周期 152
3．3．3無狀態組件 163
3．4解密setState機制 164
3．4．1setState異步更新 164
3．4．2setState 循環調用風險 165
3．4．3setState調用棧 166
3．4．4初識事務 168
3．4．5解密setState 170
3．5diff 算法 172
3．5．1傳統 diff 算法 172
3．5．2詳解 diff 172
3．6React Patch 方法 181
3．7小結 183
第4章認識 Flux 架構模式 184
4．1React 獨立架構 184
4．2MV* 與 Flux 190
4．2．1MVC/MVVM 190
4．2．2Flux 的解決方案 193
4．3Flux 基本概念 194
4．4Flux 應用實例 198
4．4．1初始化目錄結構 198
4．4．2設計 store 198
4．4．3設計 actionCreator 200
4．4．4構建 controller-view 202
4．4．5重構 view 203
4．4．6測試 205
4．5解讀 Flux 206
4．5．1Flux 核心思想 206
4．5．2Flux 的不足 207
4．6小結 207
第5章深入 Redux 應用架構 208
5．1Redux 簡介 208
5．1．1Redux 是什麼 208
5．1．2Redux 三大原則 209
5．1．3Redux 核心 API 210
5．1．4與 React 綁定 211
5．1．5增強 Flux 的功能 212
5．2Redux middleware 212
5．2．1middleware 的由來 212
5．2．2理解 middleware 機制 213
5．3Redux 異步流 217
5．3．1使用 middleware 簡化異步
請求 217
5．3．2使用 middleware 處理復雜
異步流 221
5．4Redux 與路由 224
5．4．1React Router 225
5．4．2React Router Redux 227
5．5Redux 與組件 229
5．5．1容器型組件 229
5．5．2展示型組件 229
5．5．3Redux 中的組件 230
5．6Redux 應用實例 231
5．6．1初始化 Redux 項目 231
5．6．2劃分目錄結構 232
5．6．3設計路由 234
5．6．4讓應用跑起來 235
5．6．5優化構建腳本 239
5．6．6添加布局文件 239
5．6．7準備首頁的數據 242
5．6．8連接 Redux 245
5．6．9引入 Redux Devtools 250
5．6．10利用 middleware 實現 Ajax
請求發送 251
5．6．11請求本地的數據 252
5．6．12頁面之間的跳轉 253
5．6．13優化與改進 256
5．6．14測試 257
5．7小結 258
第6章Redux 高階運用 259
6．1高階 reducer 259
6．1．1reducer 的復用 259
6．1．2reducer 的增強 261
6．2Redux 與表單 262
6．2．1使用 redux-form-utils 減少
創建表單的冗餘代碼 263
6．2．2使用 redux-form 完成表單的
異步驗證 265
6．2．3使用高階 reducer 為現有模塊
引入表單功能 267
6．3Redux CRUD 實戰 268
6．3．1準備工作 268
6．3．2使用 Table 組件完成“查”
功能 269
6．3．3使用 Modal 組件完成“增”
與“改” 274
6．3．4巧用 Modal 實現數據的刪除
確認 277
6．3．5善用 promise 玩轉 Redux 異步事件流 278
6．4Redux 性能優化 279
6．4．1Reselect 280
6．4．2Immutable Redux 282
6．4．3Reducer 性能優化 282
6．5解讀 Redux 284
6．5．1參數歸一化 285
6．5．2初始狀態及 getState 286
6．5．3subscribe 286
6．5．4dispatch 287

6．5．5replaceReducer 288
6．6解讀 react-redux 288
6．6．1Provider 288
6．6．2 connect 290
6．6．3代碼熱替換 293
6．7小結 294
第7章React 服務端渲染 295
7．1React 與服務端模板 295
7．1．1什麼是服務端渲染 295
7．1．2react-view 296
7．1．3react-view 源碼解讀 296
7．2React 服務端渲染 299
7．2．1玩轉 Node．js 300
7．2．2React-Router 和 Koa-Router
統一 303
7．2．3同構數據處理的探討 306
7．3小結 307
第8章玩轉 React 可視化 308
8．1React 結合 Canvas 和 SVG 308
8．1．1Canvas 與 SVG 308
8．1．2在 React 中的 Canvas 310
8．1．3React 中的 SVG 311
8．2React 與可視化組件 316
8．2．1包裝已有的可視化庫 316
8．2．2使用 D3 繪制 UI 部分 317
8．2．3使用 React 繪制 UI 部分 319
8．3Recharts 組件化的原理 322
8．3．1聲明式的標簽 323
8．3．2貼近原生的配置項 325
8．3．3接口式的 API 326
8．4小結 328
附錄A開發環境 329
附錄B編碼規範 345
附錄CKoa middleware 349