React优化性能之useMemo 和 useCallback使用及原理

useMemo 和 useCallback 是 React 中两个重要的 Hook，它们都有两个参数：第一个参数是一个函数，返回的对象指向同一个引用，不会创建新对象；第二个参数是一个数组，只有数组中的变量改变时，第一个参数的函数才会返回一个新的对象。

useMemo 的示例如下：

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

在这个示例中，computeExpensiveValue 是一个比较耗时的函数，它的结果会被缓存，只有当 a 或 b 发生变化时，才会重新计算。这样，在渲染过程中，如果 a 和 b 没有变化，就直接引用缓存的数据，而不必重新计算，从而提高了性能。

useCallback 的示例如下：

const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]);

在这个示例中，doSomething 是一个需要传入 a 和 b 的函数。使用 useCallback 可以确保每次渲染时都使用相同的 a 和 b，而不是创建新的函数。这样，在组件渲染过程中，如果 a 和 b 没有变化，就始终使用同一个函数，从而避免了不必要的函数创建和内存开销。

总的来说，useMemo 和 useCallback 都是用来优化性能的，可以根据具体的需求选择使用。

*** 如果您从这篇文章得到帮助或受到启发，请动动小手指帮我点个赞，您的举手之劳也许会助我健康成长！谢谢！***