在 componentDidMount 中同步调用 setState

Question

我是 React 初学者，正在学习生命周期钩子。我看到一些文章说不要在 componentDidMount 中同步调用 setState。但是我们可以在 then 的 promise 块中设置状态。

提到的原因是setState会导致组件重新渲染，影响性能。

我的问题是，即使我在 promise 的 then 块中写了 setState，无论如何都会重新渲染，而且 setState 是异步的，所以它不会立即被调用。那么为什么不建议在componentDidMount内部同步调用setState，有的话在then块里面写promise怎么解决

PS: 我对 SO 研究了很长时间，但找不到说不要同步调用 setState 的答案，我找到了一些相关的答案，但没有回答我的问题，而且我无法得到它们，因为它们与某些场景完全相关。

Answer 1

React setState 调用是异步的。 React 决定何时高效地执行它。例如，多个 setState 调用被批处理到一个更新中。解决这个问题的方法是使用 setStates 的第二个参数，这是一个回调，一旦 setState 完成并重新渲染组件就会执行。

handleThis = () => {
    this.setState({someVar: someVal}, funcToCallimmediately )
}

为了测试，console.log setState() 之后的状态变量并在“funcToCallimmediately”函数中写入另一个 console.log。

请注意，如果您需要根据先前的状态设置状态，则应使用其他方法。首先，只知道setState的第一个参数可以是一个对象，也可以是一个函数。所以你这样做...

this.setState((state, props) => {
  return {counter: state.counter + props.step};
});

要了解更多信息，请在此处阅读有关 setState() 的更多信息。你会得到你需要的。

Calling setState inside componentDidMount synchronously