這篇文章帶給大家的內容是關於React下setState機制的簡單介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
api解析: setState(updater, [callback])
updater: 更新資料 FUNCTION/OBJECT
callback: 更新成功後的回呼FUNCTION
// updater - Function
this.setState((prevState, props) => {
return {counter: prevState.counter + props.step};
});
// update - Object
this.setState({quantity: 2})setState的特點：
1.非同步:react通常會收集一批需要更新的元件，然後一次更新來保證渲染的效能
2.淺合併Objecr.assign()
帶來的問題與解決
在使用setState改變狀態之後，立刻透過this.state去拿最新的狀態
解決： componentDidUpdate或setState的回呼函數裡取得
// setState回调函数
changeTitle: function (event) {
this.setState({ title: event.target.value }, () => this.APICallFunction());
},
APICallFunction: function () {
// Call API with the updated value
}有一個需求，需要在在onClick裡累加兩次，使用物件的方法更新，則只會加一次
解決：使用updater function
onClick = () => {
this.setState({ index: this.state.index + 1 });
this.setState({ index: this.state.index + 1 });
}
// 最后解析为,后面的数据会覆盖前面的更改，所以最终只加了一次.
Object.assign(
previousState,
{index: state.index+ 1},
{index: state.index+ 1},
)
//正确写法
onClick = () => {
this.setState((prevState, props) => {
return {quantity: prevState.quantity + 1};
});
this.setState((prevState, props) => {
return {quantity: prevState.quantity + 1};
});
}建議：
1.不要在render()函數裡面寫setstate()，除非你自己客製了shouldComponentUpdate方法，不然會造成無限迴圈
2 .不能給state直接賦值，不會引發render eg: this.state.num = 2
3.對數組和物件等引用物件操作時，使用返回新物件的方法
array: 不要使用push、 pop、shift、unshift、splice可使用concat、slice、filter、擴充語法
object: Object.assgin/擴充語法
setState更新機制
#如圖： pending queue 和update queue
以上是React下setState機制的簡單介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
