React中setState的使用與同步非同步

在react中，修改狀態如果直接使用this.state，不會引起元件的重新渲染，需要通過 this.setstate來對元件的屬性進行修改。

1、this.setstate的兩種定義方式

定義初始狀態

state =

如果此時有乙個按鈕，點選按鈕讓計數加1，我們可以有兩種寫法

(1)傳遞物件 this.setstate()
(2)傳遞函式 this.setstate((state, props) => ())

2、setstate的兩種方式有什麼不同?

如果變更的state的值需要依賴於上一次的state的值，這種情況就需要用到函式的形式，比如以下這種情況

addcount())
this.setstate()
this.setstate()
}

此時只會執行一次+1的操作，因為在react內部，會將多次setstate合併操作，新的state由 object.assgin({}， , ) 合併所得，以上賦值會執行三次，但因為count的值沒有更新，所以最終執行的結果只+1，如果setstate的賦值是函式，那情況就不一樣了

addcount()))
this.setstate((state, props) => ())
this.setstate((state, props) => ())
}

這樣的操作會得到+3的效果，因為react會進行判斷，如果傳入的是函式，那麼將執行此函式，此時count的值就已經被修改了

3、setstate是同步還是非同步的?

☆☆☆☆☆ 是非同步的

(1) 即我們通過this.setstate修改了狀態之後，在它的下一行輸出state的值並不會得到新的值

(2) 為什麼是非同步?

有兩個原因，一是提高效率，每次修改state的值都會造成render的重新渲染，將多次修改state的值合併統一更新可以提高效能；二是render的更新會晚一些，如果render中有子元件，子元件的props依賴於父元件的state，props和state就不能保持一致

(3) 如何獲取非同步時的state值?

① 在setstate的**函式中，

this.setstate(, ()=>)

② 在componentdidupdate中獲取

componentdidupdate()

☆☆☆☆☆ 是同步的

(1) 即我們通過this.setstate修改狀態之後，在它的下一行輸出state是新的值

(2) 什麼場景下是同步的？

① 原生js獲取dom元素，並繫結事件

點我+1
componentdidmount())
console.log(
this
.state.message)
})}

② 計時器 settimeout

this.addone() }>點我+1
addone())
console.log(
this.state.count ) },0)
}