React组件的DidMount事件里的setState事件

最新推荐文章于 2024-10-08 19:08:56 发布

转载

最新推荐文章于 2024-10-08 19:08:56 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a575c72518825734f52a049

文章标签：

#javascript #ui #ViewUI

本文深入探讨了在React组件的componentDidMount事件中使用setState的行为。文章解释了由于批量更新的存在，导致在该生命周期方法中多次setState不会立即更新状态。通过分析setState的执行流程和Transaction的概念，揭示了在setTimeout之外的setState会立即更新状态的原因。此外，还讨论了在点击事件中多次setState失败的情况，并介绍了如何利用batchUpdate进行批量处理以避免不必要的render调用。

参考原文：

React 源码剖析系列－解密 setState
setState 之后发生了什么 —— 浅谈 React 中的 Transaction

无法多次setState

React组件的componentDidMount事件里使用setState方法，会有一些有趣的事情：

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      val: 0
    };
  }
  
  componentDidMount() {
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 1 次 log

    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 2 次 log

    setTimeout(() => {
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 3 次 log

      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 4 次 log
    }, 0);
  }

  render() {
    return null;
  }
};
复制代码

运行这段代码，我们可以看到屏幕里打印的是0、0、2、3。