亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

React組件性能優(yōu)化

oysun / 1077人閱讀

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

React: 一個用于構(gòu)建用戶界面的JAVASCRIPT庫.

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

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

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

但是，這里面有幾個問題

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

2. 既然React總是要進(jìn)行虛擬DOM的diff，那么它的diff規(guī)則是什么？怎么利用？

PureRenderMixin

針對第一個問題React給我們提供了 PureRenderMixin。
如果React組件是純函數(shù)的，就是給組件相同的props和state組件就會展現(xiàn)同樣的UI，可以使用這個Minxin來優(yōu)化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的原理就是它實(shí)現(xiàn)了shouldComponentUpdate，在shouldComponentUpdate內(nèi)它比較當(dāng)前的props、state和接下來的props、state，當(dāng)兩者相等的時候返回false，這樣組件就不會進(jìn)行虛擬DOM的diff。

這里需要注意：
PureRenderMixin內(nèi)進(jìn)行的僅僅是淺比較對象。如果對象包含了復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，深層次的差異可能會產(chǎn)生誤判。僅用于擁有簡單props和state的組件。

shouldComponentUpdate

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

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

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

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

注意:shouldComponentUpdate在初始化渲染的時候不會調(diào)用，但是在使用forceUpdate方法強(qiáng)制更新的時候也不會調(diào)用。

render

PureRenderMixin和shouldComponentUpdate的關(guān)注點(diǎn)是UI需不需要更新，而render則更多關(guān)注虛擬DOM的diff規(guī)則了，如何讓diff結(jié)果最小化、過程最簡化是render內(nèi)優(yōu)化的關(guān)注點(diǎn)。

React在進(jìn)行虛擬DOM diff的時候假設(shè)：

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

DOM結(jié)構(gòu)?

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]

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

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

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

總結(jié)

使用PureRenderMixin、shouldComponentUpdate來避免不必要的虛擬DOM diff，在render內(nèi)部優(yōu)化虛擬DOM的diff速度，以及讓diff結(jié)果最小化。

使用immutable.js解決復(fù)雜數(shù)據(jù)diff、clone等問題。

參考

immutable.js

reconciliation

pure-render-mixin

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/86456.html

相關(guān)文章

  • 4、React組件之性能優(yōu)化

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

    陳偉 評論0 收藏0

  • React-Redux性能優(yōu)化

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

    JouyPub 評論0 收藏0

  • 使用React.memo()來優(yōu)化函數(shù)組件的性能

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

    BetaRabbit 評論0 收藏0

  • 個人常用JavaScript及React常用優(yōu)化總結(jié)

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

    yuanxin 評論0 收藏0

  • React拖拽組件Dragact V0.1.7：教你優(yōu)化React組件性能與手感

    摘要：但是強(qiáng)迫癥犯了，為了使得性能達(dá)到極致，再次進(jìn)行了深度的優(yōu)化。把移動中心設(shè)置在物體的重力中心，最為舒適。你可以狠狠的點(diǎn)擊預(yù)覽地址到此，組件，無論從性能，還是手感上來說，都已經(jīng)相當(dāng)?shù)姆衔覀兊男枨罅恕? 倉庫地址：Dragact手感絲滑的拖拽布局組件 預(yù)覽地址：支持手機(jī)端噢～ 上回我們說到，Dragact組件已經(jīng)進(jìn)行了一系列的性能優(yōu)化，然而面對大量數(shù)據(jù)的時候，依舊比較吃力，讓我們來看看，優(yōu)化...

    fizz 評論0 收藏0

發(fā)表評論

0條評論

oysun

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<