React效能優化

一、事件的優化

1、建構函式中宣告

export default mycom extends component

render()
fun()
}

2、在元件中宣告

export default mycom extends component

fun()
}

3、在渲染內容中使用箭頭函式

export default mycom extends component>

)} fun()
}

二、資料結構優化

使用immutable對reducer的資料進行管理

import immutable from "immutable"

const defaultestate = immutable.fromjs()
export default (state = defaultstate, action)=>
}

三、渲染優化

shuoldcomponentupdate的優化

basecomponent.js

import 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 之類的優化中受益。分析會增加一些額外的開銷,因此在生產版本中將其禁用。它只會進行淺層比較，因此，如果道具或狀態可能以淺層...