为什么我的 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

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

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

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

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

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

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

   • 构造函数
   • componentWillMount（或 UNSAFE_componentWillMount）
   • componentWillReceiveProps（或 UNSAFE_componentWillReceiveProps）
   • componentWillUpdate（或 UNSAFE_componentWillUpdate）
   • 从Props获取DerivedState
   • 应该组件更新
   • 使成为
   • setState 更新器函数（第一个参数）

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

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

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

Answer 2

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

根据此文档：

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

• 类组件构造函数、render 和 shouldComponentUpdate 方法

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

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

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

希望能帮助到你 ：）