資訊專欄INFORMATION COLUMN
摘要：眾所周知，中值的變化，會(huì)導(dǎo)致組件重新渲染。使用就是為了減少不必要的渲染。此方法就是拿當(dāng)前中值和下一次中的值進(jìn)行對(duì)比，數(shù)據(jù)相等時(shí)，返回，反之返回。使用進(jìn)行深拷貝，但是遇到數(shù)據(jù)為和函數(shù)時(shí)就會(huì)錯(cuò)。使用進(jìn)行項(xiàng)目的搭建。
眾所周知，react中props,state值的變化，會(huì)導(dǎo)致組件重新渲染。使用shouldComponentUpdate就是為了減少render不必要的渲染。 本文著重回答以下問(wèn)題： 1：如何使用使用shouldComponentUpdate記性優(yōu)化；
shouldComponentUpdate(nexrProps) {
if (this.props.num === nexrProps.num) {
return false
}
return true;
}
相信大家都知道這種方式，shouldComponentUpdate提供了兩個(gè)參數(shù)nextProps和nextState，表示下一次props和一次state的值，當(dāng)函數(shù)返回false時(shí)候，render()方法不執(zhí)行，組件也就不會(huì)渲染，返回true時(shí)，組件照常重渲染。此方法就是拿當(dāng)前props中值和下一次props中的值進(jìn)行對(duì)比，數(shù)據(jù)相等時(shí)，返回false，反之返回true。但是此方法面對(duì)復(fù)雜的對(duì)象時(shí)，就沒(méi)有效果了,比如說(shuō)props長(zhǎng)成這樣，就沒(méi)法應(yīng)對(duì)了，因?yàn)樵趈s中，object，array，function屬于引用類型，即使改變其中數(shù)據(jù)，他們指向的還是同一內(nèi)存地址，所以采用上面的判斷就不行了。
obj: {
age: 12,
name: "xioabbao",
student: {
count: 1
}
}
2: 解決方法有三種：
（1）使用setState改變數(shù)據(jù)之前，先采用es6中assgin進(jìn)行拷貝，但是assgin只深拷貝的數(shù)據(jù)的第一層，所以說(shuō)不是最完美的解決辦法。
const o2 = Object.assign({},this.state.obj)
o2.student.count = "00000";
this.setState({
obj: o2,
})
（2）使用JSON.parse(JSON.stringfy())進(jìn)行深拷貝，但是遇到數(shù)據(jù)為undefined和函數(shù)時(shí)就會(huì)錯(cuò)。
const o2 = JSON.parse(JSON.stringify(this.state.obj))
o2.student.count = "00000";
this.setState({
obj: o2,
})
（3）使用immutable.js進(jìn)行項(xiàng)目的搭建。immutable中講究數(shù)據(jù)的不可變性，每次對(duì)數(shù)據(jù)進(jìn)行操作前，都會(huì)自動(dòng)的對(duì)數(shù)據(jù)進(jìn)行深拷貝，項(xiàng)目中數(shù)據(jù)采用immutable的方式，可以輕松解決問(wèn)題，但是又多了一套API去學(xué)習(xí)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108727.html
摘要：如果組件是純函數(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)建用戶界面的JAVASCRIPT庫(kù). React僅僅專注于UI層；它使用虛擬DOM技術(shù)，以保證它UI的高速渲染；它使用單向數(shù)據(jù)...
摘要：函數(shù)組件上面我們探討了如何使用和的方法優(yōu)化類組件的性能。它的作用和類似，是用來(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í)如...
摘要：當(dāng)大家考慮在項(xiàng)目中使用的時(shí)候，第一個(gè)問(wèn)題往往是他們的應(yīng)用的速度和響應(yīng)是否能和非版一樣，每當(dāng)狀態(tài)改變的時(shí)候就重新渲染組件的整個(gè)子樹(shù)，讓大家懷疑這會(huì)不會(huì)對(duì)性能造成負(fù)面影響。 當(dāng)大家考慮在項(xiàng)目中使用 React 的時(shí)候，第一個(gè)問(wèn)題往往是他們的應(yīng)用的速度和響應(yīng)是否能和非 React 版一樣，每當(dāng)狀態(tài)改變的時(shí)候就重新渲染組件的整個(gè)子樹(shù)，讓大家懷疑這會(huì)不會(huì)對(duì)性能造成負(fù)面影響。React 用了一些黑...
摘要：應(yīng)用主要的的性能瓶頸來(lái)自于一些冗余的程序處理以及組件中的的過(guò)程。為了避免這種情況，在你的應(yīng)用中盡可能多的讓返回。使用工具將幫助你找到應(yīng)用程序中特定的性能問(wèn)題。這個(gè)工具跟用起來(lái)很像，但是它是專門(mén)用來(lái)檢測(cè)應(yīng)用性能的。 這段時(shí)間對(duì)自己寫(xiě)的React應(yīng)用的性能做了一些分析以及優(yōu)化，發(fā)現(xiàn)項(xiàng)目中產(chǎn)生性能問(wèn)題的原因主要來(lái)自兩個(gè)方面： 大量的數(shù)據(jù)渲染使組件進(jìn)行不必要的diff過(guò)程，導(dǎo)致應(yīng)用卡頓； 部...
閱讀 1215·2021-11-23 09:51
閱讀 1994·2021-10-08 10:05
閱讀 2353·2019-08-30 15:56
閱讀 1911·2019-08-30 15:55
閱讀 2646·2019-08-30 15:55
閱讀 2499·2019-08-30 13:53
閱讀 3512·2019-08-30 12:52
閱讀 1261·2019-08-29 10:57
