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，它有助于以开发人员可以更好理解的方式在组件外部定义函数。