為什么使用react

Towers 發(fā)布于2019-08-22 18:09 / 2987人閱讀

摘要：為什么會(huì)慢呢因?yàn)閷?duì)的修改為影響網(wǎng)頁(yè)的用戶(hù)界面，重繪頁(yè)面是一項(xiàng)昂貴的操作。太多的操作會(huì)導(dǎo)致一系列的重繪操作，為了確保執(zhí)行結(jié)果的準(zhǔn)確性，所有的修改操作是按順序同步執(zhí)行的?；亓鞑僮髦饕獣?huì)發(fā)生在幾種情況下當(dāng)對(duì)節(jié)點(diǎn)執(zhí)行新增或者刪除操作時(shí)。

一. 函數(shù)式編程

 React 把用戶(hù)界面抽象成一個(gè)個(gè)組件，如按鈕組件 Button、對(duì)話框組件 Dialog、日期組件 Calendar。
 開(kāi)發(fā)者通過(guò)組合這些組件，最終得到功能豐富、可交互的頁(yè)面。通過(guò)引入 JSX 語(yǔ)法，復(fù)用組件變得非常容易，
 同時(shí)也能保證組件結(jié)構(gòu)清晰。有了組件這層抽象，React 把代碼和真實(shí)渲染目標(biāo)隔離開(kāi)來(lái)，除了可以在瀏覽器
 端渲染到 DOM 來(lái)開(kāi)發(fā)網(wǎng)頁(yè)外，還能用于開(kāi)發(fā)原生移動(dòng)應(yīng)用。

二虛擬DOM

DOM操作的效率是很低的，而且不是一般的慢，而且這也是引發(fā)性能問(wèn)題的常見(jiàn)問(wèn)題之一。為什么會(huì)慢呢？
因?yàn)閷?duì) DOM的修改為影響網(wǎng)頁(yè)的用戶(hù)界面，重繪頁(yè)面是一項(xiàng)昂貴的操作。太多的DOM操作會(huì)導(dǎo)致一系列的重
繪操作，為了確保執(zhí)行結(jié)果的準(zhǔn)確性，所有的修改操作是按順序同步執(zhí)行的。我們稱(chēng)這個(gè)過(guò)程叫做回流
（reflow），同時(shí)這也是最昂貴的瀏覽器操作之一?；亓鞑僮髦饕獣?huì)發(fā)生在幾種情況下：

當(dāng)對(duì)DOM節(jié)點(diǎn)執(zhí)行新增或者刪除操作時(shí)。

動(dòng)態(tài)設(shè)置一個(gè)樣式時(shí)（比如element.style.width="10px"）。

當(dāng)獲取一個(gè)必須經(jīng)過(guò)計(jì)算的尺寸值時(shí)，比如訪問(wèn)offsetWidth、clientHeight或者其他需要經(jīng)過(guò)計(jì)算的CSS值（在兼容DOM的瀏覽器中，可以通過(guò)getComputedStyle函數(shù)獲?。辉贗E中，可以通過(guò)currentStyle屬性獲?。?。解決問(wèn)題的關(guān)鍵，就是限制通過(guò)DOM操作所引發(fā)回流的次數(shù)。大部分瀏覽器都不會(huì)在JavaScript的執(zhí)行過(guò)程中更新DOM。相應(yīng)的，這些瀏覽器將對(duì)對(duì)DOM的操作放進(jìn)一個(gè)隊(duì)列，并在JavaScript腳本執(zhí)行完畢以后按順序一次執(zhí)行完畢。也就是說(shuō)，在JavaScript執(zhí)行的過(guò)程中，用戶(hù)不能和瀏覽器進(jìn)行互動(dòng)，直到一個(gè)回流操作被執(zhí)行。（失控腳本對(duì)話框會(huì)觸發(fā)回流操作，因?yàn)樗麍?zhí)行了一個(gè)中止JavaScript執(zhí)行的操作，此時(shí)會(huì)對(duì)用戶(hù)界面進(jìn)行更新）

真實(shí)頁(yè)面對(duì)應(yīng)一個(gè) DOM 樹(shù)。在傳統(tǒng)頁(yè)面的開(kāi)發(fā)模式中，每次需要更新頁(yè)面時(shí)，都要手動(dòng)操作DOM進(jìn)行更新。DOM 操作非常昂貴。我們都知道在前端開(kāi)發(fā)中，性能消耗最大的就是 DOM 操作，而且這部分代碼會(huì)讓整體項(xiàng)目的代碼變得難以維護(hù)。React 把真實(shí) DOM 樹(shù)轉(zhuǎn)換成 JavaScript 對(duì)象樹(shù)，每次數(shù)據(jù)更新后，重新計(jì)算 Virtual DOM，并和上一次生成的 Virtual DOM 做對(duì)比，對(duì)發(fā)生變化的部分做批量更新。React 也提供了直觀的 houldComponentUpdate 生命周期回調(diào)，來(lái)減少數(shù)據(jù)變化后不必要的 Virtual DOM 對(duì)比過(guò)程，以保證性能。我們說(shuō) Virtual DOM 提升了 React 的性能，但這并不是 React 的唯一亮點(diǎn)。此外，Virtual DOM的渲染方式也比傳統(tǒng) DOM 操作好一些，但并不明顯，因?yàn)閷?duì)比 DOM 節(jié)點(diǎn)也是需要計(jì)算資源的。它最大的好處其實(shí)還在于方便和其他平臺(tái)集成，比如 react-native 是基于 Virtual DOM 渲染出原生控件，因?yàn)?React 組件可以映射為對(duì)應(yīng)的原生控件。在輸出的時(shí)候，是輸出 Web DOM，還是 Android 控件，還是 iOS 控件，就由平臺(tái)本身決定了。因此，react-native 有一個(gè)口號(hào)——LearnOnce，Write Anywhere。