为什么我的 react 组件在初始加载时渲染两次?

Question

我有一个叫做(First(的功能组件

function First() {
const [count,setCount]=useState(0)
console.log("component first rendering") // this logging is happening twice

return (
<div>
first component
</div>
)
}

当我最初运行应用程序时，console语句正在记录两次为什么，它应该只记录一次，因为我没有显式更新状态。

Answer 1

我已经在代码沙箱中尝试过这个，果然，它确实渲染了两次。这是因为，在index.js文件中，它使用React.StrictMode.

根据此文档：

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

• 类组件构造函数、呈现器和 shouldComponentUpdate 方法

• 传递给 useState、useMemo 或 useReducer 的函数

这通常是为了仅在开发环境中帮助发现副作用。它不适用于生产环境。

因此，如果您不希望它渲染两次，只需删除index.js文件中的<React.StrictMode> </ React.StrictMode>，它就会正常工作。

希望对:)有所帮助

Answer 2

发生这种情况是因为您的应用程序被包装在React.StrictMode下。

<React.StrictMode>
<First />
</React.StrictMode>

在 React 16.* 中为功能组件引入了严格模式。我们将组件包装在React.StrictMode下，以识别应用程序中的潜在错误。

StrictMode 有助于保持大型代码库的稳定性，并有助于升级到较新版本的 React。StrictMode 在控制台中记录应用程序可能存在的问题的错误：

React.StrictMode 需要两次触发一些方法和生命周期钩子来解决这些问题：

1. 这些方法可能会被调用多次，并且可能会产生副作用，因此 React.StrictMode 会触发这些方法两次以检查任何副作用。如果有任何副作用，将记录错误。(副作用：在方法/组件外部更新的内容(

   • 构造 函数
   • 组件将挂载(或UNSAFE_componentWillMount(
   • componentWillReceiveProps(或UNSAFE_componentWillReceiveProps(
   • 组件将更新(或UNSAFE_componentWillUpdate(
   • getDerivedStateFromProps
   • 应该组件更新
   • 呈现
   • setState 更新程序函数(第一个参数(

2. 我们有可能正在使用一些旧的 React 方法和 API，因此 React.StrictMode 识别出了这一点并将错误记录到控制台提及，该方法已经过时了。

3. React.StrictMode 仅适用于开发模式，因此无需担心生产。

结论：React.StrictMode 由 React 社区提供，以帮助我们的应用程序跟踪更改，我们可以轻松地将应用程序升级到新版本。