1.setState的異步;都知道setState是異步，當我們調(diào)用setState后摩瞎，立馬獲取改變的state值拴签。不一定獲取得到。
constructor(props) {
super(props)
this.state = {
counter: 0,
}
}
handleClick = () => {
this.setState({
counter: this.state.counter + 1
})
console.log(this.state); // {count: 0}
}
從中可以看出setState是異步旗们。如果需要獲取setState的值蚓哩，可以在setState回調(diào)函數(shù)中獲取
constructor(props) {
super(props)
this.state = {
counter: 0,
}
}
handleClick = () => {
this.setState({
counter: this.state.counter + 1
}, () => {
console.log(this.state); // {count: 1}
})
}
2.同時調(diào)用多次setState函數(shù)
constructor(props) {
super(props)
this.state = {
counter: 0,
name: "李四"
}
}
componentDidUpdate() {
console.log(this.state); // {counter: 2, name: "張三"}
}
handleClick = () => {
this.setState({
counter: this.state.counter + 1,
name: "張三"
})
this.setState({
counter: this.state.counter + 2
})
}
剛開始我也比較疑惑，為什么調(diào)用兩次setState設(shè)置counter的上渴，只有一次執(zhí)行了呢岸梨？還有一個疑問調(diào)用了兩次setState只執(zhí)行了一次componentDidUpdate?后面查閱資料才知道喜颁，多次調(diào)用this.setState，react會把多次的修改放在一個隊列緩存起來曹阔，等到合適的沒有在次遇到this.setState后半开，在會去統(tǒng)一執(zhí)行這些修改的值，這樣做的目前為了提高性能赃份，防止多次的render寂拆。當把修改counter放在隊列后，后面又有一個修改counter抓韩。后面的一個會把前面的給覆蓋纠永，所以為什么沒有執(zhí)行counter加1的修改。
