當我們想要改變組件的狀態(tài)時,不能直接調(diào)用this.state=xxx這種修改方式,React.js無法知道組件狀態(tài)被修改了,因此不會更新頁面,要使用setState方法更新組件狀態(tài)。setState方法由父類Component提供,當調(diào)用該函數(shù)時,React.js會更新組件的狀態(tài)state,并且重新調(diào)用render方法,將render方法渲染的最新的內(nèi)容顯示到頁面上。
setState方法的參數(shù)可以是對象或者函數(shù)。
setState-對象參數(shù)
傳入的參數(shù)是對象時,這個對象表示該組件需要更新的狀態(tài)(不需要傳入整個對象)。需要注意一點,當調(diào)用setState時,React.js不會馬上修改state,而是把這個對象放在一個更新隊列里面,稍后才會把新的狀態(tài)從隊列中提取出來合并到state 中,然后再觸發(fā)組件更新。
setState-函數(shù)參數(shù)
接受一個函數(shù)作為參數(shù)是setState的第二種使用方式,React.js會把上一個setState的結(jié)果傳入這個函數(shù),然后就可以使用該結(jié)果進行運算、操作,然后返回一個對象作為更新state的對象;
setState的合并
React.js會把js事件循環(huán)中的消息隊列的同一個消息中的setState都進行合并后再重新渲染組件。
總結(jié)
- 不要直接更新狀態(tài),應該使用setState方法。
- 構(gòu)造函數(shù)是唯一能夠初始化this.state的地方。
- 狀態(tài)更新可能是異步的。React可以將多個setState調(diào)用合并成一個來提高性能。因為 this.props 和 this.state 可能是異步更新的,因此不應該依靠它們的值來計算下一個狀態(tài)。這種情形需要使用函數(shù)作為參數(shù)。