React下setState機制的簡單介紹

這篇文章帶給大家的內容是關於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中文網其他相關文章！