React組件性能優化

oysun 發布于2019-08-21 10:56 / 1015人閱讀

摘要：如果組件是純函數的，就是給組件相同的和組件就會展現同樣的，可以使用這個來優化組件的性能。僅用于擁有簡單和的組件。雖然提供簡單的來提升性能，但是如果有更特殊的需求時怎么辦如果組件有復雜的和怎么辦這個時候就可使用來進行更加定制化的性能優化。

React: 一個用于構建用戶界面的JAVASCRIPT庫.

React僅僅專注于UI層；它使用虛擬DOM技術，以保證它UI的高速渲染；它使用單向數據流，因此它數據綁定更加簡單；那么它內部是如何保持簡單高效的UI渲染呢？

React不直接操作DOM，它在內存中維護一個快速響應的DOM描述，render方法返回一個DOM的描述，React能夠計算出兩個DOM描述的差異，然后更新瀏覽器中的DOM。

就是說React在接收到props或者state更新時，React就會通過前面的方式更新UI。就算重新使用ReactDOM.render(, mountNode)，它也只是當作props更新，而不是重新掛載整個組件。所以React整個UI渲染是比較快的。

但是，這里面有幾個問題

1. 如果更新的props和舊的一樣，這個時候很明顯UI不會變化，但是React還是要進行虛擬DOM的diff，這個diff就是多余的性能損耗，而且在DOM結構比較復雜的情況，整個diff會花費較長的時間。

2. 既然React總是要進行虛擬DOM的diff，那么它的diff規則是什么？怎么利用？

PureRenderMixin

針對第一個問題React給我們提供了 PureRenderMixin。
如果React組件是純函數的，就是給組件相同的props和state組件就會展現同樣的UI，可以使用這個Minxin來優化React組件的性能。

var PureRenderMixin = require("react-addons-pure-render-mixin");
React.createClass({
      mixins: [PureRenderMixin],

      render: function() {
        return foo;
      }
});

ES6中的用法是

import PureRenderMixin from "react-addons-pure-render-mixin";
class FooComponent extends React.Component {
      constructor(props) {
        super(props);
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
      }

      render() {
        return foo;
      }
}

PureRenderMixin的原理就是它實現了shouldComponentUpdate，在shouldComponentUpdate內它比較當前的props、state和接下來的props、state，當兩者相等的時候返回false，這樣組件就不會進行虛擬DOM的diff。

這里需要注意：
PureRenderMixin內進行的僅僅是淺比較對象。如果對象包含了復雜的數據結構，深層次的差異可能會產生誤判。僅用于擁有簡單props和state的組件。

shouldComponentUpdate

React雖然提供簡單的PureRenderMixin來提升性能，但是如果有更特殊的需求時怎么辦？如果組件有復雜的props和state怎么辦？這個時候就可使用shouldComponentUpdate來進行更加定制化的性能優化。

boolean shouldComponentUpdate(object nextProps, object nextState) {
    return nexprops.id !== this.props.id;
}

在React組件需要更新之前就會調用這個方法，如果這個方法返回false，則組件不更新；如果返回true，則組件更新。在這個方法內部可以通過nextProps和當前props，nextState和當前state的對比決定組件要不要更新。

如果對比的數據結構比較復雜，層次較深，對比的過程也是會有較大性能消耗，又可能得不償失。
這個時候immutable.js就要登場了，也是fb出品，有人說這個框架的意義不亞于React，但是React光芒太強。它能解決復雜數據在deepClone和對比過程中性能損耗。

注意:shouldComponentUpdate在初始化渲染的時候不會調用，但是在使用forceUpdate方法強制更新的時候也不會調用。

render

PureRenderMixin和shouldComponentUpdate的關注點是UI需不需要更新，而render則更多關注虛擬DOM的diff規則了，如何讓diff結果最小化、過程最簡化是render內優化的關注點。

React在進行虛擬DOM diff的時候假設：

1、擁有相同類的兩個組件將會生成相似的樹形結構，擁有不同類的兩個組件將會生成不同的樹形結構。
2、可以為元素提供一個唯一的標志，該元素在不同的渲染過程中保持不變。

DOM結構?

renderA: 
renderB: 
=> [removeNode ], [insertNode

DOM屬性

renderA: 
renderB: 
=> [replaceAttribute id "after"]

之前插入DOM

renderA: first
renderB: secondfirst
=> [replaceAttribute textContent "second"], [insertNode first]

之前插入DOM，有key的情況

renderA: first
renderB: secondfirst
=> [insertNode second]

由于依賴于兩個預判條件，如果這兩個條件都沒有滿足，性能將會大打折扣。

1、diff算法將不會嘗試匹配不同組件類的子樹。如果發現正在使用的兩個組件類輸出的 DOM 結構非常相似，你可以把這兩個組件類改成一個組件類。

2、如果沒有提供穩定的key（例如通過 Math.random() 生成），所有子樹將會在每次數據更新中重新渲染。

總結

使用PureRenderMixin、shouldComponentUpdate來避免不必要的虛擬DOM diff，在render內部優化虛擬DOM的diff速度，以及讓diff結果最小化。

使用immutable.js解決復雜數據diff、clone等問題。

參考

immutable.js

reconciliation

pure-render-mixin

GPU云服務器云服務器性能優化優化系統性能網站性能優化頁面性能優化

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

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

4、React組件之性能優化

摘要：組件的性能優化高德納我們應該忘記忽略很小的性能優化，可以說的情況下，過早的優化是萬惡之源，而我們應該關心對性能影響最關鍵的另外的代碼。對多個組件的性能優化當一個組件被裝載更新和卸載時，組件的一序列生命周期函數會被調用。 React組件的性能優化高德納: 我們應該忘記忽略很小的性能優化，可以說97%的情況下，過早的優化是萬惡之源，而我們應該關心對性能影響最關鍵的另外3%的代碼。...

陳偉 2019-08-22 15:01 評論0 收藏0
React-Redux性能優化

摘要：但是和一起使用還需要一個工具，這一篇就說一下在使用上的一些性能優化建議。如果的改變會引起值變化，那么會調用轉換函數，傳入作為參數，并返回結果。如果的值和前一次的一樣，它將會直接返回前一次計算的數據，而不會再調用一次轉換函數。前面寫了兩篇文章《React組件性能優化》《Redux性能優化》，分別針對React和Redux在使用上的性能優化給了一些建議。但是React和Redux一起使用...

JouyPub 2019-08-21 10:57 評論0 收藏0
使用React.memo()來優化函數組件的性能

摘要：函數組件上面我們探討了如何使用和的方法優化類組件的性能。它的作用和類似，是用來控制函數組件的重新渲染的。其實就是函數組件的。原文鏈接: Improving Performance in React Functional Component using React.memo 原文作者: Chidume Nnamdi 譯者: 進擊的大蔥推薦理由: 本文講述了開發React應用時如...

BetaRabbit 2019-08-23 16:04 評論0 收藏0
個人常用JavaScript及React常用優化總結

摘要：插件性能優化及個人常用優化方法經常會觸發視覺變化。作用域鏈指的是當前作用于下可用變量的集合，它在各種主流瀏覽器中至少包含兩個部分局部變量的集合和全局變量的集合。在考慮優化時，數值和變量的性能差不多，并且速度顯著優于對象屬性和數組元素。 JavaScript 插件性能優化及個人react常用優化方法 JavaScript 經常會觸發視覺變化。有時是直接通過樣式操作，有時是會產生視覺變化...

yuanxin 2019-08-20 15:07 評論0 收藏0
React拖拽組件Dragact V0.1.7：教你優化React組件性能與手感

摘要：但是強迫癥犯了，為了使得性能達到極致，再次進行了深度的優化。把移動中心設置在物體的重力中心，最為舒適。你可以狠狠的點擊預覽地址到此，組件，無論從性能，還是手感上來說，都已經相當的符合我們的需求了。倉庫地址：Dragact手感絲滑的拖拽布局組件預覽地址：支持手機端噢～上回我們說到，Dragact組件已經進行了一系列的性能優化，然而面對大量數據的時候，依舊比較吃力，讓我們來看看，優化...

fizz 2019-08-01 18:39 評論0 收藏0