React第七天 - setState

为什么使用 setState

• 当修改 state 的时候，希望 react 根据最新的 state 渲染界面，直接修改 state 并不能触发页面的状态改变，react没有实现像vue2中的Object.definProperty或vue3中的proxy来监听数据的变化，必须通过 setState 告知 react的状态改变。setState 是继承子 Component，当调用了 setState 的时候，会重新执行 render 方法

setState 是异步的吗？

** 1. 异步 **

  // 组件第一次渲染
  componentDidMount() {
    console.log("组件第一次渲染，打印的是初始 state")
  }

  // 更新后立即调用
  componentDidUpdate() {
    console.log("更新后立即调用，打印的是更新后的 state")
  }

** 2. 在合成事件 **

• 异步现象
• 代码是自上而下的

** 在 setTimeout 修改 state, 是同步还是异步？ **

  state = {
    num: 0
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({ num: 1 })
      console.log("setTimeout:", this.state.num); // 0 异步
    }, 1000)
  }

** 原生事件中 setState 是同步的 **