首先要注意的是无状态功能组件不能有方法：你不应该指望调用update or draw在渲染的Ball如果它是无状态的功能组件。
在大多数情况下，您应该在组件函数之外声明函数，这样您只需声明一次，并且始终重用相同的引用。当您在内部声明函数时，每次渲染组件时都会再次定义该函数。
在某些情况下，您需要在组件内部定义一个函数，例如，将其分配为事件处理程序，该事件处理程序根据组件的属性表现不同。但你仍然可以在外部定义函数Ball并将其与属性绑定，使代码更加简洁，并使update or draw可重用的功能：
// you can use update somewhere else
const update = (propX, a, b) => { ... };
const Ball = props => (
<Something onClick={update.bind(null, props.x)} />
);
如果您正在使用hooks， 您可以使用useCallback确保该函数仅在其任何依赖项发生更改时才重新定义（props.x在这种情况下）：
const Ball = props => {
const onClick = useCallback((a, b) => {
// do something with a, b and props.x
}, [props.x]);
return (
<Something onClick={onClick} />
);
}
This is 错误的方法:
const Ball = props => {
function update(a, b) {
// props.x is visible here
}
return (
<Something onClick={update} />
);
}
使用时useCallback，定义update函数在useCallback钩子本身或组件外部成为最重要的设计决策：您应该考虑是否要重用update和/或如果您需要访问组件闭包的范围，例如读/写状态。就我个人而言，我选择默认将其定义在组件内部，并仅在需要时才使其可重用，以防止从一开始就过度设计。最重要的是，重用应用程序逻辑最好使用更具体的钩子来完成，而将组件保留用于演示目的。使用钩子时在组件外部定义函数实际上取决于您希望应用程序逻辑与 React 解耦的程度。
Another 共同讨论 about useCallback是是否总是将它用于每个功能。也就是说，对待就像opt-in or 总是值得推荐的。我认为总是使用useCallback：我见过许多由于未将函数包装在中而导致的错误useCallback并且在任何情况下这样做都不会以任何方式影响性能或逻辑。在大多数情况下，您希望在依赖项不变的情况下保留引用，因此您可以使用函数本身作为其他效果、备忘录或回调的依赖项。在许多情况下，回调将作为道具传递给其他元素，如果您使用useCallback您不会更改道具（从而重新渲染）其他组件，无论其成本有多低。我见过在组件中声明了数千个函数，但没有一个使用useCallback会有任何不利的一面。另一方面，大多数函数没有被记住useCallback如果开发人员没有意识到不这样做的影响，最终将被更改为这样做，从而导致严重的错误或性能问题。从技术上来说使用会降低性能useCallback，就像您将创建和附加函数一样，但与您使用总是必须发生的函数的重新声明相比，它可以忽略不计useCallback与否以及 React 和 JavaScript 的总体足迹。因此，如果您确实担心对性能的影响useCallback与不使用它相比，你应该问自己 React 是否是适合这项工作的工具。
