useEffect传递的空数组，为什么初始化的时候调用了两次

本文主要是介绍useEffect传递的空数组，为什么初始化的时候调用了两次，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

这是我的代码：

import React, { useEffect } from 'react'
import './scss/MyScene.scss'
import Three from '@/common/three'export default function MyScene() {var three;useEffect(() => {three = new Three('my_scene')console.log(three)}, [])return (<div id='my_scene'></div>)
}

看起来这个代码中，应该会执行一次打印语句。但是实际上却执行了两次。

 在React中，useEffect 钩子可能会执行两次的原因通常与React的严格模式（Strict Mode）有关。React的严格模式是一种开发工具，用于突出显示应用程序中的潜在问题。在开发模式下，严格模式会故意重复调用某些函数，以帮助开发者发现意外的副作用。

因此，只需要回到main.jsx中去掉StrictMode标签就可以解决了。

这篇关于useEffect传递的空数组，为什么初始化的时候调用了两次的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---