首頁 >web前端 >js教程 >React下setState機制的簡單介紹

React下setState機制的簡單介紹

不言
不言轉載
2018-10-26 15:35:202016瀏覽

這篇文章帶給大家的內容是關於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機制的簡單介紹

以上是React下setState機制的簡單介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:segmentfault.com。如有侵權,請聯絡admin@php.cn刪除