我有一个名为 (First) 的功能组件
function First() {
const [count,setCount]=useState(0)
console.log("component first rendering") // this logging is happening twice
return (
<div>
first component
</div>
)
}
当我最初运行应用程序时，console语句记录了两次，为什么它应该只记录一次，因为我没有明确更新状态。
我在这里的代码沙箱中尝试过这个，果然，它渲染了两次。这是因为，在index.js文件中，它使用React.StrictMode.
根据这个文件：
严格模式无法自动为您检测副作用，但它可以通过使它们更具确定性来帮助您发现它们。这是通过有意重复调用以下函数来完成的：
类组件构造函数、render 和 shouldComponentUpdate 方法
传递给 useState、useMemo 或 useReducer 的函数
这通常是为了帮助仅在开发环境中发现副作用。它不适用于生产环境。
所以，如果你不希望它渲染两次，只需删除<React.StrictMode> </ React.StrictMode>中index.js的文件，它会正常工作。
希望能帮助到你 ：）
发生这种情况是因为您的应用程序被包裹在React.StrictMode.
<React.StrictMode>
<First />
</React.StrictMode>
React 16.* 中为函数式组件引入了严格模式。我们将组件包装在下面React.StrictMode以识别应用程序中的潜在错误。
StrictMode 有助于保持大型代码库的稳定性，并有助于升级到较新版本的 React。StrictMode 在控制台中记录我们的应用程序可能存在的问题的错误：
React.StrictMode 需要两次触发一些方法和生命周期钩子来解决这些问题：
这些方法可能会被调用多次并且可能产生副作用，因此 React.StrictMode 会触发这些方法两次以检查任何副作用。如果有任何副作用，将记录错误。（副作用：在方法/组件之外更新的东西）
有可能我们正在使用一些旧的 React 方法和 API，因此 React.StrictMode 识别出并将错误记录到控制台提及，该方法已过时。
结论： React 社区提供了 React.StrictMode 来帮助我们的应用程序跟踪变化，我们可以轻松地将我们的应用程序升级到新版本。