为什么 setState 在 reactjs Async 中而不是 Sync？

javascript asynchronous reactjs multithreading

2022-08-30 01:58:52

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

在这里，他发现是异步（当堆栈为空时调用）或同步（一旦调用就调用），具体取决于如何触发状态更改。setState

现在这两样东西很难消化

在博客中，函数是在函数内部调用的，但是触发函数的不是被调用函数所知道的。setStateupdateStateupdateState
为什么他们会做异步，因为JS是单线程语言，而这个setState不是WebAPI或服务器调用，所以只能在JS的线程上完成。他们这样做是为了让重新渲染不会停止所有事件侦听器和东西，还是存在其他一些设计问题。setState

答案 1

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

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

另外，如果您一次要更新许多状态，请将它们全部分组在同一个状态中：setState

而不是：

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

只需执行以下操作：

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

答案 2

1）操作是异步的，并且为了提高性能而进行批处理。本文档中对此进行了说明。setStatesetState

setState（）不会立即改变 this.state，而是创建一个挂起的状态转换。调用此方法后访问 this.state 可能会返回现有值。无法保证对 setState 的调用的同步操作，并且可以对调用进行批处理以提高性能。

2）为什么他们会让setState异步，因为JS是一种单线程语言，这不是WebAPI或服务器调用？setState

这是因为会更改状态并导致重新呈现。这可能是一个代价高昂的操作，并且使其同步可能会使浏览器无响应。

因此，setState 调用是异步的，并且是批处理的，以获得更好的 UI 体验和性能。setState