为什么setState in reactjs Async而不是Sync？

Question

我刚刚发现,在this.setState()任何组件中的react 函数是异步的,或者在调用它的函数完成后调用.

现在我搜索并找到了这个博客(http://www.bennadel.com/blog/2893-setstate-state-mutation-operation-may-be-synchronous-in-reactjs.htm)

在这里,他发现setState异步(在堆栈为空时调用)或同步(调用后立即调用)取决于触发状态变化的方式.

现在这两件事很难消化

1. 在博客中,setState函数在函数内部被调用updateState,但触发updateState函数的内容并不是被调用函数所知道的.
2. 为什么他们setState像JS一样异步是单线程语言,这个setState不是WebAPI或服务器调用,所以必须只在JS的线程上完成.他们是这样做的,以便重新渲染不会停止所有事件监听器和东西,或者存在其他一些设计问题.

Answer 1

您可以在状态值更新后调用函数:

this.setState({foo: 'bar'}, () => { 
    // Do something here. 
});

此外,如果您要同时更新许多州,请将它们全部分组setState:

this.setState({foo: "one"}, () => {
    this.setState({bar: "two"});
});

Answer 2

1.)setState操作是异步的,并且为了性能提升而进行批处理.这在setState的文档中有解释.

setState()不会立即改变this.state,但会创建挂起状态转换.调用此方法后访问this.state可能会返回现有值.无法保证对setState的调用进行同步操作,并且可以对调用进行批处理以获得性能提升.

2.)为什么它们会使setState异步,因为JS是单线程语言,而这个setState不是WebAPI或服务器调用:

这是因为setState改变了状态并导致重新渲染.这可能是一项昂贵的操作,并使其同步可能会使浏览器无响应.
因此,setState调用是异步的,也可以是批处理的,以获得更好的UI体验和性能.

Answer 3

我知道这个问题已经过时了,但很长一段时间以来,包括我在内的很多反应用户都引起了很多困惑.最近Dan Abramov(来自反应小组)刚刚写了一个很好的解释,为什么setState异性的本质是:

https://github.com/facebook/react/issues/11527#issuecomment-360199710

setState意图是异步的,在Dan Abramov的链接解释中有一些非常好的理由.这并不意味着它总是异步的 - 它主要意味着你不能依赖它是同步的.ReactJS考虑了您正在更改状态的场景中的许多变量,以确定何时state应该实际更新并重新呈现组件.
一个简单的例子来说明,如果你打电话setState作为对用户操作的反应,那么state可能会立即更新(虽然,你再也不能指望它),所以用户不会感到任何延迟,但如果您setState对ajax调用响应或其他未被用户触发的事件进行调用,则状态可能会稍有延迟更新,因为用户不会真正感受到此延迟,并且通过等待一起批量处理多个状态更新并将DOM重新渲染次数来提高性能.

Answer 4

您可以使用以下包装进行同步调用

this.setState((state =>{
  return{
    something
  }
})

Answer 5

好文章在这里 https://github.com/vasanthk/react-bits/blob/master/patterns/27.passing-function-to-setState.md

// assuming this.state.count === 0
this.setState({count: this.state.count + 1});
this.setState({count: this.state.count + 1});
this.setState({count: this.state.count + 1});
// this.state.count === 1, not 3

Solution
this.setState((prevState, props) => ({
  count: prevState.count + props.increment
}));

或传递回调 this.setState ({.....},callback)

https://medium.com/javascript-scene/setstate-gate-abc10a9b2d82 https://medium.freecodecamp.org/functional-setstate-is-the-future-of-react-374f30401b6b