Reactjs 为什么我们应该避免组件构造函数中的副作用？

我想知道是否有充分的理由不在组件的构造函数中而不是在其

componentDidMount

hook中发送请求？我已经看到了一些：在构造函数中获取数据是一个好主意吗？答案引用了文档中有趣的一点：

避免在构造函数中引入任何副作用或订阅。对于这些用例，请改用componentDidMount（）

我的问题是关于这一点，我很想了解副作用的问题是什么，比如这里在构造函数中发送请求

也许一个简单的例子有助于消除关于我的问题和链接问题之间差异的任何歧义：

在构造函数内发送请求

类SomeComponent扩展React.Component{
建造师（道具）{
this.request=fetch（props.someURL）；
}
异步组件didmount（）{
const data=等待此请求；
this.setState（{'data'：data}）；
}
}

或将其发送到

componentDidMount

类SomeComponent扩展React.Component{
异步组件didmount（）{
const data=wait fetch（props.someURL）；；
this.setState（{'data'：data}）；
}
}

或者正如链接问题中所建议的，绝对不好的一个：获取构造函数

类SomeComponent扩展React.Component{
建造师（道具）{
this.data=wait fetch（props.someURL）；
}
异步组件didmount（）{
this.setState（{'data'：this.data}）；
}
}

好的，有多种原因：

在服务器端渲染中，您的副作用并不总是有意义的，甚至不可运行，在SSR

componentDidMount

hook中，您的拆卸逻辑也不会被调用

它可能会触发意外的

设置状态

，该设置状态在

在某些情况下，组件将被构造，但不会被装入或将在以后装入，并且它们的构造函数中的调用副作用是没有意义的

---

这回答了你的问题吗？不，不完全一样（问题不同，因此我的答案不准确）。我认为这在我的问题中是明确的：我在自己的问题中链接了这个问题，并解释了为什么这两个问题与我的第一个代码示例不同。我将添加第三段代码来再次坚持这一点。我知道您链接了它，但是对我来说，这个问题与您链接的另一个问题没有足够的不同，因此我投票将其作为该问题的副本关闭（措辞是stack overflow通过这样做自动生成的注释）。您可能希望编辑您的问题，以突出问题的不同之处，以及为什么另一个问题的答案不充分。对不起，我不明白您不明白的地方。从该问题的答案（12票以上）中：“在装入组件之前调用构造函数…如果在构造函数中调用setState，组件有时不会重新呈现。“你对此有什么具体问题没有涉及到？您似乎有这样一个心智模型，它将React组件同步映射到DOM，但React的工作方式并非如此：它将DOM访问作为性能优化进行批处理，并且不允许您在未安装的组件上调用setState来帮助调试。所有这些都包含在文档中。