【譯】利用js原生方法替換react component實(shí)現(xiàn)性能提升

piapia 發(fā)布于2019-08-21 12:00 / 1660人閱讀

摘要：原文鏈接原作者利用原生方法替換實(shí)現(xiàn)性能提升現(xiàn)在我們正在用實(shí)現(xiàn)一個(gè)具有郵件收發(fā)和即時(shí)聊天功能的客戶端工具。為了防止用戶感覺卡頓，所有的動(dòng)作都需要在毫秒級(jí)完成。然而理想是豐滿的，現(xiàn)實(shí)是殘酷的。。。

原文鏈接
https://medium.com/missive-ap...
原作者
Philippe Lehoux

利用js原生方法替換react component實(shí)現(xiàn)性能提升

現(xiàn)在我們正在用React實(shí)現(xiàn)一個(gè)具有郵件收發(fā)和即時(shí)聊天功能的客戶端工具。

如圖所示，通過鼠標(biāo)和鍵盤的上下箭頭可以從左側(cè)的導(dǎo)航欄切換不同的對話。為了防止用戶感覺卡頓，所有的動(dòng)作都需要在毫秒級(jí)完成。

一段對話可能包含成千上百條的評(píng)論、郵件和各種各樣的事件，而所有的這些內(nèi)容都由各種組件實(shí)現(xiàn)。為了提升在不同對話間切換時(shí)的渲染速度，我們開始著手將一些stateful組件變?yōu)閟tateless組件（此處原文叫做Function component）。

舉個(gè)栗子，之前的一個(gè)組件是這樣的：

class Avatar extends React.Component {
  render() {
    return ;
  }
}

經(jīng)過轉(zhuǎn)換之后變?yōu)椋?/p>

const Avatar = (props) => {
  return ;
}

其實(shí)一個(gè)Functional component就是一個(gè)簡單的js函數(shù)，這個(gè)函數(shù)返回要渲染的元素。Functional component也被稱為stateless組件。

我們認(rèn)為通過將stateful組件變?yōu)閟tateless組件后性能會(huì)有立竿見影的提升，因?yàn)楫?dāng)我們使用stateful組件時(shí)，在通過導(dǎo)航切換不同對話時(shí)React會(huì)不斷的進(jìn)行上百次的mount和unmount處理，而stateless本身只是基礎(chǔ)的js函數(shù)，它的觸發(fā)就像觸發(fā)生命周期函數(shù)一樣簡單，避免了多次的mount和unmount處理，從而節(jié)省了渲染時(shí)間。

然而理想是豐滿的，現(xiàn)實(shí)是殘酷的。。。

那么我們要怎么才能跳過React的內(nèi)部機(jī)制，不將stateless組件的內(nèi)容通過react componet渲染，而是直接通過調(diào)用函數(shù)的方式渲染呢？

其實(shí)很簡單，我們只需要改變一下調(diào)用方式即可：

ReactDOM.render(
   
-    
+    {Avatar({ url: avatarUrl })}
     {commentBody}
   ,
   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組件，而不改變調(diào)用方式，渲染速度只提升了6%；而改變調(diào)用方式后，速度提升了45%。

就像上面的性能測試中展現(xiàn)出來的一樣，這些修改很適用于提升像我們的應(yīng)用一樣通過普通的stateful組件方式渲染會(huì)觸發(fā)過多的mount和unmount事件的應(yīng)用場景。