Question

我看到了带有回调的React setState方法，这意味着在确保已设置新状态并重新渲染组件之后，将执行回调，例如以下示例：

this.setState({value: event.target.value}, function () {
    console.log(this.state.value);
}); //new state will be logged to console after it was set and rendered

现在，如果我不是完全错误，则可以使用异步来实现同一件事功能：

async someFunction(){
await this.setState({value: event.target.value});
console.log(this.state.value);
}

我现在的问题是，如果我在一个函数中使用多个await setState调用，会影响性能吗？它会在每个setState调用之后重新渲染并等待它完成渲染过程，然后执行net await setState调用等，并可能造成性能问题吗？例如：

async someFunction(){
await this.setState({value: event.target.value});
let result = await someAPICall();
await this.setState({resultApiCall: result});
await.....
}

Answer 1

是的，您完全错了：） setState不会返回承诺，因此您不能仅仅await兑现承诺。当然，您可以将回调包装到Promise中，但是您可能不需要它（因为通常不需要等待重新渲染）。

如果我在一个函数中使用多个await setState调用，会影响性能吗？

好的。两次调用函数的速度大约是一次调用的速度的两倍。

在每次setState调用之后会重新渲染并等待它完成渲染过程，然后[继续]吗？

是的，如果您愿意await，如下所示：

 await new Promise(resolve => this.setState(/*...*/, resolve));

并可能造成性能问题？

不，可能不是。调用setState会很快执行，您必须多次调用它才能影响性能。

React.js：多个异步setState方法调用是否总是会在之后重新渲染并影响性能？

1 个答案: