React 异步,同步?

一.如何获取异步的结果

import React, { Component } from "react";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: "helloWorld",
    };
  }
  render() {
    const { message } = this.state;
    return (
      <div>
        <h1>{message}</h1>
        <button onClick={() => this.changeText()}>改变文本</button>
      </div>
    );
  }

  changeText() {
    // setState是异步更新的
    // this.setState({
    //   message: "楚楚胡",
    // });
    // console.log(this.state.message); // 这种打印的还是你以前的代码 "helloWorld"

    this.setState(
      {
        message: "楚楚胡",
      },
      () => {
        // 1. 获取异步更新的state
        console.log(this.state.message); // 楚楚胡
      }
    );
  }

  // 2. 获取异步更新的state
  componentDidUpdate() {
    console.log(this.state.message); // 楚楚胡
  }
}

二. setState一定是异步吗？

(1) 在setTimeout或者原生dom事件中，setState是同步；

在setTimeout中的更新：

addClick() {
    // 情况一:这种就变为同步的代码了
    setTimeout(() => {
      this.setState({
        message: "楚楚胡~",
      });
      console.log(this.state.message); // 这种就变为同步了
    }, 0);
  }

情况二:这种就变为同步的代码了

componentDidMount() {
document.getElementById("btn").addEventListener("click", () => {
this.setState({
message: "楚楚胡~",
});
console.log(this.state.message); // 这种就变为同步了
});
}

(2) 在组件生命周期或React合成事件中，setState是异步；

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