為什么使用react

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

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

一. 函數(shù)式編程

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

二虛擬DOM

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

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

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

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

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