Reactjs 将功能置于反应组件之外的性能差异？

我知道它会很小，但是如果将函数放在React组件之外，会有性能差异吗

例如第1版：

const handleFetch = () => {
    // Make API call
}

const MyComponent = () => {
    useEffect(()=>{
        handleFetch();
    })
    return(<p>hi</p>)
}

consthandlefetch=（）=>{
//进行API调用
}
常量MyComponent=（）=>{
useffect（（）=>{
handleFetch（）；
})
返回（hi
）
}

Vs版本2：

const MyComponent = () => {
    const handleFetch = () => {
        // Make API call
    }

    useEffect(()=>{
        handleFetch();
    })
    return(<p>hi</p>)
}

constmycomponent=（）=>{
常量handleFetch=（）=>{
//进行API调用
}
useffect（（）=>{
handleFetch（）；
})
返回（hi
）
}

在版本1中，

MyComponent

重新呈现时是否不会重新创建

handleFetch

如果将函数放在React组件之外，是否存在性能差异

是的，但是如果您决定在组件中定义函数，您可能永远不会遇到明显的性能降级。几乎总是，应用程序的其余性能会掩盖将函数放入组件的成本。引自React关于功能组件中定义的功能的常见问题解答：

钩子是否因为在渲染中创建函数而变慢

不。在现代浏览器中，闭包的原始性能与类相比没有显著差异，除非在极端情况下

在版本1中，当MyComponent重新渲染时是否不会重新创建handleFetch

否，不会重新创建，因为

handleFetch

是在功能组件之外定义的。只有在版本2中，MyComponent重新渲染时才会重新创建handleFetch

另一个注意事项：useCallback不会避免重新创建函数（您仍然会将新函数传递给useCallback）

---

作为我的一般规则，首先在组件内部定义函数，然后提取它（如果不麻烦的话），或者它可以在多个组件之间重用。有时，当我提取它时，我发现我需要添加2个或更多的额外参数，以便将变量从组件传递到函数。但是如果我把它放在功能组件中，我就不需要任何参数。

不知道在handleFetch上放置断点是否会告诉我一个方法是否是新分配的？只有在v2中，

handleFetch

重新呈现时才会重新创建。另一个注意事项：

useCallback

将不会避免重新创建函数（您仍然会将新函数传递到

useCallback

中）。由于可读性和范围的损失，这不值得有微小的性能差异。只有当函数在逻辑上属于组件时，才将其放在组件外部，因为它是一个通用实用程序或在组件之间共享（它可能位于另一个模块中）。如果你正在体验一个缓慢的应用程序，请分析它并寻找真正的问题——这种绝望的微操作无法解决它。