React 中 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
}

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

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

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

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

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

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
    }
  })
  }