react useEffect() 为什么在开发模式的时候会执行两次?

作者:J.sky · 发表于:
2023-07-10T11:31:08.000000Z
· 更新于:
2023-08-13T22:54:57.636618Z
· Tag: react

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