额,今天在编写一段简短的测试代码,想在组件加载的时候弹出一个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]