我知道它会很小，但是如果您将函数放在React组件之外，是否会有性能差异？
例如版本1：
const handleFetch = () => {
// Make API call
}
const MyComponent = () => {
useEffect(()=>{
handleFetch();
})
return(<p>hi</p>)
}与版本2：
const MyComponent = () => {
const handleFetch = () => {
// Make API call
}
useEffect(()=>{
handleFetch();
})
return(<p>hi</p>)
}在版本1中，当MyComponent重新渲染时，handleFetch不会重新创建吗？
2条答案
按热度按时间hmmo2u0o1#
如果将函数放在React组件之外，性能是否会有所不同？
是的，但是你可能永远不会因为决定在组件中定义函数而遇到明显的性能下降。几乎总是，你的应用程序的其他性能会盖过把函数放在你的组件中的成本。引用自React的FAQ，关于在功能组件中定义函数的一般情况：
钩子是否因为在渲染中创建函数而变慢？
在现代浏览器中，闭包的原始性能与类的原始性能相比没有显著差异，除非在极端情况下。
https://reactjs.org/docs/hooks-faq.html#are-hooks-slow-because-of-creating-functions-in-render
在版本1中，当MyComponent重新呈现时，handleFetch不会重新创建吗？
不，不会重新创建它，因为
handleFetch是在功能组件外部定义的。只有在版本2中，当MyComponent重新呈现时才会重新创建handleFetch。另一个注意事项：useCallback不会避免重新创建函数（您仍然会向useCallback传递一个新函数）。
作为我的一般规则，首先在组件中定义函数，然后提取它，如果它不麻烦或者可以在多个组件中重用。有时候，当我提取它时，我发现我需要添加2个或更多额外的参数来将变量从我的组件传递到函数。但是如果我将它留在功能组件中，我就不需要任何参数了。
wqlqzqxt2#
认可的答案并不完全正确。这句话有一个非常重要的区别：
另一个注意事项：useCallback不会避免重新创建函数（您仍然会向useCallback传递一个新函数）。
你传递给useCallback的函数是每次渲染都返回的，这意味着你有相同的函数，假设你定义的依赖关系没有改变。
作为一个练习，读者可以在useCallback中定义一个函数，并将结果存储到一个变量中，然后在useEffect中将该变量作为唯一的依赖项。useEffect不会重新运行，因为它是同一个引用（严格相等）。