React：useCallback与useMemo的比较
内容提要
在React中，useCallback用于记忆函数，防止子组件不必要的重新渲染；useMemo用于记忆值，避免每次渲染时进行昂贵的计算。两者的依赖数组至关重要，只有当依赖项变化时，记忆的值或函数才会更新。合理使用这两个钩子可以优化性能。
延伸解读
useCallback 与 React.memo 的配合使用
useCallback 通常与 React.memo 包裹的子组件搭配使用。当父组件将回调函数作为 prop 传递给子组件时，如果回调函数的引用在每次渲染时都变化，即使子组件的其他 props 未变，也会触发不必要的重新渲染。使用 useCallback 可以保持函数引用不变，从而避免这种性能浪费。
useMemo 避免重复的昂贵计算
useMemo 适用于避免在每次渲染时执行昂贵的计算。例如，当组件因无关状态变化而重新渲染时，如果某个计算只依赖于特定的 props 或状态，使用 useMemo 可以确保只有依赖项变化时才重新计算，从而提升性能。
依赖数组的关键作用
useCallback 和 useMemo 都接收一个依赖数组，只有当数组中的依赖项发生变化时，记忆化的函数或值才会更新。如果依赖数组为空，记忆化的值将永远不会更新；如果省略依赖数组，则每次渲染都会重新计算，失去优化意义。正确设置依赖项是使用这两个钩子的核心。
避免过度使用优化钩子
虽然 useCallback 和 useMemo 可以优化性能，但过度使用会增加代码复杂性，并可能带来额外的内存开销。在大多数情况下，如果性能问题不明显，应优先考虑代码的简洁性。只有在确实存在不必要的重新渲染或昂贵的计算时，才使用这些钩子进行优化。
Q&A
useCallback和useMemo的主要区别是什么？
useCallback用于记忆函数，防止子组件不必要的重新渲染；useMemo用于记忆值，避免每次渲染时进行昂贵的计算。
如何使用useCallback来优化子组件的渲染？
使用useCallback可以记忆回调函数，确保在依赖项未变化时，子组件不会因为函数引用变化而重新渲染。
useMemo的使用场景是什么？
useMemo用于避免在每次渲染时进行昂贵的计算，只有在依赖项变化时才会重新计算值。
依赖数组在useCallback和useMemo中有什么重要性？
依赖数组决定了记忆的值或函数何时更新，只有当依赖项变化时，记忆的值或函数才会更新。
过度使用useCallback和useMemo会有什么风险？
过度使用这两个钩子可能导致代码复杂性增加，而没有显著的性能提升。
能否给出useMemo的示例？
在一个组件中，使用useMemo来记忆排序后的列表，只有在列表变化时才重新排序，避免不必要的计算。
