javascript - 关于React的setState的一些疑问

Question

今天在练习react的表单中，发现一个比较奇怪的问题。
问题描述：在type为radio的单选框上添加onChange事件，在这个handler事件中的setState()方法总是会有一个延迟执行的情况？

我们看到正常情况下的this.state.formdata.count的结果应该和counts结果保持一致，但是在控制台里（也就是最后一张图片里面）他们的取值不同？并且当我再次点击radio 的时候显示分别是2 1，这里就解释不通了，为什么第一次setState()方法没有调用？就像是有延迟执行一样。求解~不胜感激T-T

Answer 1

看这里就知道了哦，不是同步方法

Answer 2

this.setState 是在 render 时, state 才会改变调用的, 也就是说, setState 是异步的. 组件在还没有渲染之前, this.setState 还没有被调用.这么做的目的是为了提升性能, 在批量执行 State 转变时让 DOM 渲染更快.

另外, setState 函数还可以将一个回调函数作为参数, 当 setState 执行完并且组件重新渲染之后. 这个回调函数会执行, 因此如果你想查看通过 setState 改变后的 state, 可以这样写:

this.setState({myState: nextState}, ()=>{console.log(this.state.myState)})

参考react 官方文档

Answer 3

不是没调用，是setState是个异步方法，这个方法本身还有一个回调函数的参数的