this.setState的问题？

Question

react中这样打印1 2
但是我this.state.count +1 确是1 1

我知道这个是异步的，但为啥前面就是1 2

Answer 1

因为你是 this.state.count ++......

Answer 2

你这个和 react 毫无关系，count++ 是原值自增。。。

let count = 1;

const newCount = count + 1;
console.log(count); // 1

// ------------------------

const newCount = count++;
console.log(count); // 2

Answer 3

请不要直接操作state中的值，如 this.state.count++ 是不允许的，而是要通过 setState() 来更新。

为什么两种方式的结果不一样？

this.state.count++

这种方式，是直接在 state 上操作的，this.state.count++ 的操作是先获取了他的值，再执行自增加1的操作，这是一个同步更新的操作，下面获取的时候，就已经自增为2了。

但这种方式，并不会引起组件的渲染，也就是说虽然console.log()里输出了2，但页面中依然是1，因为传给 setState() 里的就是1，调用了该方法后，又重新将 count 设置为了1。

因此每次点击，都是从1自增为2。

this.setState({ count: this.state.count + 1 })

这种方式是获取了 state.count 当前的值，然后在 setState() 里执行加1的操作（state.count本身是没有变的，还是1）。但 setState() 是一个异步操作，而下面的 console.log( this.state.count ) 是同步操作。因此输出的是1。

而经过调用 setState() 的异步更新后，state.count 就会变成2，视图中也会变成2。

怎么理解这个 setState() 的异步操作？执行setState()后，并不是马上更新会组件，而是先标记该组件为待更新，然后就接着执行后面其他的逻辑了。等当前这次渲染所有的任务都执行完毕后，React会挑选一个空档期，来更新被标记的组件。

因此，在 setState() 中的操作，会晚于后面同步执行的操作。