解決react useEffect中的內容被執行兩次的問題

厚礼蝎發表於2024-03-23
React

當我們在函式元件中，希望使用 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關掉，就不會再執行了

相關文章