解决react useEffect中的内容被执行两次的问题
<p>当我们在函数组件中，希望使用 <code>useEffect</code> 来达到初始化的目的时，会发现总是在初始化的时候执行两遍</p><h1 id="问题复现">问题复现</h1>
<h2 id="组件代码部分">组件代码部分</h2>
<pre><code class="language-tsx">import "./assets/App.css";
import { useEffect } from "react";
const App = () => {
useEffect(() => {
console.log("组件初始化");
}, []);
return (
<>
<div>test</div>
</>
);
};
export default App;
</code></pre>
<p>上面的组件只是在初始化的时候打印了一段字符串</p>
<h2 id="入口文件">入口文件</h2>
<pre><code class="language-tsx">import * as React from "react";
import * as ReactDOM from "react-dom/client";
import "~/assets/index.css";
import { HashRouter } from "react-router-dom";
import App from "~/App.tsx";
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
);
</code></pre>
<h2 id="现象">现象</h2>
<p>访问页面，查看控制台</p>
<p><img src="https://img2024.cnblogs.com/blog/2908207/202403/2908207-20240323103104523-1071380260.png" alt="" loading="lazy"></p>
<p>会发现执行了两次</p>
<h1 id="解决办法">解决办法</h1>
<h2 id="1关闭严格模式">1、关闭严格模式</h2>
<pre><code class="language-tsx">//就是下面的代码 React.StrictMode
// <React.StrictMode>
<App />
// </React.StrictMode>
</code></pre>
<p>严格模式（Strict Mode）是 React 中的一种特殊的组件，它用于在开发模式下检测潜在的问题。</p>
<p>当你将一个组件包裹在 <code><React.StrictMode></code> 标签中时，React 会对该组件及其子组件进行多次渲染，以检测潜在的问题。这些问题可能包括使用已废弃的 API、依赖不稳定的生命周期方法、以及在渲染过程中产生副作用等。</p>
<p>严格模式的主要目的是帮助开发者发现和修复潜在的问题，以便在生产模式下运行的应用能够更加稳定和高效。然而，需要注意的是，严格模式只在开发模式下生效，在生产模式下不会产生任何影响。</p>
<p>所以，也可以不用管这个问题。毕竟正式环境不会出现。</p>
<p>如果想解决，只需要，移除 <code><React.StrictMode></code> 组件</p>
<h2 id="2借助useref解决">2、借助useRef解决</h2>
<p>可以通过设置一个flag来解决</p>
<pre><code class="language-tsx">import "./assets/App.css";
import { useEffect, useRef } from "react";
const App = () => {
const flag = useRef<boolean>(true);
useEffect(() => {
if (flag.current) {
flag.current = false;
return;
}
console.log("组件初始化");
}, []);
return (
<>
<div>test</div>
</>
);
};
export default App;
</code></pre>
<p>通过设置flag，</p>
<p>当第一次执行后，就把flag关掉，就不会再执行了</p>
</div>
<div id="MySignature" role="contentinfo">
<p>本文来自博客园，作者：厚礼蝎，转载请注明原文链接：https://www.cnblogs.com/guangdelw/p/18090867</p><br><br>
来源：https://www.cnblogs.com/guangdelw/p/18090867
頁:
[1]