React在前端界一直很流行，並且學起來也不是很難，只須要學會JSX、理解State和Props，而後就能夠愉快的玩耍了，但想要成爲React的專家你還須要對React有一些更深刻的理解，但願本文對你有用。html

這是Choerodon的一個前端頁面前端

在複雜的前端項目中一個頁面可能包含上百個狀態，對React框架理解得更精細一些對前端優化很重要。曾經這個頁面點擊一條記錄展現詳情會卡頓數秒，而這僅僅是前端渲染形成的。react

爲了可以解決這些問題，開發者須要瞭解React組件從定義到在頁面上呈現（而後更新）的整個過程。git

React在編寫組件時使用混合HTML和JavaScript的一種語法（稱爲JSX）。可是，瀏覽器對JSX及其語法一無所知，瀏覽器只能理解純JavaScript，所以必須將JSX轉換爲HTML。這是一個div的JSX代碼，它有一個類和一些內容：github

<div className='cn'>
  文本
</div>
複製代碼

在React中將這段jsx變成普通的js以後它就是一個帶有許多參數的函數調用：算法

React.createElement(
  'div',
  { className: 'cn' },
  '文本'
);
複製代碼

它的第一個參數是一個字符串，對應html中的標籤名，第二個參數是它的全部屬性所構成的對象，固然，它也有多是個空對象，剩下的參數都是這個元素下的子元素，這裏的文本也會被看成一個子元素，因此第三個參數是 「文本」 。npm

到這裏你應該就能想象這個元素下有更多children的時候會發生什麼。api

<div className='cn'>
  文本1
  <br />
  文本2
</div>
複製代碼

React.createElement(
  'div',
  { className: 'cn' },
  '文本1',              // 1st child
  React.createElement('br'), // 2nd child
  '文本1'               // 3rd child
)
複製代碼

目前的函數有五個參數：元素的類型，所有屬性的對象和三個子元素。因爲一個child也是React已知的HTML標籤，所以它也將被解釋成函數調用。數組

到目前爲止，本文已經介紹了兩種類型的child參數，一種是string純文本，一種是調用其餘的React.createElement函數。其實，其餘值也能夠做爲參數，好比：瀏覽器

基本類型 false，null，undefined和 true
數組
React組件

使用數組是由於能夠將子組件分組並做爲一個參數傳遞：

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

固然，React的強大功能不是來自HTML規範中描述的標籤，而是來自用戶建立的組件，例如：

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

組件容許開發者將模板分解爲可重用的塊。在上面的「純函數」組件的示例中，組件接受一個包含錶行數據的對象數組，並返回React.createElement對

元素及其行做爲子元素的單個調用。

每當開發者將組件放入JSX佈局中時它看上去是這樣的：

<Table rows={rows} />
複製代碼

但從瀏覽器角度，它看到的是這樣的：

React.createElement(Table, { rows: rows });
複製代碼

請注意，此次的第一個參數不是以string描述的HTML元素，而是組件的引用（即函數名）。第二個參數是傳入該組件的props對象。

將組件放在頁面上

如今，瀏覽器已經將全部JSX組件轉換爲純JavaScript，如今瀏覽器得到了一堆函數調用，其參數是其餘函數調用，還有其餘函數調用......如何將它們轉換爲構成網頁的DOM元素？

爲此，開發者須要使用ReactDOM庫及其render方法：

function Table({ rows }) { /* ... */ } // 組件定義

// 渲染一個組件
ReactDOM.render(
  React.createElement(Table, { rows: rows }), // "建立" 一個 component
  document.getElementById('#root') // 將它放入DOM中
);
複製代碼

當ReactDOM.render被調用時，React.createElement最終也會被調用，它返回如下對象：

// 這個對象裏還有不少其餘的字段，但如今對開發者來講重要的是這些。
{
  type: Table,
  props: {
    rows: rows
  },
  // ...
}
複製代碼

這些對象構成了React意義上的Virtual DOM

它們將在全部進一步渲染中相互比較，並最終轉換爲真正的DOM（與Virtual DOM對比）。

這是另外一個例子：此次有一個div具備class屬性和幾個子節點：

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

變成：

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

全部的傳入的展開函數，也就是React.createElement除了第一第二個參數剩下的參數都會在props對象中的children屬性中，無論傳入的是什麼函數，他們最終都會做爲children傳入props中。

並且，開發者能夠直接在JSX代碼中添加children屬性，將子項直接放在children中，結果仍然是相同的：

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

在Virtual DOM對象被創建出來以後ReactDOM.render會嘗試按如下規則把它翻譯成瀏覽器可以看得懂的DOM節點：

若是Virtual DOM對象中的type屬性是一個string類型的tag名稱，就建立一個tag，包含props裏的所有屬性。
若是Virtual DOM對象中的type屬性是一個函數或者class，就調用它，它返回的可能仍是一個Virtual DOM而後將結果繼續遞歸調用此過程。
若是props中有children屬性，就對children中的每一個元素進行以上過程，並將返回的結果放到父DOM節點中。

最後，瀏覽器得到了如下HTML（對於上述table的例子）：

<table>
  <tr>
    <td>Title</td>
  </tr>
  ...
</table>
複製代碼

重建DOM

接下瀏覽器要「重建」一個DOM節點，若是瀏覽器要更新一個頁面，顯然，開發者並不但願替換頁面中的所有元素，這就是React真正的魔法了。如何才能實現它？先從最簡單的方法開始，從新調用這個節點的ReactDOM.render方法。

// 第二次調用
ReactDOM.render(
  React.createElement(Table, { rows: rows }),
  document.getElementById('#root')
);
複製代碼

這一次，上面的代碼執行邏輯將與看到的代碼不一樣。React不是從頭開始建立全部DOM節點並將它們放在頁面上，React將使用「diff」算法，以肯定節點樹的哪些部分必須更新，哪些部分能夠保持不變。

那麼它是怎樣工做的？只有少數幾個簡單的狀況，理解它們將對React程序的優化有很大幫助。請記住，接下來看到的對象是用做表示React Virtual DOM中節點的對象。

▌Case 1：type是一個字符串，type在調用之間保持不變，props也沒有改變。

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

// after update
{ type: 'div', props: { className: 'cn' } }
複製代碼

這是最簡單的狀況：DOM保持不變。

▌Case 2：type仍然是相同的字符串，props是不一樣的。

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

// after update:
{ type: 'div', props: { className: 'cnn' } }
複製代碼

因爲type仍然表明一個HTML元素，React知道如何經過標準的DOM API調用更改其屬性，而無需從DOM樹中刪除節點。

▌Case 3：type已更改成不一樣的組件String或從String組件更改成組件。

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

// after update:
{ type: 'span', props: { className: 'cn' } }
複製代碼

因爲React如今看到類型不一樣，它甚至不會嘗試更新DOM節點：舊元素將與其全部子節點一塊兒被刪除（unmount）。所以，在DOM樹上替換徹底不一樣的元素的代價會很是之高。幸運的是，這在實際狀況中不多發生。

重要的是要記住React使用===（三等）來比較type值，所以它們必須是同一個類或相同函數的相同實例。

下一個場景更有趣，由於這是開發者最常使用React的方式。

▌Case 4：type是一個組件。

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

// after update:
{ type: Table, props: { rows: rows } }
複製代碼

你可能會說，「這好像沒有任何變化」，但這是不對的。

若是type是對函數或類的引用（即常規React組件），而且啓動了樹diff比較過程，那麼React將始終嘗試查看組件內部的全部child以確保render的返回值沒有更改。即在樹下比較每一個組件 - 是的，複雜的渲染也可能變得昂貴！

組件中的children

除了上面描述的四種常見場景以外，當元素有多個子元素時，開發者還須要考慮React的行爲。假設有這樣一個元素：

// ...
props: {
  children: [
      { type: 'div' },
      { type: 'span' },
      { type: 'br' }
  ]
},
// ...
複製代碼

開發者開發者想將它從新渲染成這樣(span和div交換了位置)：

// ...
props: {
  children: [
    { type: 'span' },
    { type: 'div' },
    { type: 'br' }
  ]
},
// ...
複製代碼

那麼會發生什麼？

當React看到裏面的任何數組類型的props.children，它會開始將它中的元素與以前看到的數組中的元素按順序進行比較：index 0將與index 0，index 1與index 1進行比較，對於每對子元素，React將應用上述規則集進行比較更新。在以上的例子中，它看到div變成一個span這是一個情景3中的狀況。但這有一個問題：假設開發者想要從1000行表中刪除第一行。React必須「更新」剩餘的999個孩子，由於若是與先前的逐個索引表示相比，他們的內容如今將不相等。

幸運的是，React有一種內置的方法來解決這個問題。若是元素具備key屬性，則元素將經過key而不是索引進行比較。只要key是惟一的，React就會移動元素而不將它們從DOM樹中移除，而後將它們放回（React中稱爲掛載/卸載的過程）。

// ...
props: {
  children: [ // 如今react就是根據key，而不是索引來比較了
    { type: 'div', key: 'div' },
    { type: 'span', key: 'span' },
    { type: 'br', key: 'bt' }
  ]
},
// ...
複製代碼

當狀態改變時

到目前爲止，本文只觸及了props，React哲學的一部分，但忽略了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>)
}
複製代碼

如今，上述例子中的state對象有一個counter屬性。單擊按鈕會增長其值並更改按鈕文本。可是當用戶點擊時，DOM會發生什麼？它的哪一部分將被從新計算和更新？

調用this.setState也會致使從新渲染，但不會致使整個頁面重渲染，而只會致使組件自己及其子項。父母和兄弟姐妹均可以倖免於難。

修復問題

本文準備了一個DEMO，這是修復問題前的樣子。你能夠在這裏查看其源代碼。不過在此以前，你還須要安裝React Developer Tools。

打開demo要看的第一件事是哪些元素以及什麼時候致使Virtual DOM更新。導航到瀏覽器的Dev Tools中的React面板，點擊設置而後選擇「Highlight Updates」複選框：

如今嘗試在表中添加一行。如你所見，頁面上的每一個元素周圍都會出現邊框。這意味着每次添加行時，React都會計算並比較整個Virtual DOM樹。如今嘗試按一行內的計數器按鈕。你將看到Virtual DOM如何更新（state僅相關元素及其子元素更新）。

React DevTools暗示了問題可能出現的地方，但沒有告訴開發者任何細節：特別是有問題的更新是指元素「diff」以後有不一樣，仍是組件被unmount/mount了。要了解更多信息，開發者須要使用React的內置分析器（請注意，它不能在生產模式下工做）。

轉到Chrome DevTools中的「Performance」標籤。點擊record按鈕，而後點擊表格。添加一些行，更改一些計數器，而後點擊「Stop」按鈕。稍等一下子以後開發者會看到：

在結果輸出中，開發者須要關注「Timing」。縮放時間軸，直到看到「React Tree Reconciliation」組及其子項。這些都是組件的名稱，旁邊有[update]或[mount]。能夠看到有一個TableRow被mount了，其餘全部的TableRow都在update，這並非開發者想要的。

大多數性能問題都由[update]或[mount]引發

一個組件（以及組件下的全部東西）因爲某種緣由在每次更新時從新掛載，開發者不想讓它發生（從新掛載很慢），或者在大型分支上執行代價過大的重繪，即便組件彷佛沒有發生任何改變。

修復mount/unmount

如今，當開發者瞭解React如何決定更新Virtual DOM並知道幕後發生的事情時，終於準備好解決問題了！修復性能問題首先要解決 mount/unmount。

若是開發者將任何元素/組件的多個子元素在內部表示爲數組，那麼程序能夠得到很是明顯的速度提高。

考慮一下：

<div>
  <Message />
  <Table />
  <Footer />
</div>
複製代碼

在虛擬DOM中，將表示爲：

// ...
props: {
  children: [
    { type: Message },
    { type: Table },
    { type: Footer }
  ]
}
// ...
複製代碼

一個簡單的Message組件（是一個div帶有一些文本，像是豬齒魚的頂部通知）和一個很長的Table，比方說1000多行。它們都是div元素的child，所以它們被放置在父節點的props.children之下，而且它們沒有key。React甚至不會經過控制檯警告來提醒開發者分配key，由於子節點React.createElement做爲參數列表而不是數組傳遞給父節點。

如今，用戶已經關閉了頂部通知，因此Message從樹中刪除。Table、Footer是剩下的child。

// ...
props: {
  children: [
    { type: Table },
    { type: Footer }
  ]
}
// ...
複製代碼

React如何看待它？它將它視爲一系列改變了type的child：children[0]的type原本是Message，但如今他是Table。由於它們都是對函數（和不一樣函數）的引用，它會卸載整個Table並再次安裝它，渲染它的全部子代：1000多行！

所以，你能夠添加惟一鍵（但在這種特殊狀況下使用key不是最佳選擇）或者採用更智能的trick：使用 && 的布爾短路運算，這是JavaScript和許多其餘現代語言的一個特性。像這樣：

<div>
  {isShowMessage && <Message />}
  <Table />
  <Footer />
</div>
複製代碼

即便Message被關閉了(再也不顯示)，props.children父母div仍將擁有三個元素，children[0]具備一個值false（布爾類型）。還記得true/false, null甚至undefined都是Virtual DOM對象type屬性的容許值嗎？瀏覽器最終獲得相似這樣的東西：

// ...
props: {
  children: [
    false, // isShowMessage && <Message /> 短路成了false
    { type: Table },
    { type: Footer }
  ]
}
// ...
複製代碼

因此，無論Message是否被顯示，索引都不會改變，Table仍然會和Table比較，但僅僅比較Virtual DOM一般比刪除DOM節點並從中建立它們要快得多。

如今來看看更高級的東西。開發者喜歡HOC。高階組件是一個函數，它將一個組件做爲一個參數，添加一些行爲，並返回一個不一樣的組件（函數）：

function withName(SomeComponent) {
  return function(props) {
    return <SomeComponent {...props} name={name} />; } } 複製代碼

開發者在父render方法中建立了一個HOC 。當React須要從新渲染樹時，React 的Virtual DOM將以下所示：

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

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

如今，React只會在ComponentWithName上運行一個diff算法，可是此次同名引用了一個不一樣的實例，三等於比較失敗，必須進行徹底從新掛載。注意它也會致使狀態丟失，幸運的是，它很容易修復：只要返回的實例都是同一個就行了：

// 單例
const ComponentWithName = withName(Component);

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

修復update

如今瀏覽器已經確保不會從新裝載東西了，除非必要。可是，對位於DOM樹根目錄附近的組件所作的任何更改都將致使其全部子項的進行對比重繪。結構複雜，價格昂貴且常常能夠避免。

若是有辦法告訴React不要查看某個分支，那將是很好的，由於它沒有任何變化。

這種方式存在，它涉及一個叫shouldComponentUpdate的組件生命週期函數。React會在每次調用組件以前調用此方法，並接收props和state的新值。而後開發者能夠自由地比較新值和舊值之間的區別，並決定是否應該更新組件（返回true或false）。若是函數返回false，React將不會從新渲染有問題的組件，也不會查看其子組件。

一般比較兩組props和state一個簡單的淺層比較就足夠了：若是頂層屬性的值相同，瀏覽器就沒必要更新了。淺比較不是JavaScript的一個特性，但開發者不少方法來本身實現它，爲了避免重複造輪子，也可使用別人寫好的方法。

在引入淺層比較的npm包後，開發者能夠編寫以下代碼：

class TableRow extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    const { props, state } = this;
    return !shallowequal(props, nextProps)
           && !shallowequal(state, nextState);
  }
  render() { /* ... */ }
}
複製代碼

可是你甚至沒必要本身編寫代碼，由於React在一個名爲React.PureComponent的類中內置了這個功能，它相似於React.Component，只是shouldComponentUpdate已經爲你實現了淺層props/state比較。

或許你會有這樣的想法，能替換Component爲PureComponent就去替換。但開發者若是錯誤地使用PureComponent一樣會有從新渲染的問題存在，須要考慮下面三種狀況：

<Table
    // map每次都會返回一個新的數組實例，因此每次比較都是不一樣的
    rows={rows.map(/* ... */)}
    // 每一次傳入的對象都是新的對象，引用是不一樣的。
    style={ { color: 'red' } }
    // 箭頭函數也同樣，每次都是不一樣的引用。
    onUpdate={() => { /* ... */ }}
/>
複製代碼

上面的代碼片斷演示了三種最多見的反模式，請儘可能避免它們！

正確地使用PureComponent，你能夠在這裏看到全部的TableRow都被「純化」後渲染的效果。

可是，若是你火燒眉毛想要所有使用純函數組件，這樣是不對的。比較兩組props和state不是免費的，對於大多數基本組件來講甚至都不值得：運行shallowCompare比diff算法須要更多時間。

可使用此經驗法則：純組件適用於複雜的表單和表格，但它們一般會使按鈕或圖標等簡單元素變慢。

如今，你已經熟悉了React的渲染模式，接下來就開始前端優化之旅吧。

關於Choerodon豬齒魚

Choerodon豬齒魚是一個開源企業服務平臺，基於Kubernetes的容器編排和管理能力，整合DevOps工具鏈、微服務和移動應用框架，來幫助企業實現敏捷化的應用交付和自動化的運營管理的開源平臺，同時提供IoT、支付、數據、智能洞察、企業應用市場等業務組件，致力幫助企業聚焦於業務，加速數字化轉型。

你們也能夠經過如下社區途徑瞭解豬齒魚的最新動態、產品特性，以及參與社區貢獻：

官網：choerodon.io
論壇：forum.choerodon.io
Github：github.com/choerodon
微信公衆號：Choerodon豬齒魚
微博：Choerodon豬齒魚

深刻理解 React 的 Virtual DOM