深入 React 技術棧
內容描述
<內容簡介>
本書從幾個維度去介紹React。一是作為View庫，它怎麼實現組件化，以及它背後的實現原理。二是擴展到Flux應用架構及重要的衍生品Redux，它們怎麼與React結合做應用開發。三是對React與server的碰撞產生的一些思考。四是講述它在可視化方面的優勢與劣勢。
本書適合有一定經驗的前端開發人員閱讀。
<章節目錄>
第1章初入React世界1
1.1 React簡介1
1.1.1專註視圖層1
1.1.2 Virtual DOM 1
1.1.3函數式編程2
1.2 JSX語法3
1.2.1 JSX的由來3
1.2.2 JSX基本語法7
1.3 React組件11
1.3.1組件的演變11
1.3.2 React組件的構建18
1.4 React數據流21
1.4.1 state 21
1.4.2 props 23
1.5 React生命週期29
1.5.1掛載或卸載過程29
1.5. 2數據更新過程30
1.5.3整體流程33
1.6 React與DOM 34
1.6.1 ReactDOM 35
1.6.2 ReactDOM的不穩定方法36
1.6.3 refs 38
1.6.4 React之外的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.2 CSS 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.1 mixin 81
2.5.2高階組件86
2.5.3組合式組件開發實踐93
2.6組件性能優化97
2.6.1純函數97
2.6.2 PureRender 100
2.6.3 Immutable 103
2.6.4 key 109
2.6.5 react-addons-perf 110
2.7動畫111
2.7.1 CSS動畫與JavaScript動畫111
2.7.2玩轉React Transition 113
2.7.3緩動函數116
2.8自動化測試121
2.8.1 Jest 121
2.8.2 Enzyme 124
2.8.3自動化測試125
2.9組件化實例：優化Tabs組件125
2.10小結133
第3章解讀React源碼134
3.1初探React源碼134
3.2 Virtual DOM模型137
3.2.1創建React元素138
3.2.2初始化組件入口140
3.2.3文本組件141
3.2.4 DOM標籤組件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.1 setState異步更新164
3.4.2 setState循環調用風險165
3.4 .3 setState調用棧166
3.4.4初識事務168
3.4.5解密setState 170
3.5 diff算法172
3.5.1傳統diff算法172
3.5.2詳解diff 172
3.6 React Patch方法181
3.7小結183
第4章認識Flux架構模式184
4.1 React獨立架構184
4.2 MV*與Flux 190
4.2.1 MVC/MVVM 190
4.2.2 Flux的解決方案193
4.3 Flux基本概念194
4.4 Flux應用實例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.1 Flux核心思想206
4.5.2 Flux的不足207
4.6小結207
第5章深入Redux應用架構208
5.1 Redux簡介208
5.1.1 Redux是什麼208
5.1.2 Redux三大原則209
5.1.3 Redux核心API 210
5.1.4與React綁定211
5.1.5增強Flux的功能212
5.2 Redux middleware 212
5.2.1 middleware的由來212
5.2.2理解middleware機制213
5.3 Redux異步流217
5.3.1使用middleware簡化異步
請求217
5.3.2使用middleware處理複雜
異步流221
5.4 Redux與路由224
5.4.1 React Router 225
5.4.2 React Router Redux 227
5.5 Redux與組件229
5.5.1容器型組件229
5.5.2展示型組件229
5.5.3 Redux中的組件230
5.6 Redux應用實例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.1 reducer的複用259
6.1.2 reducer的增強261
6.2 Redux與表單262
6.2.1使用redux-form-utils減少
創建表單的冗餘代碼263
6.2.2使用redux-form完成表單的
異步驗證265
6.2.3使用高階reducer為現有模塊
引入表單功能267
6.3 Redux 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.4 Redux性能優化279
6.4.1 Reselect 280
6.4.2 Immutable Redux 282
6.4.3 Reducer性能優化282
6.5解讀Redux 284
6.5.1參數歸一化285
6.5.2初始狀態及getState 286
6.5.3 subscribe 286
6.5.4 dispatch 287
6.5.5 replaceReducer 288
6.6解讀react-redux 288
6.6.1 Provider 288
6.6.2 connect 290
6.6.3代碼熱替換293
6.7小結294
第7章React服務端渲染295
7.1 React與服務端模板295
7.1.1什麼是服務端渲染295
7.1 .2 react-view 296
7.1.3 react-view源碼解讀296
7.2 React服務端渲染299
7.2.1玩轉Node.js 300
7.2.2 React-Router和Koa-Router
統一303
7.2.3同構數據處理的探討306
7.3小結307
第8章玩轉React可視化308
8.1 React結合Canvas和SVG 308
8.1.1 Canvas與SVG 308
8.1.2在React中的Canvas 310
8.1.3 React中的SVG 311
8.2 React與可視化組件316
8.2.1包裝已有的可視化庫316
8.2.2使用D3繪製UI部分317
8.2.3使用React繪製UI部分319
8.3 Recharts組件化的原理322
8.3.1聲明式的標籤323
8.3.2貼近原生的配置項325
8.3.3接口式的API 326
8.4小結328
附錄A開發環境329
附錄B編碼規範345
附錄C Koa middleware 349
