一、事件的優化
1、建構函式中宣告
此中方式只會在建構函式中建立一次,效能最好,但無法傳值export default mycom extends component
render()
fun()
}
2、在元件中宣告
該方法可以解決以上不能傳參的問題,但每次在render時都會重新執行一遍函式export default mycom extends component
fun()
}
3、在渲染內容中使用箭頭函式
該方法每次執行render時都會重新生成箭頭函式,極不推薦export default mycom extends component>
)} fun()
}
二、資料結構優化
使用immutable對reducer的資料進行管理
使用該方法可以減少在修改值時無需建立新的物件,減少記憶體的消耗,從而達到效能優化的目的import immutable from "immutable"
const defaultestate = immutable.fromjs()
export default (state = defaultstate, action)=>
}
三、渲染優化
shuoldcomponentupdate的優化
basecomponent.js
mycomponent.jsimport react from "react";
import from "immutable";
export default class basecomponent extends react.component;
let thisprops = this.props || {};
nextprops = nextprops || {};
nextstate = nextstate || {};
if(object.keys(thisstate).length != object.keys(nextstate).length
|| object.keys(thisprops).length != object.keys(nextprops).length)
for(var key in nextprops)
}for(var key in nextstate)
}return false;
}}
根據比較的結果是否一致,來判定是否需要重新渲染class mycomponent extends basecomponent
}
四、元件優化
purecomponent是純元件
特點:一般作為ui元件使用
會對資料進行一次淺比較,只會關注資料的位址是否改變,若未改變則不會渲染
使用了該元件後,禁止使用shouldcoponentupdate,否則會破壞purecoponent的規則
React 效能優化
避免重複渲染 當乙個元件的props或者state改變時,react通過比較新返回的元素和之前渲染的元素來決定是否有必要更新實際的dom。當他們不相等時,react會更新dom。在一些情況下,你的元件可以通過重寫這個生命週期函式shouldcomponentupdate來提公升速度,它是在重新渲染過...
react 效能優化
在shouldcomponentupdate 方法中判斷props和state是否改變,若未改變則無需渲染。有些情況如父元件的props或state改變了,但是子元件其實未改變,若不判斷的話會導致子元件一起被渲染。shouldcomponentupdate nextprops nextstate r...
React 效能優化
profiler api profiler 衡量react應用程式渲染的頻率以及渲染的 成本 是多少。其目的是幫助識別應用程式中速度較慢的部分,並可能從諸如memoization 之類的優化中受益。分析會增加一些額外的開銷,因此在生產版本中將其禁用。它只會進行淺層比較,因此,如果道具或狀態可能以淺層...