将功能放在React组件之外的性能差异？

Posted 2021-05-03

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

例如版本1：

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

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

vs版本2：

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

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

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

答案

如果将函数放在React组件之外，会有性能差异吗？

是的，但是您可能永远不会因决定在组件内部定义功能而遭受明显的性能降级。几乎总是，应用程序的其余性能会掩盖在组件中放置功能的成本。从React的常见问题中引用有关功能组件中定义的功能的一般信息：

由于在render中创建函数，钩子变慢了吗？

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

https://reactjs.org/docs/hooks-faq.html#are-hooks-slow-because-of-creating-functions-in-render

在版本1中，重新渲染MyComponent时将不会重新创建handleFetch吗？

否，将不会重新创建它，因为handleFetch是在功能组件之外定义的。重新渲染MyComponent时仅会在版本2中重新创建handleFetch。

另一注：useCallback不会避免重新创建函数（您仍然将新函数也传递给useCallback。）>

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