useMemo 和 useCallback 钩子之间有什么区别？
内容提要
React提供了各种钩子，使在函数组件中管理应用程序状态和其他React功能更容易。钩子为函数组件提供了类组件的功能，而且与类组件相比，它们不需要很多代码。钩子还通过提供一些便利功能来简化您的生活。其中，useMemo和useCallback是帮助改善网站性能的钩子。本教程将讨论useMemo和useCallback的区别以及何时使用每个钩子。useMemo用于在渲染之间记忆昂贵计算的返回值。useCallback用于记忆回调函数并返回它。这两个钩子可以帮助您优化应用程序的性能。
延伸解读
核心区别：缓存返回值 vs 缓存函数本身
useMemo 缓存的是昂贵计算的返回值，避免每次渲染都重新执行计算；useCallback 缓存的是函数定义本身，避免每次渲染都创建新的函数引用。理解这一点是正确选用的关键：当你需要跳过重复计算时用 useMemo，当你需要保持函数引用稳定时用 useCallback。
何时使用 useMemo
当组件中有依赖特定状态或属性的昂贵计算，且不希望每次渲染都执行时，应使用 useMemo。此外，当在组件内声明数组或对象，其引用每次渲染都会变化，若它们作为 useEffect 的依赖，可用 useMemo 保持引用相等，避免不必要的副作用执行。渲染列表时若列表仅在特定状态变化时才需更新，也可使用 useMemo。
何时使用 useCallback
当为元素定义事件处理函数时，可用 useCallback 包裹以避免每次渲染重新创建函数。当函数作为 useEffect 的依赖时，用 useCallback 包裹可防止 useEffect 在每次渲染时都执行。编写自定义 Hook 并返回函数时，也建议用 useCallback 包裹，这样使用者无需担心优化问题。
避免过度使用
useMemo 和 useCallback 仅应用于记忆昂贵计算或防止不必要的重渲染。对于普通函数，使用它们收效甚微，反而会使代码可读性变差。过度使用这两个 Hook 会增加代码复杂度，应优先考虑其他性能优化方式。
Q&A
useMemo 和 useCallback 的主要区别是什么？
useMemo 缓存函数的返回值，而 useCallback 缓存函数的定义。
何时应该使用 useMemo？
当你有依赖于昂贵计算的状态，但不想在每次渲染时都运行该计算时，应该使用 useMemo。
useCallback 的作用是什么？
useCallback 用于缓存函数定义，避免在每次渲染时重新创建函数。
使用 useMemo 和 useCallback 有什么风险？
过度使用 useMemo 和 useCallback 可能导致代码难以阅读，并且在不必要的情况下使用会影响性能。
useMemo 的语法是什么？
useMemo 的语法为 const value = useMemo(expensiveFunction, [...dependencyArray])。
如何使用 useCallback 来优化性能？
将事件处理函数包裹在 useCallback 中，以避免在每次渲染时重新创建该函数，从而优化性能。
