前端優化反應：虛擬dom解釋

時間 2019-11-12

標籤前端優化反應虛擬 dom 解釋欄目 HTML 简体版

原文原文鏈接

瞭解反應的虛擬dom，並使用此知識加快應用程序。在這個全面入門的框架內部入門中，咱們將揭開JSX的神祕化，讓您展現如何作出反應，解釋如何找到瓶頸，並分享一些避免常見錯誤的提示。javascript

反應的緣由之一一直動搖着前端世界，並無降低的跡象，它平易近人的學習曲線：在你繞着頭後，學習曲線。n.JSX還有整個「國家vs.道具「概念，你能夠走了。html

若是你已經熟悉了反應工做的方式，你能夠直接跳到「修理東西」.前端

可是要真正掌握本身的反應，你須要思考反應。這篇文章是想幫你解決這個問題。看看所作的反應表咱們的項目之一:java

一個巨大的反應表ebay業務.react

使用數百條動態的、多層的行，理解框架的細點對於保證用戶體驗的順利進行相當重要。git

當事情發生的時候你確定會感受到。輸入字段會獲得laggy，複選框會先檢查一下，情態動詞會出現困難的時候。github

爲了解決這些問題，咱們須要覆蓋整個旅程，一個反應組件從定義到您定義(而後更新)頁面上。繫好安全帶！web

在JSX後面

過程當中已知的前端圈爲「transpiling」，即便「編譯」將是一個更正確的術語。算法

反應開發人員敦促您在編寫組件時使用名爲JSX的html和javascript組合。然而，瀏覽器對於JSX及其語法沒有任何線索。瀏覽器只理解簡單javascript，因此必須將JSX轉換成它。下面是一個div它有一個類和一些內容：chrome

<div className='cn'>
  Content!
</div>

「正式」javascript中的相同代碼只是一個帶有若干參數的函數調用：

React.createElement(
  'div',
  { className: 'cn' },
  'Content!'
);

讓咱們仔細看看這些論點。二是一個元素類型。對於html標記，它將是一個帶有標記名的字符串。第二個參數是一個對象，它包含全部元素屬性。若是沒有空對象，它也能夠是一個空對象。下面全部的論點都是元素的孩子。元素中的文本也做爲子元素計數，所以字符串「內容！」做爲函數調用的第三個參數放置。

你已經能夠想象當咱們有更多孩子時會發生什麼：

<div className='cn'>
  Content 1!
  <br />
  Content 2!
</div>

React.createElement(
  'div',
  { className: 'cn' },
  'Content 1!',              // 1st child
  React.createElement('br'), // 2nd child
  'Content 2!'               // 3rd child
)

咱們的函數如今有五個參數：元素類型、屬性對象和三個子元素。由於咱們的一個孩子也是一個衆所周知的反應，它將被描繪成一個函數調用。

如今，咱們已經覆蓋了兩種類型的兒童：平原String或者另外一個電話React.createElement。然而，其餘價值也能夠做爲論據：

基元false, null, undefined以及true
陣列
反應組件

數組是用來做爲一個參數分組並傳遞的子元素：

React.createElement(
  'div',
  { className: 'cn' },
  ['Content 1!', React.createElement('br'), 'Content 2!']
)

固然，反應的力量來自於html規範中描述的標籤，可是來自用戶建立的組件，例如：

function Table({ rows }) {
  return (
    <table>
      {rows.map(row => (
        <tr key={row.id}>
          <td>{row.title}</td>
        </tr>
      ))}
    </table>
  );
}

組件容許咱們將模板破壞成可重用的塊。在一個示例中，「功能」上面的組件接受數組行數據的對象數組，並返回單個React.createElement請呼叫<table>元素及其行做爲子。

每當咱們把組件放置到這樣的佈局中：

<Table rows={rows} />

從瀏覽器的角度來看，咱們寫了這篇文章：

React.createElement(Table, { rows: rows });

注意，此次咱們的第一個參數不是String描述一個html元素，可是對咱們定義的函數的引用當咱們編碼咱們的組件時。咱們的屬性如今是咱們的props.

將組件放在頁面上

因此，咱們已經將全部的JSX組件都轉換成純javascript，如今咱們有了一系列函數調用，其中還有其餘函數調用，還有其餘函數調用…如何將它們轉換成構成web頁面的dom元素？

爲了這個，咱們有一個ReactDOM圖書館及其render方法：

function Table({ rows }) { /* ... */ } // defining a component

// rendering a component
ReactDOM.render(
  React.createElement(Table, { rows: rows }), // "creating" a component
  document.getElementById('#root') // inserting it on a page
);

什麼時候ReactDOM.render被稱爲React.createElement最後調用了它，它返回如下對象：

// There are more fields, but these are most important to us
{
  type: Table,
  props: {
    rows: rows
  },
  // ...
}

這些對象構成了虛擬dom在反應上的意義。

它們將在全部進一步渲染中相互比較，最終轉換爲實dom(與虛擬).

下面是另外一個例子：此次使用div具備類屬性和若干子屬性：

React.createElement(
  'div',
  { className: 'cn' },
  'Content 1!',
  'Content 2!',
);

變成：

{
  type: 'div',
  props: {
    className: 'cn',
    children: [
      'Content 1!',
      'Content 2!'
    ]
  }
}

注意，過去使用的是單獨的參數React.createElement函數在a/s之下找到了它們的位置children內鑰匙props。因此它無所謂若是孩子做爲數組或參數列表傳遞-在生成的虛擬dom對象中，它們最終都會一塊兒結束。

此外，咱們能夠將孩子直接添加到在代碼中，結果仍然是同樣的：

<div className='cn' children={['Content 1!', 'Content 2!']} />

構建了虛擬dom對象以後，ReactDOM.render將嘗試將其轉換爲咱們瀏覽器能夠根據這些規則顯示的Dom節點：

若是type屬性持有弦使用標記名稱-建立一個標記，其中列出了下面列出的全部屬性props.
若是咱們有一個函數或類type-調用它並遞歸地重複一個結果。
若是有什麼children下props-逐個重複這個過程，並將結果放置在父節點的Dom節點內。

所以，咱們獲得如下html(對於咱們的表示例)：

<table>
  <tr>
    <td>Title</td>
  </tr>
  ...
</table>

重建在

在實踐中，render一般會在根元素上調用一次，而且進一步更新經過state.

注意：「從新」在標題中！當咱們想要作的時候，真正的反應就開始了更新一頁沒有取代一切。咱們怎麼能作到這一點也沒有什麼辦法。讓咱們從最簡單的一個調用開始ReactDOM.render對於同一個節點再一次.

// Second call
ReactDOM.render(
  React.createElement(Table, { rows: rows }),
  document.getElementById('#root')
);

此次，上面的代碼將與咱們已經看到的不一樣。響應將從零開始建立全部Dom節點，並將它們放到頁面上，而響應將開始和解(或「diffing」)算法來肯定必須更新節點樹的哪些部分，而且能夠保持未受影響。

那麼，它是如何工做的呢？只有幾個簡單的場景和理解他們咱們的優化將會幫助咱們不少。請記住，咱們如今正在查看做爲響應虛擬dom中節點的表示形式的對象。

設想1：type是一個字符串，type在電話裏保持相同的距離props也沒有改變。

// before update
{ type: 'div', props: { className: 'cn' } }

// after update
{ type: 'div', props: { className: 'cn' } }

這是最簡單的例子：dom保持不變。

設想2：type仍然是同一個字符串，props是不一樣的。

// before update:
{ type: 'div', props: { className: 'cn' } }

// after update:
{ type: 'div', props: { className: 'cnn' } }

做爲咱們type仍然表示html元素響應知道如何經過標準的Dom調用更改其屬性，而無需從一種樹中刪除節點。

設想3：type已經變了不一樣String或從String到組件上。

// before update:
{ type: 'div', props: { className: 'cn' } }

// after update:
{ type: 'span', props: { className: 'cn' } }

當響應如今看到類型不一樣時，它甚至不會嘗試更新咱們的節點：舊元素將會被刪除(下裝) 和全部的孩子一塊兒。所以，對於徹底不一樣的高級別dom樹的元素替換一個元素可能很是昂貴。幸運的是，在現實世界裏不多發生這種事。

記住反應用途是很重要的===(三倍等於)比較type值，因此它們必須是相同的實例同一類或同功能。

接下來的場景更有趣，由於這就是咱們常用反應的方式。

情景4：type是一個組件。

// before update:
{ type: Table, props: { rows: rows } }

// after update:
{ type: Table, props: { rows: rows } }

「但是什麼都沒變！」你也許會說，你會錯的。

注意組件的render(只有類組件已顯式定義了此方法)，但與ReactDOM.render。「渲染」這個詞的確在反應世界中確實被過分使用了。

若是type是對函數或類(即正則反應組件)的引用，而且咱們開始了樹的調整過程，而後反應老是試圖看內組件以確保返回的值返回render沒有改變(預防反作用的一種預防)。沖洗和重複每個組件下樹-是的，複雜的渲染也可能變得昂貴！

照顧孩子

除了上面描述的四個常見場景外，咱們還須要考慮當元素有多個子時的響應行爲。咱們假設咱們有這樣一個元素：

// ...
props: {
  children: [
      { type: 'div' },
      { type: 'span' },
      { type: 'br' }
  ]
},
// ...

咱們想把這些孩子們洗牌：

// ...
props: {
  children: [
    { type: 'span' },
    { type: 'div' },
    { type: 'br' }
  ]
},
// ...

而後呢？

若是「diffing」，反應就會看到任何內部陣列props.children它開始比較它中的元素與它以前看到的數組中的元素，而後依次查看它們：索引0將與索引0、索引1和索引1等進行比較。對於每一對，反應將應用上面描述的規則集。在咱們的例子中，它看到div變成了一個span因此設想3將被應用。這並非很是有效的：想象一下，咱們已經從1000行表中刪除了第一行。反應將不得不「更新」剩餘999名兒童，由於他們的內容如今不會相等，若是與先前的表明指數相比，則是相等的。

幸運的是，反應有內建來解決這個問題。若是元素具備key屬性將比較元素的值。key不是按指數來的。只要鑰匙是獨一無二的，反應就會圍繞着元素移動無將它們從Dom樹中移除而後將它們放到後面(在響應中已知的過程爲安裝/卸載).

// ...
props: {
  children: [ // Now React will look on key, not index
    { type: 'div', key: 'div' },
    { type: 'span', key: 'span' },
    { type: 'br', key: 'bt' }
  ]
},
// ...

當狀態發生變化時

直到如今咱們才接觸到props反應哲學的一部分，但忽略了state。下面是一個簡單的「有狀態」組件：

class App extends Component {
  state = { counter: 0 }

  increment = () => this.setState({
    counter: this.state.counter + 1,
  })

  render = () => (<button onClick={this.increment}>
    {'Counter: ' + this.state.counter}
  </button>)
}

因此，咱們有一個counter密鑰在咱們的狀態對象中。單擊按鈕時會增長其值並更改按鈕文本。可是當咱們這麼作時，在一個Dom裏發生了什麼？其中哪些部分將從新計算和更新？

呼叫this.setState也會致使從新渲染，但不會致使整個頁面，可是只有一個組件自己及其孩子。父母和兄弟姐妹都是免費的。當咱們擁有一棵大樹時，這很方便，咱們只想重繪它的一部分。

釘住問題

咱們已經準備好了小演示應用程序因此在咱們去修它們以前，你能夠看到野外最多見的問題。您能夠查看它的源代碼。這裏。你也須要反應開發工具因此請確保您安裝了它們爲您的瀏覽器。

咱們首先要看的是哪些元素和什麼時候使虛擬dom被更新。導航到瀏覽器的dev工具中的響應面板，並選擇「突出更新」複選框：

在chrome中使用「突出更新」複選框進行響應

如今嘗試將一行添加到表中。正如您所看到的，在頁面上每一個元素周圍都出現了邊框。這意味着每次添加一行時，響應都是計算和比較整個虛擬dom樹。如今嘗試在一行中打一個計數器按鈕。您能夠看到虛擬dom在更改時如何更新state-只有有關因素及其子女受到影響。

對問題可能發生的地方作出反應，但告訴咱們細節：尤爲是更新問題意味着「diffing」元素或掛載/從新設置它們。爲了找到更多的信息，咱們須要使用反應的內置探查器(注意它不會在生產模式中工做)。

加?react_perf對於您的應用程序的任何url，並進入chrome瀏覽器中的「性能」選項卡。點擊錄製按鈕並點擊桌子周圍。添加一些行，更改一些計數器，而後點擊「中止」。

反應DevTools‘性能’選項卡

在所產生的輸出中，咱們對「用戶計時」感興趣。縮放到時間線直到看到「反應樹協調」組及其孩子。這些都是咱們的組件的名稱[最新狀況]或[山]在他們旁邊。

咱們的大部分業績問題都屬於這兩類。

不管是組件(以及來自它的全部分支)都是出於某些緣由從新安裝在每一個更新上，咱們不但願它(從新安裝慢)，或者咱們正在執行昂貴的和解，大型分支，儘管沒有任何改變。

修理東西：安裝/安裝

如今，當咱們發現了一些關於如何作出反應決定更新虛擬dom並瞭解如何查看幕後發生的事情時，咱們終於準備好修復事情了！首先，讓咱們來處理坐騎/unmounts。

若是您僅僅考慮到任何元素/組件的多個子元素都表示爲列陣內部。

考慮到這一點：

<div>
  <Message />
  <Table />
  <Footer />
</div>

在咱們的虛擬dom中，它將被表示爲：

// ...
props: {
  children: [
    { type: Message },
    { type: Table },
    { type: Footer }
  ]
}
// ...

咱們有一個簡單的Message這是一個div持有一些文本(想一想您的花園品種通知)和一個巨大的Table跨越，比方說，1000+行。他們都是被包圍的孩子div因此它們被置於下面props.children在父節點上，它們不會碰巧有一個鍵。並且反應不會提醒咱們經過控制檯警告來分配密鑰，由於子元素正在被傳遞給父級React.createElement做爲參數列表，而不是數組。

如今咱們的用戶已經駁回了通知，Message從樹上移走。Table以及Footer剩下的都是。

// ...
props: {
  children: [
    { type: Table },
    { type: Footer }
  ]
}
// ...

反應如何看？它把它看做是一個改變形狀的兒童的數組：children[0]持有Message如今它佔據了Table。沒有比與之相比的鍵，因此比較type由於它們都引用函數(以及異類函數)n.unmounts總體Table而後再掛載它，渲染全部的孩子：1000+行！

因此，您能夠添加惟一的鍵(可是在這個特定的例子中使用鍵不是最好的選擇)，或者去尋找一個更聰明的技巧：使用短路布爾估計這是javascript和許多其餘現代語言的特色。看：

// Using a boolean trick
<div>
  {isShown && <Message />}
  <Table />
  <Footer />
</div>

即便Message走出畫面，props.children父母div仍會持有3元素，children[0]有價值false(布爾基)。記住true/false, null以及undefined是虛擬dom對象的全部容許值type財產？咱們最終得出了這樣的結論：

// ...
props: {
  children: [
    false, //  isShown && <Message /> evaluates to false
    { type: Table },
    { type: Footer }
  ]
}
// ...

因此，Message或者不是，咱們的索引不會改變，Table固然，將仍然與Table(指組件的引用)type不管如何開始和解，可是僅僅比較虛擬dom比刪除Dom節點和從頭開始建立它們更快。.

如今讓咱們來看看更進化的東西。咱們知道你喜歡特設s.一個高階組件是一個函數，它將組件做爲參數，作一些事情，並返回一個不一樣的函數：

function withName(SomeComponent) {
  // Computing name, possibly expensive...
  return function(props) {
    return <SomeComponent {...props} name={name} />;
  }
}

這是一個很是常見的模式，但您須要當心處理它。考慮：

class App extends React.Component() {
  render() {
    // Creates a new instance on each render
    const ComponentWithName = withName(SomeComponent);
    return <SomeComponentWithName />;
  }
}

咱們正在建立一個父的內部的一個特殊的render方法。當咱們從新渲染樹時，咱們的虛擬dom看起來就像這樣：

// On first render:
{
  type: ComponentWithName,
  props: {},
}

// On second render:
{
  type: ComponentWithName, // Same name, but different instance
  props: {},
}

如今，響應將喜歡只運行一個基於上的算法ComponentWithName可是，正如這個時候，同一個名稱引用了不一樣實例三重相等比較失敗，而不是和解，徹底從新安裝必須發生。注意，它也會致使國家失去正如這裏所描述的。幸運的是，它很容易修復：您須要始終在render:

// Creates a new instance just once
const ComponentWithName = withName(Component);

class App extends React.Component() {
  render() {
    return <ComponentWithName />;
  }
}

修復事物：更新

因此，如今咱們確保不要從新安裝東西，除非必要。然而，對於位於中的樹根附近的組件的任何更改都會致使全部子樹的從新鏈接和協調。結構複雜，價格昂貴，並且經常能夠避免。

Would be great to have a way to tell React not to look at a certain branch, as we are confident there were no changes in it.

這種方法存在，它涉及到一種稱爲shouldComponentUpdate它是組件的生命週期。此方法稱爲之前每一個對組件的調用render並接收道具和狀態的新值。而後咱們能夠自由地將它們與當前值進行比較，並決定是否應該更新組件(返回)。true或false那就是。若是咱們返回false反應不會從新渲染所涉組件，而且不會查看其子元素。

一般比較兩組props以及state簡單的淺層比較是足夠的：若是頂級的值不一樣，咱們沒必要更新。淺比較不是javascript的特性，但卻有不少公用事業爲了那個。

經過他們的幫助，咱們能夠編寫咱們的代碼以下：

class TableRow extends React.Component {

  // will return true if new props/state are different from old ones
  shouldComponentUpdate(nextProps, nextState) {
    const { props, state } = this;
    return !shallowequal(props, nextProps)
           && !shallowequal(state, nextState);
  }

  render() { /* ... */ }
}

可是您甚至沒必要本身編碼，由於響應中包含了這個特性，類調用 React.PureComponent。它相似於React.Component只有shouldComponentUpdate已爲您實現了淺層道具/狀態比較。

聽起來好像是個沒腦子的，只是交換Component爲PureComponent在extends你班的一部分定義並享受效率。不過別這麼快！考慮這些例子：

<Table
    // map returns a new instance of array so shallow comparison will fail
    rows={rows.map(/* ... */)}
    // object literal is always "different" from predecessor
    style={ { color: 'red' } }
    // arrow function is a new unnamed thing in the scope, so there will always be a full diffing
    onUpdate={() => { /* ... */ }}
/>

上面的代碼片斷演示了三個最多見的代碼反模式。儘可能避開他們！