为什么我的反应组件在初始加载时渲染两次？

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

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

据此documentation：

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

• 类组件构造函数、渲染和 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 会触发这些方法两次以检查任何副作用。如果有任何副作用，将记录错误。 （副作用：在方法/组件之外更新的东西）

   • 构造函数
   • componentWillMount（或 UNSAFE_componentWillMount）
   • componentWillReceiveProps（或 UNSAFE_componentWillReceiveProps）
   • componentWillUpdate（或 UNSAFE_componentWillUpdate）
   • getDerivedStateFromProps
   • 应该组件更新
   • 渲染
   • setState 更新函数（第一个参数）

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

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

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