React基于前值更新state的写法差异及计算器场景优化咨询

基础问题解答 #

问题1：三种写法的差异

• 前两种（函数式更新）和第三种（对象式更新）的核心差异和React的状态更新机制有关：setState是异步批量执行的，同一个事件循环内的多次setState会被合并处理。如果你在同一周期内多次修改同一个状态，对象式更新用的是调用setState那一刻的this.state，不是最新的更新后状态，会出现更新丢失；而函数式更新拿到的prevState是上一次更新完成后的最新状态，不会出现这个问题。
• 前两种的箭头函数和普通函数版本，在你的示例中因为更新函数内部没有用到this，仅用到prevState，所以只有语法差异。如果更新函数内需要用到this访问组件实例的其他属性，普通函数需要手动绑定this指向，箭头函数会继承外层作用域的this，不用额外绑定。

问题2：prevState的来源

setState本身就设计支持两种入参类型：

1. 直接传入状态对象，React会直接把这个对象合并到当前状态中；
2. 传入更新函数，React内部执行状态更新逻辑时，会自动把当前最新的未决状态作为第一个参数（即prevState）、最新的props作为第二个参数传入这个函数，用函数返回的结果合并状态。这是React官方提供的、专门用来处理新状态依赖旧状态场景的能力。

问题3：第三种写法是否错误

不是错误写法，只是适用场景有限。如果你的新状态不需要依赖旧状态计算，或者你能确定不会在同一个更新周期内多次修改这个状态，完全可以用这种写法，可读性更高。只有当新状态基于旧状态推导，且存在短时间多次触发更新的可能时，才必须用函数式更新避免逻辑异常。 #

实际场景解决方案 #

你现在的代码逻辑是完全可以正常运行的，不需要过度纠结写法。如果想要简化两套逻辑的代码，可以用JS的计算属性能力，不需要拆分两个函数，用箭头函数的简化版写法如下：

onNumberClick(e) {
  this.setState(prevState => {
    const targetKey = prevState.isFirst ? 'valueA' : 'valueB'
    return {
      [targetKey]: prevState[targetKey] + e
    }
  })
}

如果不喜欢箭头函数，用普通函数的写法也完全可以：

onNumberClick(e) {
  this.setState(function(prevState) {
    const targetKey = prevState.isFirst ? 'valueA' : 'valueB'
    return {
      [targetKey]: prevState[targetKey] + e
    }
  })
}

箭头函数在这个场景里完全不是必要的，它只是语法糖，你现有的注释版代码也完全可以满足需求，不用为了用箭头函数而强行修改。 #

内容的提问来源于stack exchange，提问作者tomdelahaba