成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

oysun / 1025人閱讀

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

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

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

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

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

但是，這里面有幾個(gè)問(wèn)題

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

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

PureRenderMixin

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

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

shouldComponentUpdate

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

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

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

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

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

render

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

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

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

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]

由于依賴(lài)于兩個(gè)預(yù)判條件，如果這兩個(gè)條件都沒(méi)有滿(mǎn)足，性能將會(huì)大打折扣。

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

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

總結(jié)

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

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

參考

immutable.js

reconciliation

pure-render-mixin

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86456.html

相關(guān)文章

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

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

    陳偉 評(píng)論0 收藏0

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

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

    JouyPub 評(píng)論0 收藏0

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

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

    BetaRabbit 評(píng)論0 收藏0

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

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

    yuanxin 評(píng)論0 收藏0

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

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

    fizz 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

oysun

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<