Was ist in React der Unterschied zwischen dem Erstellen einer Funktion in useEffect() und dem Importieren aus einer anderen Datei?

Question

Bei der Arbeit bin ich über Code wie diesen gestolpert

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

    // ...
}

Hier sehen wir, dass es in useEffect() eine Funktion namens updateValues() gibt, die mehrere Statusaktualisierungen durchführen kann. Mir wurde gesagt, ich solle diese Funktion in eine andere Datei exportieren, um Leistungsprobleme zu beheben.

// 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]);

    // ...
}

Ich habe mich gefragt, ob so etwas tatsächlich ein Problem in React ist? Die offizielle React-Dokumentation stellt mehrere Funktionsbeispiele in useEffect() bereit, erwähnt die Garbage Collection jedoch kaum. Ich frage mich, ob die Garbage Collection importierte Funktionen zum richtigen Zeitpunkt ordnungsgemäß zerstört.

Meine Annahme ist, dass durch das Importieren einer Funktion oder irgendetwas anderem etwas im Speicher entsteht, das dort verbleibt, auch wenn wir es nicht benötigen.

Ich bin mir nicht sicher, ob es sich bei dieser Frage um eine „meinungsbasierte“ Frage handelt, da ich nur nach einer Erklärung suche, wie Speicher und Speicherbereinigung in useEffect() funktionieren.

Answer 1

建议您这样做的原因是您的useEffect 是在每次组件代码运行时创建的——这可能比渲染的频率还要高。所有这些东西在其制造时 90% 的时间都没有被使用，因此它们的创建和垃圾收集都是无用的。因此，可以移到组件外部的东西越多越好。如果导入的函数（或者您在功能组件之外创建的函数）被垃圾收集，那就没那么重要了，因为它只创建一次，而您在组件中定义的任何内容都会创建数百或数千次。

老实说，你的函数及其用法有点奇怪。我假设它只是伪代码，因为如果不是，你的 useEffect 函数体会更好，像这样

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

此外，请考虑使用 useReducer，它有助于以开发人员可以更好理解的方式在组件外部定义函数。