??最近復(fù)習(xí)了一些關(guān)于react的基礎(chǔ)，發(fā)現(xiàn)setState相關(guān)的知識(shí)忘記的差不多了，所以，以這篇博客記錄一下，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異步更新后的值

setState(partialState, callback) 方法獲取

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

生命周期函數(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è)合并

繼續(xù)學(xué)習(xí)??~