在 componentDidMount 中同步调用 setState答案

【问题标题】：Calling setState inside componentDidMount synchronously在 componentDidMount 中同步调用 setState
【发布时间】：2021-02-13 07:33:18
【问题描述】：

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

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

我的问题是，即使我在 then 块中写入 setState ，无论如何都会重新渲染，而且 setState 是异步的，因此不会立即调用它。那么为什么不建议在 componentDidMount 中同步调用 setState，如果有的话，在 then 块中写入如何解决问题。

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

【问题讨论】：

额外的重新渲染也不错。问题在于不必要的重新渲染。
@Sulthan，你能解释一下吗？我的意思是在 then 块之外的 setState 如何导致不必要的重新渲染？
在 componentDidMount 中调用 setState 并没有错，混淆可能来自官方文档中的警告，即组件将重新渲染，但正如您自己所说，如果您更改组件的状态最终会重新渲染。 reactjs.org/docs/react-component.html#componentdidmount

【解决方案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() 的更多信息。你会得到你需要的。

【讨论】：