React中，在useEffect()內部建立一個函數與從另一個檔案匯入它的區別？

Question

在工作中，我偶然發現了這樣的程式碼

function Component({ data }) {
    const [number, setNumber] = useState(0);
    const [speed, setSpeed] = useState(0);
    const [angle, setAngle] = useState(0);
    useEffect(() => {
        const updateValues = (newValue, check, setter) => {
            if (check) {        
                setter(newValue):
            } else {
                setter(null):       
            }
        };
        updateValues(10, true, setNumber);
        updateValues(20, false, setSpeed);
        updateValues(30, true, setAngle);
    }, [data]);

    // ...
}

在這裡，我們可以看到 useEffect() 中有一個名為 updateValues() 的函數，它可以執行多個狀態更新。我被告知要將此函數匯出到另一個文件以解決效能問題。

// file1.js
export const updateValues = (newValue, check, setter) => {
            if (check) {        
                setter(newValue):
            } else {
                setter(null):       
            }
        };

// Component.js

import { updateValues } from "file1.js";

function Component({ data }) {
    const [number, setNumber] = useState(0);
    const [speed, setSpeed] = useState(0);
    const [angle, setAngle] = useState(0);
    useEffect(() => {
        updateValues(10, true, setNumber);
        updateValues(20, false, setSpeed);
        updateValues(30, true, setAngle);
    }, [data]);

    // ...
}

我一直想知道這樣的事情在 React 中是否真的有問題？ React 官方文件在 useEffect() 中提供了多個函數範例，但幾乎沒有提及垃圾收集。我想知道垃圾收集是否會在適當的時間正確銷毀導入的函數。

我的假設是，導入函數或其他任何東西都會在記憶體中創建一些東西，即使我們不需要它，它仍然存在。

我不確定這個問題是否是一個「基於意見」的問題，因為我只是在尋找有關記憶體和垃圾收集在 useEffect() 內部如何運作的解釋。

Answer 1

建議您這樣做的原因是您的useEffect 是在每次元件程式碼運行時創建的——這可能比渲染的頻率還要高。所有這些東西在其製造時 90% 的時間都沒有被使用，因此它們的創建和垃圾收集都是無用的。因此，可以移到組件外部的東西越多越好。如果導入的函數（或您在功能組件之外創建的函數）被垃圾收集，那就沒那麼重要了，因為它只創建一次，而您在組件中定義的任何內容都會創建數百或數千次。

老實說，你的函數及其用法有點奇怪。我假設它只是偽代碼，因為如果不是，你的 useEffect 函數體會更好，像這樣

setNumber(10);
setSpeed(null);
setAngle(30);

此外，請考慮使用 useReducer，它有助於以開發人員可以更好理解的方式在元件外部定義函數。