這篇文章時間有點久遠,翻譯試試看.但是本篇文章對于React的渲染工作原理講的比較好,使用一個游戲引擎的渲染方式來類比解釋React的數(shù)據(jù)流程,值得學(xué)習(xí). 原文在這里
去年五月(2013年5月),Facebook發(fā)布了構(gòu)建前端組件庫的開源軟件-React.React對于瀏覽器和app的結(jié)構(gòu)來說有點異類.但是經(jīng)過這段時間,開發(fā)者逐漸看到了一些優(yōu)勢,React也因此獲取了很多的人氣.React最為相助的額特征是引入了virtual-DOM方法,virtual-DOM使實際的瀏覽器的DOM變化減到最低,DOM的渲染性能大幅提高.
React并不是完整的MVC框架,React實際是MVC的加強版(這點,真是雪中送炭,一直都對這個框架到底是不是MVC而心存疑慮).很多開發(fā)者選擇React作為MVC框架的延伸,例如Backbone.React本身并沒有路由和數(shù)據(jù)同步的內(nèi)容,所以你可以很容易的使用喜歡的工具來完成類似的功能.React也可以在其他的應(yīng)用中管理一部分特定的組件.但是如果在應(yīng)用的界面上全面使用React,發(fā)揮的功能會更大.
盡可能的避免DOM
React作為javascript的一個類,提供virtual-DOM實施方案.這意味著你可以頻繁的更新你的應(yīng)用程序的元素樹,但是實際上沒有發(fā)生瀏覽器的DOM操作.由于使用了現(xiàn)代的引擎,Javascript的速度相當快.實際由于引擎的速度很快,當每一次數(shù)據(jù)更新的時候,渲染應(yīng)用程序的所有元素都是可以的,減少了實時元素操作和雙向數(shù)據(jù)綁定的需求.React周期性的比較virtual-DOM和瀏覽器DOM,僅僅做出最有必要的DOM同步.
單向數(shù)據(jù)流
當HTML元素的渲染花銷大幅度降低以后,你現(xiàn)在需要花費更多的的方法來管理你的界面.放棄錯綜復(fù)雜的就地更新元素操作和數(shù)據(jù)變化中的的多個state的同步,你可以把狀態(tài)放在一個地方,基于集中的state來描述你的界面.只要狀態(tài)以改變,React的組件就可以進行更新操作.
當你的整個應(yīng)用都基于這個思想來設(shè)計,你可以把immutable 數(shù)據(jù)從頂層組件傳遞給子組件,然后執(zhí)行自頂向下的應(yīng)用更新.React從根本上改變了你對應(yīng)用的思路,而且經(jīng)常會簡化應(yīng)用的設(shè)計.
瀏覽器作為渲染引擎
這一點是對MVC框架非常激進的改變,它強調(diào)使用雙向數(shù)據(jù)綁定,盡可能多自動就地重新渲染.當我剛開始了解React的時候,我還不是太確定.轉(zhuǎn)折點是我看了一個Pete Hunt的視頻:比較React和Doom3渲染引擎.
在圖表中,游戲的sate經(jīng)過底層的圖形代碼導(dǎo)入前端邏輯和抽象層.這個操作會創(chuàng)建一個“場景中間表示層”(scene intermediate representation),這個表示層表現(xiàn)出用戶應(yīng)該看到的內(nèi)容.這個表示層會傳遞給”backend”(后端),后端接收表示層內(nèi)容,隨之轉(zhuǎn)換為OpenGL操作,OpenGL使用圖形卡(電腦顯卡)渲染出內(nèi)容.React的工作原理和Doom3的渲染方式是一樣的.(doom3是早期一款比較著名的第一人稱射擊游戲,這里使用doom3的圖形渲染方式來說明React的工作方式).
當程序的state由于瀏覽器或者實時事件發(fā)生變化,React程序接收這些變化,并且傳遞給組件們,接著使用virtual-DOM方式生成中間表示層.瀏覽器的DOM并不會發(fā)生立即的變化.然而React會周期性的接收virtual DOM,計算出必要的DOM操作.這一點和游戲引擎接受場景中間表示層,決定是否使用OpenGL渲染場景類似.React是接收DOM,把它渲染到用戶屏幕上.(可見兩者渲染的思路是一樣的,React使用了瀏覽器來做這個工作).
瀏覽器和游戲引擎一樣,最慢的部分實際是中間表示層到屏幕的渲染部分.你可以對virtual-DOM做出許多細小的改變,React優(yōu)化了這個部分,所以不會因此而犧牲渲染的性能.
更多的資源
在第二部分,我將會演示怎么把React的設(shè)計哲學(xué)付諸實踐.我會分享怎么更具不同的功能責任,渲染一個由小組件組成的頂級組件的界面.我也會演示怎么在React應(yīng)用中整合路由功能和數(shù)據(jù)同步功能.
如果你想了解更多的React內(nèi)容,想知道它是怎么工作的,看看下面的資源列表.
- React主頁
- 視頻
- 實例
- React Google Group
- #reactjs on Freenode-官方 IRC頻道,比較活躍
