React的開(kāi)發(fā)目的
按官網(wǎng)描述,用于開(kāi)發(fā)數(shù)據(jù)不斷變化的大型應(yīng)用程序
為什么React適用于開(kāi)發(fā)數(shù)據(jù)不斷變化的大型應(yīng)用程序呢,那就要從Web開(kāi)發(fā)的性能瓶頸和React的原理開(kāi)始說(shuō)起。
Web開(kāi)發(fā)的性能瓶頸
在Web開(kāi)發(fā)中古程,我們需要將不斷變化的數(shù)據(jù)實(shí)時(shí)顯示在UI上,這種時(shí)候就要對(duì)DOM進(jìn)行操作。而復(fù)雜頻繁的DOM操作就是產(chǎn)生Web性能瓶頸的重要原因台舱。
React的原理
React為了解決以上瓶頸,引入了虛擬DOM潭流,這也是React最為重要的核心機(jī)制之一竞惋。React利用對(duì)虛擬DOM來(lái)減少對(duì)實(shí)際DOM的操作從而提升性能。由于虛擬DOM是在內(nèi)存中創(chuàng)建的灰嫉,因此性能極高拆宛。每一次的數(shù)據(jù)更新,React都會(huì)刷新整個(gè)頁(yè)面讼撒。
這樣還帶來(lái)了另外一個(gè)好處浑厚,就是開(kāi)發(fā)者們不用關(guān)心數(shù)據(jù)是怎么變化的,只需要知道每一次頁(yè)面渲染對(duì)應(yīng)的整體數(shù)據(jù)是什么就好了根盒。而在傳統(tǒng)的Web前端開(kāi)發(fā)思路上瞻颂,開(kāi)發(fā)者們需要知道哪些數(shù)據(jù)是新的,如何將新的DOM節(jié)點(diǎn)添加到當(dāng)前的DOM樹(shù)上郑象。
因此贡这,在React的開(kāi)發(fā)中,你永遠(yuǎn)只需要關(guān)心整體數(shù)據(jù)厂榛,至于如何進(jìn)行局部更新以提高效率盖矫,那是React框架要做的事情丽惭。
組件化的開(kāi)發(fā)思路
在虛擬DOM的基礎(chǔ)之上就衍生出了React組件化的開(kāi)發(fā)思路。
所謂組件辈双,即封裝起來(lái)的具有獨(dú)立功能的的UI部件
在React構(gòu)建的應(yīng)用程序中责掏,你可以將整個(gè)頁(yè)面視為一個(gè)由許多的子組件構(gòu)成的大組件,這樣做最明顯的一個(gè)好處是增加了前端代碼的可重用性湃望,一個(gè)組件能在多個(gè)UI界面中被使用换衬。除此之外,React認(rèn)為一個(gè)組件還應(yīng)該具備以下三個(gè)特征:
- 可組合:能夠和其他組件一起使用
- 可維護(hù):由于每個(gè)組件只包含自己內(nèi)部的邏輯证芭,因此更容易被維護(hù)
- 可測(cè)試:測(cè)試單個(gè)組件內(nèi)部的邏輯相較于測(cè)試整體UI要更加容易
結(jié)論
React接管了開(kāi)發(fā)UI中最為復(fù)雜的局部更新數(shù)據(jù)的部分瞳浦。同時(shí),引入了組件化的開(kāi)發(fā)思想废士,從另一個(gè)角度構(gòu)建了前端UI界面叫潦。
原文:http://www.infoq.com/cn/articles/subversion-front-end-ui-development-framework-react