【譯】利用js原生方法替換react component實現性能提高

原文連接
https://medium.com/missive-ap...
原做者
Philippe Lehoux

利用js原生方法替換react component實現性能提高

如今咱們正在用React實現一個具備郵件收發和即時聊天功能的客戶端工具。

如圖所示，經過鼠標和鍵盤的上下箭頭能夠從左側的導航欄切換不一樣的對話。爲了防止用戶感受卡頓，全部的動做都須要在毫秒級完成。

一段對話可能包含成千上百條的評論、郵件和各類各樣的事件，而全部的這些內容都由各類組件實現。爲了提高在不一樣對話間切換時的渲染速度，咱們開始着手將一些stateful組件變爲stateless組件（此處原文叫作Function component）。

舉個栗子，以前的一個組件是這樣的：

class Avatar extends React.Component {
  render() {
    return <img src={this.props.url} />;
  }
}

通過轉換以後變爲：

const Avatar = (props) => {
  return <img src={props.url} />;
}

其實一個Functional component就是一個簡單的js函數，這個函數返回要渲染的元素。Functional component也被稱爲stateless組件。

咱們認爲經過將stateful組件變爲stateless組件後性能會有立竿見影的提高，由於當咱們使用stateful組件時，在經過導航切換不一樣對話時React會不斷的進行上百次的mount和unmount處理，而stateless自己只是基礎的js函數，它的觸發就像觸發生命週期函數同樣簡單，避免了屢次的mount和unmount處理，從而節省了渲染時間。

然而理想是豐滿的，現實是殘酷的。。。

那麼咱們要怎麼才能跳過React的內部機制，不將stateless組件的內容經過react componet渲染，而是直接經過調用函數的方式渲染呢？

其實很簡單，咱們只須要改變一下調用方式便可：

ReactDOM.render(
   <div>
-    <Avatar url={avatarUrl} />
+    {Avatar({ url: avatarUrl })}
     <div>{commentBody}</div>
   </div>,
   mountNode
 );

 // Compiled JavaScript
 ReactDOM.render(React.createElement(
   'div',
   null,
-  React.createElement(Avatar, { url: avatarUrl }),
+  Avatar({ url: avatarUrl }),
   React.createElement(
     'div',
     null,
     commentBody
   )
 ), mountNode);

經過性能測試能夠看出若是隻是經過將stateful組件改成stateless組件，而不改變調用方式，渲染速度只提高了6%；而改變調用方式後，速度提高了45%。

就像上面的性能測試中展示出來的同樣，這些修改很適用於提高像咱們的應用同樣經過普通的stateful組件方式渲染會觸發過多的mount和unmount事件的應用場景。