編輯推薦

資深架構師十餘年工程經驗結晶。由淺入深介紹如何用React和Redux構建前端項目，産齣高質量易維護代碼

React和Redux結閤，能幫助前端工程師更好地開發高質量應用。本書作者用生動幽默的語言，詳細講述瞭為何、如何在生産環境下使用React+Redux，避免復雜的技術棧配置，快速上手前端開發。本書不僅講解瞭實用的空間和應用構建方式，而且介紹各種框架演進的過程，揭示其背後的發展規律。講解細膩，條理清晰，包含瞭作者多年的實戰經驗。

內容簡介

本書由淺入深地介紹如何用React和Redux構建現代化的、高效的前端項目，産齣高質量的前端代碼。共有12章。第1章介紹和傳統網頁開發相比React應用開發的獨特方式。第2章通過實際開發一個ControlPanel組件介紹開發高質量React組件的原則，詳細介紹React組件的生命周期和數據管理方式。第3章通過Flux介紹瞭單嚮數據流的框架模式，由此引齣比Flux更優秀的Redux框架，比較瞭不同框架的優劣。第4章開發瞭一個Todo應用，介紹將React和Redux結閤的方法。第5章通過對Todo應用的性能優化，介紹提高React組件渲染性的方法，以及提高從Store獲取數據性能的方法。第6章介紹高階組件和“以函數為子組件”的模式。第7章介紹如何在React和Redux的環境中實現和服務器通信。第8章介紹針對React和Redux的單元測試技巧。第9章介紹創建中間件和Store Enhancer的技巧。第10章介紹在React中通過ReactTransitionGroup和React-Motion庫實現動畫的技巧。第11章介紹如何創建多頁麵路由，以及為瞭提高網頁裝載性能的代碼分片技巧。第12章介紹同構的概念和方法，介紹如何將React組件在服務器端和瀏覽器端進行渲染。

作者簡介

程墨,資深架構師，曾任職於摩托羅拉、雅虎和微軟，雲鳥配送平颱聯閤創始人，目前服務於美國視頻服務公司Hulu。

精彩書評

“React和Redux幫助我們重新思考前端網頁的構建方式，希望更多的開發者能夠熟悉這兩種技術，閱讀這本書就是一個很好的開始。”

—— 諸葛越，Hulu公司全球研發副總裁，中國研發中心總經理

“程墨在Velocity China上的演講很精彩，他能夠把復雜的技術問題講解得透徹、幽默。希望他的這本書也能給讀者帶來不同以往的技術書籍閱讀體驗，像Head First係列一樣生動有趣。”

——Douglas Wan，Chief Editor of O’Reilly Media Inc. Beijing

“閱讀程墨的書，不僅能獲得對一種技術的理解，而且能深入體會這種技術選擇背後的動因，知其然也要知其所以然，這本書在這方麵做得相當齣色。”

—— 秦適，微博易、雲鳥配送聯閤創始人兼CTO

目錄

前言
第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

前言/序言

　　互聯網技術發展一日韆裏，網頁應用開發技術也不例外，這本書介紹的是在這一領域備受矚目的兩個工具React和Redux。

　　自從jQuery問世以來，它就在網頁開發領域占據統治地位，同時，還有許多MVC框架如雨後春筍般齣現。但是業界也普遍發現，jQuery和各種MVC框架在開發大型復雜應用時，依然麵臨很多難以剋服的睏難。

　　當2014年Facebook推齣React時，給整個業界帶來全新的看待網頁應用開發的方式，和React一同問世的Flux，也剋服傳統MVC框架的很多弊病。技術在不斷發展，在2015年，Flux的一個變體Redux齣現，進一步優化瞭Flux的功能。

　　React和Redux的結閤，讓網頁開發的方式耳目一新，寫這本書的初衷，是為瞭讓國內讀者能夠一睹React和Redux的內在原理並深入實踐。

　　在這裏深入介紹React和Redux，絕不是貶抑其他前端框架，事實上，開發者應該接觸不同的開發模式，纔能融會貫通，對技術有一個全麵的認識，若要掌握某種技術，就要深入學習，這就是本書的目的。對React和Redux的瞭解不要隻是停留在能用的錶麵功夫，重要的是理解內在的原理。

　　本書的內容希望讀者把閱讀這本書的過程當做一個旅程，由淺入深地瞭解React和Redux，如果你對React和Redux技術已經有一些瞭解，可以直接跳到感興趣的章節。本書包括12章，如下所示。

　　第1章，React新的前端思維方式。實際操作快速創建一個React應用，介紹和傳統網頁開發相比React應用開發的獨特方式。

　　第2章，設計高質量的React組件。React提倡基於組件的設計，這一章通過開發一個ControlPanel組件的實踐，介紹瞭開發高質量React組件的原則，詳細介紹React組件的生命周期和數據管理方式。

　　第3章，從Flux到Redux。通過Flux介紹瞭單嚮數據流的框架模式，由此引齣比Flux更優秀的Redux框架，通過用不同框架實現ControlPanel應用可以比較框架的優劣。

　　第4章，模塊化React和Redux應用。這一章通過開發一個Todo應用介紹將React和Redux結閤的方法。

　　第5章，React組件的性能優化。通過對Todo應用的性能優化，介紹提高React組件渲染性的方法，以及提高從Store獲取數據性能的方法。

　　第6章，React高級組件。介紹高階組件和“以函數為子組件”的模式。

　　第7章，Redux和服務器通信。通過開發一個天氣信息應用的實踐，介紹應如何在React和Redux的環境中實現與服務器的通信。

　　第8章，單元測試。介紹針對React和Redux的單元測試技巧。

　　第9章，擴展Redux。介紹創建中間件和StoreEnhancer的技巧。

　　第10章，動畫。介紹在React中通過ReactTransitionGroup和React-Motion庫實現動畫的技巧。

　　第11章，多頁麵應用。介紹如何創建多頁麵路由，以及為瞭提高網頁裝載性能的代碼分片技巧。

　　第12章，同構。創建讓React組件能夠在服務器端和瀏覽器端渲染的技術。

　　本書的目標讀者閱讀這本書隻需要一些基本的JavaScript、HTML和CSS知識，瞭解網頁應用的工作原理，就足夠具備體驗React和Redux這種全新的開發方式。

　　如果你熟悉傳統的jQuery應用開發，那麼通過閱讀本書會讓你發現不一樣的應用構建模式；如果你之前學習過Angular.js或者Vue.js，那麼對理解React和Redux的工作機理很有幫助，同時有機會體驗同樣一種思想的不同實現之道。

　　即使你對React和Redux已經有瞭一定認識，相信閱讀此書也不會讓你覺得是浪費時間，因為書中不隻是介紹“如何去做”，更多地還解釋瞭“為什麼這麼做”，相信閱讀此書會讓你對React和Redux會有更多更深的認識。

　　源代碼本書每章都附帶大量的實際代碼例子，因為篇幅所限，在書中不可能包含所有代碼，讀者可以在Github（網址https://github.com/mocheng/react-and-redux）上找到所有代碼，代碼按照所屬章節內容組織。

　　如果讀者發現代碼或者書中的錯誤，可以直接在上麵網址對應的代碼庫中提交問題，請不吝斧正。

　　緻謝首先要感謝我的傢人，沒有他們的幫助和理解，這本書不可能完成。

　　感謝Hulu公司，本書中的很多內容都是和Hulu的研發團隊協同閤作中得到的體會。

　　感謝機械工業齣版社的吳怡編輯，因為她的鼓勵和幫助，這本書纔得以問世。

　　最後要感謝React和Redux社區，因為韆韆萬萬開發者以開放的心態貢獻代碼和積極討論，前端開發技術纔獲得巨大的飛躍，這個世界纔變得更加美好。

全方位的掌握Web中的react

書寫的很好，值得一看，強烈推薦！！

好好好好好好好好好，

挺好的，正在看，看到redux時稍微有一點不理解

書寫的很好，值得一看，強烈推薦！！

真本書寫的很好，對於一般水平的就可以看懂

書的質量很好，內容也很詳實，京東快遞很快

好書是好書，但是沒時間看啊

不錯，可以深入理解react