如何使用setState
在 React 日常的使用中,一個很重要的點就是,不要直接去修改 state。例如:this.state.count = 1
是無法觸發 React 去更新視圖的。因爲React的機制規定,一個state的更新,首先需要調用 setState 方法。
this.setState({
count: 1
})
這樣便能觸發重新渲染。稍有經驗的開發者會知道,setState 方法其實是 “異步” 的。即立馬執行之後,是無法直接獲取到最新的 state 的,需要經過 React 對 state 的所有改變進行合併處理之後,纔會去計算新的虛擬dom,再根據最新的虛擬dom去重新渲染真實dom。
class App extends Component {
state = {
count: 0
}
componentDidMount(){
this.setState({count: this.state.count + 1})
console.log(this.state.count) // 0
}
render(){
...
}
}
那怎麼才能獲取到修改後的state呢?React爲我們提供了一個回調去實現。
...
this.setState({count: this.state.count + 1}, ()=>{
console.log(this.state.count) // 1
})
...
回調裏的 state 便是最新的了,原因是該回調的執行時機在於state合併處理之後。如果我們這樣去做:
...
this.setState({count: this.state.count + 1})
this.setState({count: this.state.count + 1})
...
實際最終的 count 會等於 1,原因是執行時得到的 this.state.count = 0
。那怎麼實現結果爲 2 呢?
...
this.setState(prevState => {count: prevState.count + 1});
this.setState(prevState => {count: prevState.count + 1});
...
setState()
實際上可以接受一個函數作爲參數,函數的首個參數就是上一次的state。
以上介紹了setState
的三種使用方式,下面我們來看看它們的執行時機是怎樣的:
...
this.setState({ count: this.state.count + 1 });
console.log("console: " + this.state.count); // 0
this.setState({ count: this.state.count + 1 }, () => {
console.log("console from callback: " + this.state.count); // 2
});
this.setState(prevState => {
console.log("console from func: " + prevState.count); // 1
return {
count: prevState.count + 1
};
}, ()=>{
console.log('last console: '+ this.state.count)
});
...
執行結果:
console: 0
console from func: 1
console from callback: 2
last console: 2
React 其實會維護着一個 state 的更新隊列,每次調用 setState 都會先把當前修改的 state 推進這個隊列,在最後,React 會對這個隊列進行合併處理,然後去執行回調。根據最終的合併結果再去走下面的流程(更新虛擬dom,觸發渲染)。
setState爲什麼要設計成異步的
因爲setState()
之後無法立馬獲取最新的 state,給人的感覺便是異步去設置狀態。也確實是有異步的感覺(實 際原理後面講訴)。那麼爲什麼 React 要把狀態的更新設計成這種方式呢?直接 this.state.count = 1
不好嗎?
有興趣的可以點擊看看:https://github.com/facebook/react/issues/11527#issuecomment-360199710
這邊簡單總結下:
- 保證內部的一致性:即使
state
是同步更新,props
也不是。(你只有在父組件重新渲染時才能知道props
) - 將
state
的更新延緩到最後批量合併再去渲染對於應用的性能優化是有極大好處的,如果每次的狀態改變都去重新渲染真實dom,那麼它將帶來巨大的性能消耗。
setState真的是異步嗎
我們先來看一段代碼,執行前建議大家先預估下結果:
class App extends Component {
state = {
count: 0
};
componentDidMount() {
// 生命週期中調用
this.setState({ count: this.state.count + 1 });
console.log("lifecycle: " + this.state.count);
setTimeout(() => {
// setTimeout中調用
this.setState({ count: this.state.count + 1 });
console.log("setTimeout: " + this.state.count);
}, 0);
document.getElementById("div2").addEventListener("click", this.increment2);
}
increment = () => {
// 合成事件中調用
this.setState({ count: this.state.count + 1 });
console.log("react event: " + this.state.count);
};
increment2 = () => {
// 原生事件中調用
this.setState({ count: this.state.count + 1 });
console.log("dom event: " + this.state.count);
};
render() {
return (
<div className="App">
<h2>couont: {this.state.count}</h2>
<div id="div1" onClick={this.increment}>
click me and count+1
</div>
<div id="div2">click me and count+1</div>
</div>
);
}
}
探討前,我們先簡單瞭解下react的事件機制:react爲了解決跨平臺,兼容性問題,自己封裝了一套事件機制,代理了原生的事件,像在jsx
中常見的onClick
、onChange
這些都是合成事件。
那麼以上4種方式調用setState()
,後面緊接着去取最新的state,按之前講的異步原理,應該是取不到的。然而,setTimeout
中調用以及原生事件中調用的話,是可以立馬獲取到最新的state的。根本原因在於,setState並不是真正意義上的異步操作,它只是模擬了異步的行爲。React中會去維護一個標識(isBatchingUpdates
),判斷是直接更新還是先暫存state進隊列。setTimeout
以及原生事件都會直接去更新state,因此可以立即得到最新state。而合成事件和React生命週期函數中,是受React控制的,其會將isBatchingUpdates
設置爲 true
,從而走的是類似異步的那一套。
總結
此處總結是直接引用了:https://juejin.im/post/5b45c57c51882519790c7441#heading-7
-
setState
只在合成事件和鉤子函數中是“異步”的,在原生事件和setTimeout
中都是同步的。 -
setState
的“異步”並不是說內部由異步代碼實現,其實本身執行的過程和代碼都是同步的,只是合成事件和鉤子函數的調用順序在更新之前,導致在合成事件和鉤子函數中沒法立馬拿到更新後的值,形式了所謂的“異步”,當然可以通過第二個參數 setState(partialState, callback) 中的callback拿到更新後的結果。 -
setState
的批量更新優化也是建立在“異步”(合成事件、鉤子函數)之上的,在原生事件和setTimeout 中不會批量更新,在“異步”中如果對同一個值進行多次setState
,setState
的批量更新策略會對其進行覆蓋,取最後一次的執行,如果是同時setState
多個不同的值,在更新時會對其進行合併批量更新。
參考:
坦白說,自己的水平還是挺有限的,還需要努力努力再努力。只有懂了很多,才能寫出有意義的東西吧。現在寫的,大多都是根據別人的文章,自己理解了之後,換成自己的語言再表達一遍而已。。
慢慢來,總有一天可以突破這個界限的,真正寫出屬於自己的東西。
另外,真心感謝這些文章的作者給予的幫助。
關於我
微信號:rcgrcg,歡迎交友~
爲了生計,我也接外包項目的哦~
網站搭建(PC、H5、前後端全包,我們有團隊的哦),APP開發(安卓和IOS),都是有成功案例的哦。
有興趣的請聯繫我!!服務包您滿意的那種!!
Good luck!
2018-11-18 廈門