使用shouldComponentUpdate進行性能優化

andong777 發布于2019-08-26 13:23 / 1020人閱讀

摘要：眾所周知，中值的變化，會導致組件重新渲染。使用就是為了減少不必要的渲染。此方法就是拿當前中值和下一次中的值進行對比，數據相等時，返回，反之返回。使用進行深拷貝，但是遇到數據為和函數時就會錯。使用進行項目的搭建。

眾所周知，react中props,state值的變化，會導致組件重新渲染。使用shouldComponentUpdate就是為了減少render不必要的渲染。本文著重回答以下問題： 1：如何使用使用shouldComponentUpdate記性優化；

shouldComponentUpdate(nexrProps) {
    if (this.props.num === nexrProps.num) {
        return false
    }
    return true;
}

相信大家都知道這種方式，shouldComponentUpdate提供了兩個參數nextProps和nextState，表示下一次props和一次state的值，當函數返回false時候，render()方法不執行，組件也就不會渲染，返回true時，組件照常重渲染。此方法就是拿當前props中值和下一次props中的值進行對比，數據相等時，返回false，反之返回true。但是此方法面對復雜的對象時，就沒有效果了,比如說props長成這樣，就沒法應對了，因為在js中，object，array，function屬于引用類型，即使改變其中數據，他們指向的還是同一內存地址，所以采用上面的判斷就不行了。

 obj: {
    age: 12,
    name: "xioabbao",
    student: {
        count: 1
    }
}

2: 解決方法有三種：

（1）使用setState改變數據之前，先采用es6中assgin進行拷貝，但是assgin只深拷貝的數據的第一層，所以說不是最完美的解決辦法。

const o2 = Object.assign({},this.state.obj)
    o2.student.count = "00000";
    this.setState({
        obj: o2,
    })

（2）使用JSON.parse(JSON.stringfy())進行深拷貝，但是遇到數據為undefined和函數時就會錯。

const o2 = JSON.parse(JSON.stringify(this.state.obj))
    o2.student.count = "00000";
    this.setState({
        obj: o2,
    })

（3）使用immutable.js進行項目的搭建。immutable中講究數據的不可變性，每次對數據進行操作前，都會自動的對數據進行深拷貝，項目中數據采用immutable的方式，可以輕松解決問題，但是又多了一套API去學習。

此文章屬于個人一時見解，希望大家多多指教。

GPU云服務器云服務器 ecs性能設置閾值進行預警性能優化優化系統性能網站性能優化

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

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

React組件性能優化

摘要：如果組件是純函數的，就是給組件相同的和組件就會展現同樣的，可以使用這個來優化組件的性能。僅用于擁有簡單和的組件。雖然提供簡單的來提升性能，但是如果有更特殊的需求時怎么辦如果組件有復雜的和怎么辦這個時候就可使用來進行更加定制化的性能優化。 React: 一個用于構建用戶界面的JAVASCRIPT庫. React僅僅專注于UI層；它使用虛擬DOM技術，以保證它UI的高速渲染；它使用單向數據...

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

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

BetaRabbit 2019-08-23 16:04 評論0 收藏0
React性能優化

摘要：當大家考慮在項目中使用的時候，第一個問題往往是他們的應用的速度和響應是否能和非版一樣，每當狀態改變的時候就重新渲染組件的整個子樹，讓大家懷疑這會不會對性能造成負面影響。當大家考慮在項目中使用 React 的時候，第一個問題往往是他們的應用的速度和響應是否能和非 React 版一樣，每當狀態改變的時候就重新渲染組件的整個子樹，讓大家懷疑這會不會對性能造成負面影響。React 用了一些黑...

n7then 2019-08-21 14:15 評論0 收藏0
【譯】React應用性能優化

摘要：應用主要的的性能瓶頸來自于一些冗余的程序處理以及組件中的的過程。為了避免這種情況，在你的應用中盡可能多的讓返回。使用工具將幫助你找到應用程序中特定的性能問題。這個工具跟用起來很像，但是它是專門用來檢測應用性能的。這段時間對自己寫的React應用的性能做了一些分析以及優化，發現項目中產生性能問題的原因主要來自兩個方面：大量的數據渲染使組件進行不必要的diff過程，導致應用卡頓；部...

txgcwm 2019-08-20 14:19 評論0 收藏0