关于react中setState的问题,今天无意中发现的,请各位朋友帮忙看一下 小的实在看不明白

Question

首先 下面是我的第一段代码:

let testValue = this.state.testValue;
    this.setState({testValue: testValue + 1});
    console.log(this.state.testValue);
    this.setState({testValue: testValue + 1});
    console.log(this.state.testValue);
    setTimeout(() => {
      // 注意下面的testValue的下段代码的变化
      this.setState({testValue:testValue + 1});
      console.log(this.state.testValue);
      this.setState({testValue:testValue + 1});
      console.log(this.state.testValue);
    }, 0);

页面上console中的输出结果是:

接着是另外一段代码:
let testValue = this.state.testValue;

this.setState({testValue: testValue + 1});
console.log(this.state.testValue);
this.setState({testValue: testValue + 1});
console.log(this.state.testValue);
setTimeout(() => {
// testValue这里是两段代码的不同点
  this.setState({testValue:this.state.testValue + 1});
  console.log(this.state.testValue);
  this.setState({testValue:this.state.testValue + 1});
  console.log(this.state.testValue);
}, 0);

请问为什么呢?ps:最开始的时候testValue默认值为1,请各位不吝赐教!

Answer 1

想明白了,因为在setTimeout里面的testValue !== this.state.testValue的,这样便能说的通了

Answer 2

let testValue = this.state.testValue; // testValue 就是1了, 不是响应式的哈

Answer 3

https://reactjs.org/docs/reac...
setState() enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state. This is the primary method you use to update the user interface in response to event handlers and server responses.
以上是官方文档对批量setState的解释，只说了说setState会排队，但实际上，在当前版本中(16)，在不同的地方批量执行setState会有不同的表现。

以下是官方文档中给的一个STO链接，说明在什么时候setState会被批量处理
In depth: When and why are setState() calls batched?（深入了解：什么时候并且为什么setState()调用会被合并）

Currently (React 16 and earlier), only updates inside React event handlers are batched by default. There is an unstable API to force batching outside of event handlers for rare cases when you need it.

In future versions (probably React 17 and later), React will batch all updates by default so you won't have to think about this. As always, we will announce any changes about this on the React blog and in the release notes.
现在(React 16 和之前)，在默认情况下，只有直接在React event handlers里写的setState会被合并处理
未来版本(大概从React 17 开始)，React会默认合并所有的setState

下面官方文档中给的另一个链接
In depth: Why isn’t this.state updated immediately?（深入了解：为什么this.state没有被立刻更新？）