useMemo 和 useCallback 是两个强大的 React hook，它们在防止不必要的重新渲染方面发挥着至关重要的作用，从而优化组件性能。它们是开发人员创建响应迅速且高效的 React 应用程序的必备工具。

在本指南中，我们将深入解释 useMemo 和 useCallback 的相似之处以及彼此之间的差异。我们将了解如何实现它们，何时使用每一个。

为什么要使用 useMemo 或 useCallback

通常在 React 中，大多数计算都很快，但有时您需要对非常大的数组进行计算，或者进行一些不需要在每次重新渲染时执行的昂贵计算。

useMemo 和 useCallback 钩子可以通过缓存重新渲染之间那些昂贵的计算来帮助解决这个问题。

什么是 useMemo 以及如何使用它。

useMemo 是 React hook，它缓存重新渲染之间的计算结果，它需要两个参数：

• CalculatedValue：计算要缓存的值的函数。该函数不应接受任何参数，并且应该是纯函数，并返回任何类型的值。如果依赖关系没有改变，React将返回相同的计算结果，否则它将计算一个新的结果并缓存它。
• 依赖项：CalculatedValue 内的所有反应值引用的列表，来自状态变量常量和函数调用。 React 将尝试使用 Object.it 比较将每个反应值与其先前的值进行比较。

useMemo 用法

要缓存重新渲染之间的计算，请将其包装在组件顶层的 useMemo 挂钩中。

useMemo(fn，依赖项)

const App = () => {
  const useMemo(() => {
    filterTodo(todos, tab)
  }, [todos, tab])
  return(...)
}

export default App

注意useMemo的第一个参数是一个没有参数的函数。

第一次React会计算useMemo第一个参数的结果值，然后记住第二个参数，即依赖项列表。 React 会缓存重新渲染之间的计算结果，并且仅当依赖项值之一发生变化时才重新计算结果。

什么是 useCallback 以及如何使用它。

useCallback 钩子与 useMemo 钩子相同，唯一的区别是该钩子将缓存函数（useCallback 的第一个参数）而不计算值。该函数还可以接受与 useMemo.

使用useCallback需要传递参数：

• 需要缓存的函数定义。
• 依赖项列表

const cachedFn = useCallback(fn, 依赖项)

import { useCallback } from 'react';

export default function ProductPage({ productId }) {
  const handleSubmit = useCallback((orderDetails) => {
    post('/product/'   productId   '/buy', {
      referrer,
      orderDetails,
    });
  }, [productId, referrer]);

何时使用 useMemo 而不是 useCallback

如果您主要关心优化计算结果，请使用 useMemo。
如果您主要关心的是防止由于函数更改而导致不必要的重新渲染，请使用 useCallback.

跳过组件的重新渲染

有时您会有一个需要重新渲染的父组件，这也会导致子组件的重新渲染。可以使用 memo 缓存组件。

假设我们有一个具有主题状态的 Todolist 组件，以及一个作为子组件的 List 组件。每当主题状态更改时，列表组件都会重新渲染，这是不必要的。要解决此问题，请使用备忘录。

我们用 memo 包装 List 的功能组件。

export default function TodoList({ todos, tab, theme }) {
  // ...
  return (
    

      
    
  );
}

import { memo } from 'react';

const List = memo(function List({ items }) {
  // ...
});

结论

在这篇综合指南中，我们了解了 useMemo 和 useCallback 钩子，如何使用它们，何时使用它们，并解释了它们对于优化 React 应用程序性能的好处。