React中setState的怪异行为 ——setState没有即时生效

最新推荐文章于 2025-04-12 10:28:36 发布

置顶

小敏哥

最新推荐文章于 2025-04-12 10:28:36 发布

阅读量2.4w

点赞数 17

分类专栏： web前端 react react 文章标签： setState立刻生效 react源码分析 setState

本文链接：https://blog.youkuaiyun.com/handsomexiaominge/article/details/86348235

版权

setState可以说是React中使用频率最高的一个函数了，我们都知道，React是通过管理状态来实现对组件的管理的，当this.setState()被调用的时候，React会重新调用render方法来重新渲染UI

但实际使用的时候，我们会发现，有时候我们setState之后，并没有立刻生效，例如我们看一下以下的示例代码

class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    this.setState({count: this.state.count + 1});
    console.log(this.state.count); // 输出0
    this.setState({count: this.state.count + 1});
    console.log(this.state.count); // 输出0
    setTimeout(() => {
      this.setState({count: this.state.count + 1});
      console.log(this.state.count); // 输出2
      this.setState({count: this.state.count + 1});
      console.log(this.state.count); // 输出3
    }, 0);
  }

  render() {
    return <div> test </div>;
  }
}

开发过程中我们会发现，在componentDidMount方法中，我们调用s