關於react中setState的深入理解

麥芽糖發表於2018-05-15
React

在react中，通常通過state或props，來控制整個元件的狀態。一旦state或props發生改變，整個元件會被重新渲染。在setState的理解上，可能會存在一些誤區。

setState的基本使用（物件形式）

一般使用方法是傳入物件

this.setState({
    total: 0
})
複製程式碼

setState的基本使用（函式形式）

也可以使用函式的形式，第一個引數是之前的state狀態物件，第二個引數是props

 this.setState((prevState, props) => ({
    total: prevState.total + 1
 }))
複製程式碼

setState不能保證是同步的，即在有些情況下會是非同步的，比如在setState之後去獲取this.state，並不會得到更新後的值，而是返回之前的值。針對這種情況，可以採用下面兩種方式解決

setState新增回撥函式

this.setState({
  total: 10
}, this.showTotal)

showTotal(){
    console.log(this.state.total) // 這裡可以獲取到更新值
}
複製程式碼
更新方法新增setTimeout
this.setState({
  total: 10
})

setTimeout(this.showTotal, 0);

showTotal(){
    console.log(this.state.total) // 這裡可以獲取到更新值
}
複製程式碼

總結，並不是所有的元件狀態都應該用setState進行管理。用setState進行管理會造成很多不需要的重新渲染，相關的生命週期鉤子一直被呼叫等。 和渲染無關的狀態儘量不要放在 state 中來管理，可以直接以屬性的形式儲存在元件中

相關文章