React效能優化資料(文章)蒐集整理

2021-08-14 07:55:10 字數 406 閱讀 5372

資料整理

最近公司做了乙個專案,需要前端做一些優化,查閱了一些資料,放在這裡,以文章為主,留作以後參考。

react效能優化總結—segmentfault

react效能優化總結—github

使用perf工具研究react key對渲染的影響

react元件效能調優—react-china

知識整理

虛擬dom比較的時機

[優化點1]在diff演算法執行前比較state和props,確定是否進行虛擬dom比較。

[優化點2]map裡面新增key,並且key不要使用index(可變的)。

[優化點3]使用immutable

優化效果

今天下午試了一下優化效果,使用同步服務大量更新model,更新2000+次。

React 效能優化

避免重複渲染 當乙個元件的props或者state改變時,react通過比較新返回的元素和之前渲染的元素來決定是否有必要更新實際的dom。當他們不相等時,react會更新dom。在一些情況下,你的元件可以通過重寫這個生命週期函式shouldcomponentupdate來提公升速度,它是在重新渲染過...

react 效能優化

在shouldcomponentupdate 方法中判斷props和state是否改變,若未改變則無需渲染。有些情況如父元件的props或state改變了,但是子元件其實未改變,若不判斷的話會導致子元件一起被渲染。shouldcomponentupdate nextprops nextstate r...

React效能優化

一 事件的優化 1 建構函式中宣告 export default mycom extends component render fun 此中方式只會在建構函式中建立一次,效能最好,但無法傳值 2 在元件中宣告 export default mycom extends component fun 該方...