例如下面的代碼，兩次打印出的結(jié)果是相同的：

componentDidMount() {

this.setState({ index: this.state.index + 1 }, () => {

console.log(this.state.index);

})

this.setState({ index: this.state.index + 1 }, () => {

console.log(this.state.index);

})

}

原因就是 React會批處理機制中存儲的多個 setState進行合并，來看下 React源碼中的 _assign函數(shù)，類似于 Object的 assign：

_assign(nextState,typeof partial ==='function'?partial.call(inst,nextState,props,context):partial);

如果傳入的是對象，很明顯會被合并成一次，所以上面的代碼兩次打印的結(jié)果是相同的：

Object.assign(

nextState,

{index: state.index+ 1},

{index: state.index+ 1}

)

注意， assign函數(shù)中對函數(shù)做了特殊處理，處理第一個參數(shù)傳入的是函數(shù)，函數(shù)的參數(shù) preState是前一次合并后的結(jié)果，所以計算結(jié)果是準(zhǔn)確的：

componentDidMount() {

this.setState((state, props) => ({

index: state.index + 1

}), () => {

console.log(this.state.index);

})

this.setState((state, props) => ({

index: state.index + 1

}), () => {

console.log(this.state.index);

})

}

所以上面的代碼兩次打印的結(jié)果是不同的。

最佳實踐

React會對多次連續(xù)的 setState進行合并，如果你想立即使用上次 setState后的結(jié)果進行下一次 setState，可以讓 setState 接收一個函數(shù)而不是一個對象。這個函數(shù)用上一個 state 作為第一個參數(shù)，將此次更新被應(yīng)用時的 props 做為第二個參數(shù)。

總結(jié)

以上是生活随笔為你收集整理的jlabel 不能连续两次set_为什么有时连续多次setState只有一次生效？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。