React : 引領未來的用戶界面開發框架, 2/e React(第2版):引领未来的用户界面开发框架

<內容簡介>

 Facebook 的開源框架React.js，基於Virtual DOM 重新定義了用戶界面的開發方式，徹底革新了大家對前端框架的認識，將PHP風格的開發方式遷移到客戶端應用開發。其優勢在於可以與各種類庫、框架搭配使用。本書由多位一線專家精心撰寫，採用全程實例介紹和剖析了React.js 的方方面面，適合廣大前端開發者、設計人員，以及所有對未來技術趨勢感興趣者閱讀。本書前版作為React 首作推出之後，React 生態繼續蓬勃發展，技術及社區都在不斷推陳出新。本書諸位專家作者適時推出新版，全面更新示例，用ES6 重寫代碼，摒棄社區棄用範式，新增無狀態組件、不可變量據、Redux 等熱點內容。閱讀本書，不但可以夯實React 開發基礎，更能全方位緊跟整個React 生態！

<章節目錄>

推薦序1 III
推薦序2 V
推薦序3 VII
前言IX
第1章?React簡介1
背景介紹1
本書概覽3
Component的創建和復合3
進階5
React工具6
React實踐6
第2章?JSX 8
什麼是JSX 9
使用JSX的好處10
更加熟悉10
更加語義化10
更加直觀11
關註點分離12
複合組件12
定義一個自定義組件12
使用動態值13
子節點14
JSX與HTML有何不同16
屬性16
條件判斷17
非DOM屬性19
事件21
註釋22
特殊屬性23
樣式23
沒有JSX的React 24
創建React元素24
延伸閱讀及參考引用25
JSX官方規範25
第3章?組件的生命週期26
生命週期方法26
實例化27
存在期27
銷毀＆清理期27
實例化27
componentWillMount 28
render 28
componentDidMount 29
存在期30
componentWillReceiveProps 30
shouldComponentUpdate 30
componentWillUpdate 31
componentDidUpdate 31
銷毀＆清理期32
componentWillUnmount 32
反模式：把計算後的值賦給state 32
總結33
第4章?數據流34
Props 35
PropTypes 36
defaultProps 37
State 37
放在state和props的各是哪些部分40
無狀態的函數式組件40
總結41
第5章?事件處理42
綁定事件處理器43
事件和狀態44
根據狀態進行渲染44
更新狀態45
狀態沒有“更新”! 46
事件對象47
總結48
第6章?組件的複合49
擴展HTML 50
組件複合的例子50
組裝HTML 51
追蹤狀態53
整合到父組件當中54
父組件與子組件的關係56
總結59
第7章?高階組件和Mixins 60
簡單的例子60
常見使用場景63
總結63
第8章?DOM操作64
訪問受控的DOM節點65
在組件內部查找DOM節點66
整合非React類庫67
侵入式插件70
總結72
第9章?表單73
無約束的組件74
約束組件76
表單事件78
Label 79
文本框和Select 79
複選框和單選框82
表單元素的name屬性84
多個表單元素與change處理器86
自定義表單組件89
Focus 93
可用性93
把要求傳達清楚94
不斷地反饋94
迅速響應94
符合用戶的預期95
可訪問95
減少用戶的輸入96
總結97
第10章?動畫98
CSS漸變組99
給漸變class添加樣式99
漸變生命週期100
使用漸變組的隱患101
間隔渲染101
使用requestAnimationFrame實現間隔渲染102
使用setTimeout實現間隔渲染104
彈簧動畫105
總結106
第11章?性能優化107
shouldComponentUpdate 107
鍵（ key） 109
總結111
第12章?服務端渲染112
渲染函數113
React.renderToString 113
React.renderToStaticMarkup 114
用React.renderToString還是用React.renderToStaticMarkup 114
服務端組件生命週期115
設計組件116
異步狀態118
同構路由121
單例、實例及上下文121
總結122
第13章?開發工具123
構建工具123
Browserify 124
建立一個Browserify項目124
對代碼做出修改126
Watchify 127
構建127
Webpack 127
Webpack與React 128
調試工具131
基礎工具131
總結133
第14章?測試134
上手135
測試的類型135
工具136
使用Jest和Enzyme測試React組件136
編寫組件的內容的斷言136
測試組件的方法和DOM事件143
編寫子組件的斷言144
總結147
第15章?架構模式148
路由149
react-router 150
Flux 152
數據流152
Flux各個部分153
Dispatcher 153
Action 154
Store 154
控制視圖155
管理多個Store 156
總結161
第16章?不可變性162
性能優勢162
性能消耗163
架構優勢164
使用Immutability Helpers Addon 164
使用seamless-immutable 166
使用Immutable.js 167
Immutable.Map 168
Immutable.Vector 168
總結169
第17章?其他使用場景170
桌面應用171
遊戲172
電子郵件177
繪圖183
總結186

序言
推薦序1
時光回溯。2011年我離開Google轉而加入Facebook，從事移動因特網（Mobile Web）的核心產品開發工作。
隨著時間的推移，工作上逐漸取得了許多有意義的巨大進展，同仁們也都深以此為傲。然而不是所有的事情都進展得特別順利。其中一個很大的問題與挑戰就是因為HTML5的技術限制與性能瓶頸，許多產品的開發工作受到了限制。
2012年Facebook公開了一件很多人深有體會卻不想說出口的事實，那就是HTML5之類的Web技術並未成熟到能夠擔任產品開發工具重任的程度。在很多方面，使用原生代碼（native code）開發仍然是必要的選項。
對於很多包括我在內的Mobile Web開發者來說，這樣的情況是一個讓人失望卻又不得不接受的事實。
2013年年初，我離開工作兩年多的移動因特網開發部門，轉而投入廣告部門，從事桌面富客戶端（Rich App Client Application）的開發工作。
雖然Mobile Web的進展不如預期理想，但此時在Desktop Web方面，事情卻有了有意思的變化。
當時我參與的新項目主要是要使用一種叫作React的新平臺技術，將當時廣告部門的一個主要產品重構。項目的有趣之處在於，產品的視覺外觀與功能將不會也不能有任何變化，但是內部執行的代碼將會是以React打造的。
由於項目的目標為實際上線且對公司營收有重要影響的產品，所以項目的挑戰除了在於應用React這門新技術之外，維持產品本身的穩定當然也是不可妥協的目標。
所幸，項目順利達標，而同仁們也對於React這門技術有了更豐富的經驗與更強的信心。就連React本身也快速吸收眾人的回饋，快速演進。
我從事Web前端開發工作已經十年，有幸親身經歷眾多重大的技術變革與範式轉移。我可以負責任也很喜悅地說，作為一門新生技術，React及其相關工具對於從事Web開發的人來說，將會產生巨大且革命性的影響。
雖說React初始是為瞭解決Facebook廣告部門在產品開發上遇到的很多實際問題，但實際應用的層面卻非常廣泛。
2015年Facebook也開源了ReactNative，讓React能夠在iOS移動終端執行（對Android的平臺支持預計為2015年年底）。
由於React的特殊設計，React消彌了客戶端與服務器端的開發界線。最近的發展則更進一步衍生到Mobile Native App與其他非傳統Web（HTML+CSS）的執行環境。
無論你是有多年經驗的開發者，或者是剛入門的新人，此時選擇React都會是一個很好的選擇。
React可以解決很多傳統Web開發架構碰到的艱難問題，同時由於它是一門新生技術，開發者將更有機會掌握一門強大的開發工具，解決更深入的艱難問題並提升產品開發的質量與境地。
作為一本入門書籍，本書提供基本但足夠的範例與介紹，著重在實際的代碼與操作應用，可以讓讀者快速學習React的相關知識與技術，並實際打造可執行的程序。
相信對於需要使用React開發的人來說，這將會是一本不錯的入門參考。
必須要補充的是，目前由於React還在Beta版本階段，本書的內容主要是以v0.12為主。目前公開的最新版本為v0.13，書中提到的API將會略有差異，細節方面可以在它的官方網站上查詢。
Hedger Wang
Facebook資深前端工程師
推薦序2
組件化一直是前端領域的聖杯。我至今依舊記得自己初次接觸YUI-Ext時，被其精緻的組件和優雅的設計深深震撼的場景。之後隨著ExtJS的發布，我在很長時間內都痴迷於探索ExtJS深邃的繼承層次與架構，並由此進入了前端行業。
ExtJS作為一個企業級框架，借鑒了Java的Swing設計，同Java一樣有著教科書般的學院風派，也同Swing一樣註定曲高和寡。在快速變化的因特網領域，ExtJS猶如一條大船行駛在激流中，每一次調頭都非常艱難。同時代的不少因特網企業也開源了自己的前端類庫，包括YUI、Closure Library、KISSY、Arale等，它們同樣有著不錯的組件設計，但思路和ExtJS並無顯著不同，只不過更加輕量化。
傳統組件化的特點是把組件和原生DOM節點的渲染割裂起來，要麽如ExtJS一樣拋棄原生DOM節點，要麽就在原生DOM節點渲染後再渲染自定義組件。現代的組件架構鼓勵原生DOM節點和自定義組件的統一渲染融合，比如React以及未來的Web Components規範。
React最為人稱道的是，它是一個專註於組件架構的類庫。API很少，理念也很簡單，使用React可以非常快速地寫出和原生DOM標籤完美融合的自定義組件（標籤），並且能夠高效渲染。而想要真正使用好React，我們必須跳出以往的思維，擁抱React的理念和思想，比如狀態、虛擬DOM、組合優於繼承、單向數據流等。React的簡單抽象和專註，使得React可以更容易與其他各種技術結合。因為React的簡單抽象，我們終於可以脫離瀏覽器中充滿敵意的DOM環境，從而使得組件也可以運行在服務器端、Native客戶端等各種底層平臺。令人驚奇的是，這種抽象洩漏非常少，必要時可以很方便地跳出React的抽象而直接操縱DOM等底層平臺。因為React專註於組件架構，所以模塊系統可以直接採用CommonJS，測試框架可以使用Mocha或Jasmine等，生態圈則可以直接依托npm，工具可以採用現成的Browserify或webpack，我們不必受制於任何單一技術，這非常符合Web的開放本質。
在本書中，作者不僅完整地介紹了React本身的方方面面，用通俗的語言和簡潔的例子闡述了React的開發理念，還介紹了一套基於React以及業界其他優秀技術的最佳實踐，相信讀者在看完本書後能夠快速將其中的知識應用於項目開發。React目前處於快速發展時期，在本書發行後，又增加了不少吸引人的新特性，加大了和ES6的進一步整合，從而進一步減少了需要學習的API，大家在看完本書後可以持續關註React社區的最新發展動態。值得註意的是，業界基於React的優秀組件與傳統組件相比仍然嚴重不足，這對我們來說是一個很好的機會——有機會可以向業界發出中國的聲音。積極學習業界的先進技術，未來我們一定能在前端類庫領域創造出讓業界稱讚的東西。
何一鳴（承玉）
螞蟻金服技術專家
前KISSY核心開發者，現React愛好者

推薦序3
React是一種革命性的UI組件開發思路。
在此之前，我們所見到的JavaScript框架開發思路幾乎是同質的。框架為開發者提供一套組件庫，業務開發基於組件庫提供的組件來進行就可以了。
而在UI組件架構裡，有幾個特點需要註意：一是越靠近用戶端變化越快，用枚舉組件的思路在高速迭代快速變化的因特網中開發，將會使UI組件庫逐漸變得臃腫和難以維護。二是組件開發不再是五六年前那樣一窮二白的初始狀態，現今行業裡組件百花齊放，可選面非常廣，即使當下找不到非常匹配的組件，進行自研的成本也不高。三是UI組件受具體業務場景的約束。
因此，各大因特網公司在組件上都盡可能地採取自研或統一組織組件庫。而組件庫在公司級別難抽象，對整體技術的挑戰比較大，且收效不確定。於是只能將組件場景定位到更具體的某一類型的業務線再進行抽象。從而讓組件庫變得輕量、靈活。
開發架構的理想態是“同構”。用相同的內部機制與結構將開髮變得透明且測試可控。這在React裡表現得很明顯。它的設計非常大膽，一開始就沒有將枚舉組件功能作為重點，而是以“同構”的理想架構為起點——將原本的DOM操作接管，提出Virtual DOM、單向數據流，用很少的接口覆蓋在組件開發的生命週期上，採取聲明式的語法等。實現了一個純粹的組件“引擎”。
另一方面，React的思路也可作為連接“異構端”的組件入口。現在，用React + native就可以實現React- native；用React + canvas就可以實現一套基於canvas的高性能的Web UI組件；最近，我還嘗試了React + WebComponents，將兩者的優勢進行融合。
可見，React的思路為開發創造了非常大的想像空間。
本書內容圍繞示例展開，書中還涵蓋了React的周邊信息，為讀者提供了較為全面和豐富的React講解。通過閱讀本書，讀者能夠學會如何將React運用到實際開發中去。另外，我建議大家不僅要學習React的應用如何實現組件，更重要的是通過書中的實例理解React的設計思路。可以預見，React未來將會影響整個用戶端UI組件的開發。希望能有更多的人瞭解React的開發思路，大家攜手共建React的組件生態。
劉平川（rank）
現美團網架構師，React愛好者
前百度FEX創立者及負責人

前言
React是什麼，為什麼要使用它
React是Facebook內部的一個JavaScript類庫，已於2013年開源，可用於創建web用戶交互界面。它引入了一種新的方式來處理瀏覽器DOM。那些需要手動更新DOM、費力地記錄每一個狀態的日子一去不復返了——這種老舊的方式既不具備擴展性，又很難加入新的功能，就算可以，也是冒著很大的風險。React使用很新穎的方式解決了這些問題。你只需聲明式地定義各個時間點的用戶界面，而無須關心在數據變化時需要更新哪一部分DOM。在任何時間點，React都能夠以最小的DOM修改來更新整個應用程序。
本書內容
React引入了一些激動人心的新概念，向現有的一些最佳實踐發起了挑戰。本書將會帶領你學習這些概念，幫助你理解它們的優勢，創建具備高擴展性的單頁面應用（SPA）。
React把主要的註意力放在了應用的“視圖”部分，沒有限定與服務端交互和代

文摘
推薦序1
時光回溯。
2011年我離開Google轉而加入Facebook，從事移動因特網（Mobile Web）的核心產品開發工作。
隨著時間的推移，工作上逐漸取得了許多有意義的巨大進展，同仁們也都深以此為傲。然而不是所有的事情都進展得特別順利。其中一個很大的問題與挑戰就是因為HTML5的技術限制與性能瓶頸，許多產品的開發工作受到了限制。
2012年Facebook公開了一件很多人深有體會卻不想說出口的事實，那就是HTML5之類的Web技術並未成熟到能夠擔任產品開發工具重任的程度。在很多方面，使用原生代碼（native code）開發仍然是必要的選項。
對於很多包括我在內的Mobile Web開發者來說，這樣的情況是一個讓人失望卻又不得不接受的事實。
2013年年初，我離開工作兩年多的移動因特網開發部門，轉而投入廣告部門，從事桌面富客戶端（Rich App Client Application）的開發工作。
雖然Mobile Web的進展不如預期理想，但此時在Desktop Web方面，事情卻有了有意思的變化。
當時我參與的新項目主要是要使用一種叫作React的新平臺技術，將當時廣告部門的一個主要產品重構。項目的有趣之處在於，產品的視覺外觀與功能將不會也不能有任何變化，但是內部執行的代碼將會是以React打造的。
由於項目的目標為實際上線且對公司營收有重要影響的產品，所以項目的挑戰除了在於應用React這門新技術之外，維持產品本身的穩定當然也是不可妥協的目標。
所幸，項目順利達標，而同仁們也對於React這門技術有了更豐富的經驗與更強的信心。就連React本身也快速吸收眾人的回饋，快速演進。
我從事Web前端開發工作已經十年，有幸親身經歷眾多重大的技術變革與範式轉移。我可以負責任也很喜悅地說，作為一門新生技術，React及其相關工具對於從事Web開發的人來說，將會產生巨大且革命性的影響。
雖說React初始是為瞭解決Facebook廣告部門在產品開發上遇到的很多實際問題，但實際應用的層面卻非常廣泛。
2015年Facebook也開源了ReactNative，讓React能夠在iOS移動終端執行（對Android的平臺支持預計為2015年年底）。
由於React的特殊設計，React消彌了客戶端與服務器端的開發界線。最近的發展則更進一步衍生到Mobile Native App與其他非傳統Web（HTML+CSS）的執行環境。
無論你是有多年經驗的開發者，或者是剛入門的新人，此時選擇React都會是一個很好的選擇。
React可以解決很多傳統Web開發架構碰到的艱難問題，同時由於它是一門新生技術，開發者將更有機會掌握一門強大的開發工具，解決更深入的艱難問題並提升產品開發的質量與境地。
作為一本入門書籍，本書提供基本但足夠的範例與介紹，著重在實際的代碼與操作應用，可以讓讀者快速學習React的相關知識與技術，並實際打造可執行的程序。
相信對於需要使用React開發的人來說，這將會是一本不錯的入門參考。
必須要補充的是，目前由於React還在Beta版本階段，本書的內容主要是以v0.12為主。目前公開的最新版本為v0.13，書中提到的API將會略有差異，細節方面可以在它的官方網站上查詢。
Hedger Wang
Facebook資深前端工程師

推薦序2
組件化一直是前端領域的聖杯。我至今依舊記得自己初次接觸YUI-Ext時，被其精緻的組件和優雅的設計深深震撼的場景。之後隨著ExtJS的發布，我在很長時間內都痴迷於探索ExtJS深邃的繼承層次與架構，並由此進入了前端行業。
ExtJS作為一個企業級框架，借鑒了Java的Swing設計，同Java一樣有著教科書般的學院風派，也同Swing一樣註定曲高和寡。在快速變化的因特網領域，ExtJS猶如一條大船行駛在激流中，每一次調頭都非常艱難。同時代的不少因特網企業也開源了自己的前端類庫，包括YUI、Closure Library、KISSY、Arale等，它們同樣有著不錯的組件設計，但思路和ExtJS並無顯著不同，只不過更加輕量化。
傳統組件化的特點是把組件和原生DOM節點的渲染割裂起來，要麽如ExtJS一樣拋棄原生DOM節點，要麽就在原生DOM節點渲染後再渲染自定義組件。現代的組件架構鼓勵原生DOM節點和自定義組件的統一渲染融合，比如React以及未來的Web Components規範。
React最為人稱道的是，它是一個專註於組件架構的類庫。API很少，理念也很簡單，使用React可以非常快速地寫出和原生DOM標籤完美融合的自定義組件（標籤），並且能夠高效渲染。而想要真正使用好React，我們必須跳出以往的思維，擁抱React的理念和思想，比如狀態、虛擬DOM、組合優於繼承、單向數據流等。React的簡單抽象和專註，使得React可以更容易與其他各種技術結合。因為React的簡單抽象，我們終於可以脫離瀏覽器中充滿敵意的DOM環境，從而使得組件也可以運行在服務器端、Native客戶端等各種底層平臺。令人驚奇的是，這種抽象洩漏非常少，必要時可以很方便地跳出React的抽象而直接操縱DOM等底層平臺。因為React專註於組件架構，所以模塊系統可以直接採用CommonJS，測試框架可以使用Mocha或Jasmine等，生態圈則可以直接依托npm，工具可以採用現成的Browserify或webpack，我們不必受制於任何單一技術，這非常符合Web的開放本質。
在本書中，作者不僅完整地介紹了React本身的方方面面，用通俗的語言和簡潔的例子闡述了React的開發理念，還介紹了一套基於React以及業界其他優秀技術的最佳實踐，相信讀者在看完本書後能夠快速將其中的知識應用於項目開發。React目前處於快速發展時期，在本書發行後，又增加了不少吸引人的新特性，加大了和ES6的進一步整合，從而進一步減少了需要學習的API，大家在看完本書後可以持續關註React社區的最新發展動態。值得註意的是，業界基於React的優秀組件與傳統組件相比仍然嚴重不足，這對我們來說是一個很好的機會——有機會可以向業界發出中國的聲音。積極學習業界的先進技術，未來我們一定能在前端類庫領域創造出讓業界稱讚的東西。
何一鳴（承玉）
螞蟻金服技術專家
前KISSY核心開發者，現React愛好者

推薦序3
React是一種革命性的UI組件開發思路。
在此之前，我們所見到的JavaScript框架開發思路幾乎是同質的。框架為開發者提供一套組件庫，業務開發基於組件庫提供的組件來進行就可以了。
而在UI組件架構裡，有幾個特點需要註意：一是越靠近用戶端變化越快，用枚舉組件的思路在高速迭代快速變化的因特網中開發，將會使UI組件庫逐漸變得臃腫和難以維護。二是組件開發不再是五六年前那樣一窮二白的初始狀態，現今行業裡組件百花齊放，可選面非常廣，即使當下找不到非常匹配的組件，進行自研的成本也不高。三是UI組件受具體業務場景的約束。
因此，各大因特網公司在組件上都盡可能地採取自研或統一組織組件庫。而組件庫在公司級別難抽象，對整體技術的挑戰比較大，且收效不確定。於是只能將組件場景定位到更具體的某一類型的業務線再進行抽象。從而讓組件庫變得輕量、靈活。
開發架構的理想態是“同構”。用相同的內部機制與結構將開髮變得透明且測試可控。這在React裡表現得很明顯。它的設計非常大膽，一開始就沒有將枚舉組件功能作為重點，而是以“同構”的理想架構為起點——將原本的DOM操作接管，提出Virtual DOM、單向數據流，用很少的接口覆蓋在組件開發的生命週期上，採取聲明式的語法等。實現了一個純粹的組件“引擎”。
另一方面，React的思路也可作為連接“異構端”的組件入口。現在，用React + native就可以實現React- native；用React + canvas就可以實現一套基於canvas的高性能的Web UI組件；最近，我還嘗試了React + WebComponents，將兩者的優勢進行融合。
可見，React的思路為開發創造了非常大的想像空間。
本書內容圍繞示例展開，書中還涵蓋了React的周邊信息，為讀者提供了較為全面和豐富的React講解。通過閱讀本書，讀者能夠學會如何將React運用到實際開發中去。另外，我建議大家不僅要學習React的應用如何實現組件，更重要的是通過書中的實例理解React的設計思路。可以預見，React未來將會影響整個用戶端UI組件的開發。希望能有更多的人瞭解React的開發思路，大家攜手共建React的組件生態。
劉平川（rank）
現美團網架構師，React愛好者
前百度FEX創立者及負責人