快捷導(dǎo)航

React 中 setState使用小結(jié)

更新時(shí)間：2023年10月30日 14:55:55 作者：大佩梨

這篇文章主要介紹了React 中 setState使用小結(jié),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

最近復(fù)習(xí)了一些關(guān)于react的基礎(chǔ)，記錄一下，setState使用的細(xì)節(jié)。
setState的異步更新
自定義事件中為異步更新

<div>
  <h2>{this.state.message}</h2>
  <button onClick={e => this.changeText()}>改變文本</button>
  </div>

changeText() {
  this.setState({
    message: "Hello React"
  })
  console.log(this.state.message);  // Hello World, 并不能同步拿到最新值 Hello React
}

為什么setState設(shè)計(jì)為異步呢?
setState設(shè)計(jì)為異步，可以顯著的提升性能；

如果每次調(diào)用setState都進(jìn)行一次更新，那么意味著render函數(shù)會(huì)被頻繁調(diào)用，界面重新渲染，這樣效率是很低的；最好的辦法應(yīng)該是獲取到多個(gè)更新，之后進(jìn)行批量更新；
如果同步更新了state，但是還沒(méi)有執(zhí)行render函數(shù)，那么state和props不能保持同步；state和props不能保持一致性，會(huì)在開(kāi)發(fā)中產(chǎn)生很多的問(wèn)題

及時(shí)獲取到setState異步更新后的值：
1.setState(partialState, callback) 通過(guò)回調(diào)，callback方法獲取，

changeText() {
  this.setState({
    message: "Hello React"
  }, () => {
    console.log(this.state.message); // Hello React
  });
}

2.生命周期函數(shù) componentDidUpdate 獲取

componentDidUpdate(prevProps, provState) {
  console.log(this.state.message); // Hello React
}

setState的同步更新
setTimeout 中為同步更新

changeText() {
  setTimeout(() => {
    this.setState({
      message: "Hello React"
    });
    console.log(this.state.message); // Hello React
  }, 0);
}

原生DOM事件中為同步更新

const btnEl = document.getElementById("btn");
  btnEl.addEventListener('click', () => {
    this.setState({
      message: "Hello React"
    });
  console.log(this.state.message);  // Hello React
})

setState的數(shù)據(jù)合并

使用 Object.assign(target, …sources)來(lái)完成的，每次setState并沒(méi)有直接替換state中的所有數(shù)據(jù)，而是覆蓋差異項(xiàng)，就是setState中的key項(xiàng)

setState的方法合并

多個(gè)setState連續(xù)執(zhí)行，最終只會(huì)執(zhí)行一個(gè)，例子中最后counter只增加了 1

increment() {
  this.setState({
    counter: this.state.counter + 1
  });
  this.setState({
    counter: this.state.counter + 1
  });
  this.setState({
    counter: this.state.counter + 1
  });
}

setState(callback) 取消合并，例子中最后counter只增加了 3

increment() {
  this.setState((state, props) => {
    return {
      counter: state.counter + 1
    }
  })

  this.setState((state, props) => {
    return {
      counter: state.counter + 1
    }
  })

  this.setState((state, props) => {
    return {
      counter: state.counter + 1
    }
  })
  }

總結(jié)

在組件生命周期或React合成事件中，setState是異步；在定時(shí)器或原生dom事件中，setState是同步；
setState數(shù)據(jù)合并，實(shí)際上是Object.assign(target, …sources)
通過(guò)setState(callback)的方式可取消setState的多個(gè)合并

到此這篇關(guān)于React 中 setState詳解的文章就介紹到這了,更多相關(guān)React setState內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: