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

piapia 發布于2019-08-21 12:00 / 1666人閱讀

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

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

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

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

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

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

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

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

經過轉換之后變為：

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

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

我們認為通過將stateful組件變為stateless組件后性能會有立竿見影的提升，因為當我們使用stateful組件時，在通過導航切換不同對話時React會不斷的進行上百次的mount和unmount處理，而stateless本身只是基礎的js函數，它的觸發就像觸發生命周期函數一樣簡單，避免了多次的mount和unmount處理，從而節省了渲染時間。

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

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

其實很簡單，我們只需要改變一下調用方式即可：

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組件，而不改變調用方式，渲染速度只提升了6%；而改變調用方式后，速度提升了45%。

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/87343.html

react+redux+webpack移動端項目總結

摘要：前言距離我進新公司也有一個多月，這一個月的事件使用寫了一個項目，期間斷斷續續重構了兩三次，目前已經完成第一階段測試，也總結分享一些使用的一些坑。因為他的不可變特點，我們不會在不經意見不小心改變了，而引起不必要的問題。前言距離我進新公司也有一個多月，這一個月的事件使用react寫了一個項目，期間斷斷續續重構了兩三次，目前已經完成第一階段測試，也總結分享一些使用react的一些坑。 s...

garfileo 2019-08-22 10:42 評論0 收藏0
【譯】統一樣式語言

摘要：原文地址原文作者譯文出自掘金翻譯計劃譯者校對者統一樣式語言在過去幾年中，我們見證了的興起，尤其是在社區。根本上來說，純粹用于只是一個命名規范，它要求樣式的類名要遵守的模式。原文地址：A Unified Styling Language 原文作者：Mark Dalgleish 譯文出自：掘金翻譯計劃譯者：ZhangFe 校對者：JackGit,yifili09 統一樣式語言在過...

fjcgreat 2019-08-29 12:49 評論0 收藏0
Taro 簡介

摘要：讓人又愛又恨的微信小程序自微信小程序以下簡稱小程序誕生以來，就伴隨著贊譽與爭議不斷。同時于開發者來說，小程序的生態不斷在完善，許多的坑已被踩平，雖然還是存在一些令人詬病的問題，但已經足見微信的誠意了。 Taro 介紹在互聯網不斷發展的今天，前端程序員們也不斷面臨著新的挑戰，在這個變化多端、不斷革新自己的領域，每一年都有新的美好事物在發生。從去年微信小程序的誕生，到今年的逐漸火熱，以及...

sixgo 2019-08-23 16:18 評論0 收藏0
前端每周清單：Node.js 微服務實踐，Vue.js 與 GraphQL，Angular 組件技巧

摘要：前端每周清單第期微服務實踐，與，組件技巧，攻防作者王下邀月熊編輯徐川前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。前端每周清單第 26 期：Node.js 微服務實踐，Vue.js 與 GraphQL，Angular 組件技巧，HeadlessChrome 攻防作者：王下邀月熊編輯：徐川...

wall2flower 2019-08-21 11:55 評論0 收藏0
(譯 & 轉載) 2016 JavaScript 后起之秀

摘要：在年成為最大贏家，贏得了實現的風暴之戰。和他的競爭者位列第二沒有前端開發者可以忽視和它的生態系統。他的殺手級特性是探測功能，通過檢查任何用戶的功能，以直觀的方式讓開發人員檢查所有端點。 2016 JavaScript 后起之秀本文轉載自：眾成翻譯譯者：zxhycxq鏈接：http://www.zcfy.cc/article/2410原文：https://risingstars2016...

darry 2019-08-20 14:04 評論0 收藏0