当我们在函数组件中，希望使用 useEffect 来达到初始化的目的时，会发现总是在初始化的时候执行两遍

问题复现

组件代码部分

import "./assets/App.css";
import { useEffect } from "react";

const App = () => {
    useEffect(() => {
        console.log("组件初始化");
    }, []);
    return (
        <>
            <div>test</div>
        </>
    );
};

export default App;

上面的组件只是在初始化的时候打印了一段字符串

入口文件

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>,
);

现象

访问页面，查看控制台

会发现执行了两次

解决办法

1、关闭严格模式

  //就是下面的代码 React.StrictMode
  // <React.StrictMode>
    <App />
  // </React.StrictMode>

严格模式（Strict Mode）是 React 中的一种特殊的组件，它用于在开发模式下检测潜在的问题。

当你将一个组件包裹在 <React.StrictMode> 标签中时，React 会对该组件及其子组件进行多次渲染，以检测潜在的问题。这些问题可能包括使用已废弃的 API、依赖不稳定的生命周期方法、以及在渲染过程中产生副作用等。

严格模式的主要目的是帮助开发者发现和修复潜在的问题，以便在生产模式下运行的应用能够更加稳定和高效。然而，需要注意的是，严格模式只在开发模式下生效，在生产模式下不会产生任何影响。

所以，也可以不用管这个问题。毕竟正式环境不会出现。

如果想解决，只需要，移除 <React.StrictMode> 组件

2、借助useRef解决

可以通过设置一个flag来解决

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;

通过设置flag，

当第一次执行后，就把flag关掉，就不会再执行了