react之setState

當我們想要改變組件的狀態(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ù)。
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容

  • 作為一個合格的開發(fā)者,不要只滿足于編寫了可以運行的代碼。而要了解代碼背后的工作原理;不要只滿足于自己的程序...
    六個周閱讀 8,482評論 1 33
  • HTML模版 之后出現(xiàn)的React代碼嵌套入模版中。 1. Hello world 這段代碼將一個一級標題插入到指...
    ryanho84閱讀 6,273評論 0 9
  • 本筆記基于React官方文檔,當前React版本號為15.4.0。 1. 安裝 1.1 嘗試 開始之前可以先去co...
    Awey閱讀 7,778評論 14 128
  • 做React需要會什么? react的功能其實很單一,主要負責渲染的功能,現(xiàn)有的框架,比如angular是一個大而...
    李先生Mr_Li閱讀 2,924評論 1 20
  • 每年的三月底、四月初,我有一項例行但又要創(chuàng)新的工作——組織公司優(yōu)秀主管外出考察學習。今年也不例外,在上次部門例會上...
    西貝悠哉閱讀 202評論 0 0