React 组件渲染两次，不使用状态钩子的函数组件只渲染一次答案

【问题标题】：React components are rendered twice, function components that don't use state hooks are rendered only onceReact 组件渲染两次，不使用状态钩子的函数组件只渲染一次
【发布时间】：2020-03-21 11:44:24
【问题描述】：

演示代码的codesandbox url：https://codesandbox.io/s/hungry-goldstine-gmvz4

Class组件被渲染两次，没有Props和State；不使用useState钩子的函数组件只渲染一次，使用useState钩子会渲染两次。

是否为获取 State 和 Props 值渲染了两次？

无论状态是否初始化，类组件都是有状态的组件？

谁能帮我理解这个问题？谢谢！！！

附加图片：

【问题讨论】：

在您的示例中，我可以看到 CR 两次和 FR... 两次。那么，你的问题又是什么？
类组件两次渲染有什么作用？
发生这种情况是因为您在代码中使用了React.StrictMode。如果你删除它，它的工作鳍。
我删除了React.StrictMode，但它并没有改变，它仍然渲染了两次
FP组件因为使用useState钩子而被渲染了两次，但是我不明白为什么CR组件会被渲染两次

标签： javascript reactjs

【解决方案1】：

正如@Sagar More 的评论，StricktMode 导致它。

没有StrickMode的输出

见docs

严格模式无法自动为您检测副作用，但可以通过使它们更具确定性来帮助您发现它们。这是通过有意双重调用以下方法来完成的：

类组件构造方法

渲染方法

setState 更新函数（第一个参数）

静态 getDerivedStateFromProps 生命周期

shouldComponentUpdate 方法

【讨论】：

对于像我这样的人，请转到“index.js”并删除“”标签