React-setState的那些事儿

Z时代
2024-01-10
分类：综合

react

关于setState，使用过react的人应该再熟悉不过了，在hooks还不那么普及的时候，除了使用函数式组件，我们使用最多的应该就是类创建react的组件了，而在类组件中我们通常会使用state来管理组件的数据变化及更新。

setState的使用注意事项

setState(updater, callback)这个方法是用来告诉react组件数据更新渲染。

在使用setState改变状态之后，立刻通过this.state去拿最新的状态往往可能并不容易拿到的。

要点1：

基于此如果需要拿到最新的state，根据官方给的方法就是在‘componentDidUpdate或者在setState的第二个参数的回调函数中获取

componentDidMount(){
    this.setState({
      date: 3,
    }, function(){
      console.log('callback',this.state.date) // date为 3
    });
    console.log('fn',this.state.date) // date为1
  }

要点2：

对于同时累加多次的问题

componentDidMount(){
    this.setState({
      date: this.state.date + 1,
    });
    this.setState({
      date: this.state.date + 1,
    });
    this.setState({
      date: this.state.date + 1,
    });
  }
// 最后date的值只累加了一次，为2

我们的目标值可能是4，但是react最后给出的与我们目标值不一样，这是因为react为了考虑性能问题，防止重复渲染将setState方法统一在渲染前统一进行，之后再进行render

如果想要得到4，推荐再setState传function

componentDidMount(){
    this.setState((state) => {
      return {date: state.date + 1}
    });
    this.setState((state) => {
      return {date: state.date + 1}
    });
    this.setState((state) => {
      return {date: state.date + 1}
    });
  }
// 最后得到目标值4

那么setState是同步的还是异步的？

从上面我们发现当我们在setState后没法立即拿到我们设置的值，可能很多人想说，因为setState是异步的。情况真的是这样吗，看下面的例子

// 定时器中
componentDidMount(){
    setTimeout(() => {
      this.setState({
        date: 2
      });
      console.log('1111', this.state.date) // date为2
    })
  }
// 或者监听函数
componentDidMount(){
    document.getElementById('button').addEventListener('click', this.clicks)
  }
clicks = () => {
    this.setState({
      date:3,
    })
    console.log('addEventListener', this.state.date); // date为3
  }