额，今天在编写一段简短的测试代码，想在组件加载的时候弹出一个alert提示，但是刷新的时候会弹出两次alert提示？只能是奇怪了！研究了半天终于找到了解决的办法。

事故现场

import { useState, useEffect } from "react";

function App() {
const testCode = `alert('11111')`;

function test() {
    alert('1111');
}

useEffect(() => {
    test();
}, []);

return (
    <div id="app" className="container mx-auto grid justify-normal p-8">
    <canvas id="matrix"></canvas>
    {/* 在预览区域显示生成的HTML代码 */}
    <div dangerouslySetInnerHTML={{ __html: testCode }}></div>
    </div>
);
}

export default App;

这段代码中，test();会在页面刷新时执行两次，百思不得其解，询问了ChatGPT给出的答案是：如果您希望在开发模式下仅执行一次 useEffect，可以使用 useEffect 的第二个参数，即依赖项数组。通过指定一个空数组 [] 作为依赖项，您可以告诉 React 仅在组件挂载和卸载时执行一次 useEffect。但是这个回答显然没有解决问题。

解决方法

后来在掘金搜到了两篇文章，详细介绍了useEffect背后的原理，同时也找到官方给出的解释，其实很简单，只要修改main.jsx中的代码即可：

<React.StrictMode>
    <App />
</React.StrictMode>,

修改如下：

<App />

嗯，就是这么简答，究其原因是因为使用的手脚架应为采用react的严格模式StrictMode，我们删除StrictMode就好了。

相关链接

(useEffect重复调用两次的坑)[https://juejin.cn/post/7105652180501135367]

(Synchronizing with Effects)[https://react.dev/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development]