1. 程式人生 > >react 之 setState() 更新 問題

react 之 setState() 更新 問題

官方文件

setState()

setState(updater, [callback])

setState() 將需要處理的變化塞入(譯者注:setState原始碼中將一個需要改變的變化存放到元件的state物件中,採用佇列處理)元件的state物件中, 並告訴該元件及其子元件需要用更新的狀態來重新渲染。這是用於響應事件處理和服務端響應的更新使用者介面的主要方式。

setState()認為是一次請求而不是一次立即執行更新元件的命令。為了更為可觀的效能,React可能會推遲它,稍後會一次性更新這些元件。React不會保證在setState之後,能夠立刻拿到改變的結果。

setState()

不是立刻更新元件。其可能是批處理或推遲更新。這使得在呼叫setState()後立刻讀取this.state的一個潛在陷阱。代替地,使用componentDidUpdate或一個setState回撥(setState(updater, callback)),當中的每個方法都會保證在更新被應用之後觸發。若你需要基於之前的狀態來設定狀態,閱讀下面關於updater引數的介紹。

除非shouldComponentUpdate() 返回false,否則setState()永遠都會導致重渲。若使用可變物件同時條件渲染邏輯無法在shouldComponentUpdate()中實現,僅當新狀態不同於之前狀態時呼叫setState(),將避免不必要的重渲。