React 中执行 setState 时怎么保证你取到的上一次state是正确的?

栏目: IOS · Android · 发布时间: 6年前

内容简介:setState 是 React 用于管理状态的一个特殊函数,我们在 React 中会经常使用到它,下面的场景你一定遇到过:上面这段代码,为什么呢?

setState 是 React 用于管理状态的一个特殊函数,我们在 React 中会经常使用到它,下面的场景你一定遇到过:

export class Todo extends React.Component{
  ... 
  increaseScore () {
    this.setState({count : this.state.count + 1});
    this.setState({count : this.state.count + 1});
  }
  ...
}
复制代码

上面这段代码, increaseScore 函数中希望将 count 这个状态的值在原来的基础上加1再加1,但是实际情况其实并不想你预期的那样,如果你在控制台把count的值打出来,会发现它只增加了1!

为什么呢?

setState 是异步的

setState 是异步的

看一下这个例子

class BadCounter extends React.Component{
  constructor(props){
    super(props);
    this.state = {count : 0} 
  }
  incrementCount=()=>{
    this.setState({count : this.state.count + 1}) 
    this.setState({count : this.state.count + 1})
  }
  render(){
    return <div>
              <button onClick={this.incrementCount}>+2</button>
              <div>{this.state.count}</div>
          </div>
  }
}

class GoodCounter extends React.Component{
  constructor(props){
    super(props);
    this.state = {count : 0} 
  }
  incrementCount=()=>{
   this.setState((prevState, props) => ({
      count: prevState.count + 1
    }));
   this.setState((prevState, props) => ({
      count: prevState.count + 1
    }));
  }
  render(){
    return <div>
              <button onClick={this.incrementCount}>+2</button>
              <div>{this.state.count}</div>
          </div>
  }
}
复制代码

在这个demo中,上下两个计数器都是希望实现点击后数+2,但是实际效果如下,只有第二个计数器达到了我们的预期:

React 中执行 setState 时怎么保证你取到的上一次state是正确的?

结合代码可以发现两个计数器的区别给 setState 传递的参数不一样

// 在错误示例中
this.setState({count : this.state.count + 1}) 
this.setState({count : this.state.count + 1}) 

// 在正确示例中
this.setState((prevState, props) => ({
  count: prevState.count + 1
}))
this.setState((prevState, props) => ({
  count: prevState.count + 1
}))
复制代码

查阅资料发现, 在多次调用 setState() 时,React 并不会同步处理这些 setState() 函数,而是做了一个“批处理”——如果使用对象作为参数传递给 setState ,React 会合并这些对象

而同样的情况下,当你给setState()传入一个函数时,这些函数将被放进一个队列,然后按调用顺序执行。

这里是react的核心成员 Dan Abramov 对 setState 为什么是异步的解释

总结

连续多次执行 setState 操作的情况是很常见的,下一次你如果在 setState 时需要用到 this.state 的时候要切记,在 setState 中利用函数操作来取得上一次的 state 值才是正确的做法!


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

计算统计

计算统计

Geof H.Givens、Jennifer A.Hoeting / 王兆军、刘民千、邹长亮、杨建峰 / 人民邮电出版社 / 2009-09-01 / 59.00元

随着计算机的快速发展, 数理统计中许多涉及大计算量的有效方法也得到了广泛应用与迅猛发展, 可以说, 计算统计已是统计中一个很重要的研究方向. 本书既包含一些经典的统计计算方法, 如求解非线性方程组的牛顿方法、传统的随机模拟方法等, 又全面地介绍了近些年来发展起来的某些新方法, 如模拟退火算法、基因算法、EM算法、MCMC方法、Bootstrap方法等, 并通过某些实例, 对这些方法的应用进行......一起来看看 《计算统计》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试