React：useCallback 与 useMemo

这些都是 React 中的优化钩子，但它们的用途略有不同。

让我们来分解一下：

1。目的：

• useCallback 用于记忆函数。
• useMemo 用于记忆值。

2。他们返回什么：

• useCallback 返回一个记忆的回调函数。
• useMemo 返回任何类型的记忆值。

3。使用案例：

• useCallback 通常在将回调传递给优化的子组件时使用，这些组件依赖于引用相等性来防止不必要的渲染。
• useMemo 用于避免每次渲染时进行昂贵的计算。

4。语法：

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

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

5。性能影响：

• useCallback 可以帮助防止接收回调作为 prop 的子组件不必要的重新渲染。
• 当依赖项未更改时，useMemo 可以帮助避免昂贵的重新计算。

让我们看一些例子来说明差异：

使用 useCallback 的示例：

import React, { useState, useCallback } from 'react';

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
};

const ChildComponent = React.memo(({ onClick }) => {
  console.log('ChildComponent rendered');
  return <button onClick={onClick}>Increment</button>;
});

在这个例子中，useCallback用于记忆handleClick函数。这很有用，因为 ChildComponent 被包装在 React.memo 中，这意味着它只有在其 props 发生变化时才会重新渲染。通过使用 useCallback，我们确保 handleClick 在渲染之间保持相同的引用（除非计数发生变化），从而防止 ChildComponent 不必要的重新渲染。

使用 useMemo 的示例：

import React, { useState, useMemo } from 'react';

const ExpensiveComponent = ({ list }) => {
  const sortedList = useMemo(() => {
    console.log('Sorting list');
    return [...list].sort((a, b) => a - b);
  }, [list]);

  return (
    <div>
      <h2>Sorted List:</h2>
      {sortedList.map(item => <div key={item}>{item}</div>)}
    </div>
  );
};

const ParentComponent = () => {
  const [list] = useState([3, 1, 4, 1, 5, 9, 2, 6, 5, 3, 5]);
  const [count, setCount] = useState(0);

  return (
    <div>
      <ExpensiveComponent list={list} />
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </div>
  );
};

在此示例中，useMemo 用于记忆排序列表。昂贵的排序操作只会在 list prop 更改时执行，而不是在 ExpenseComponent 的每次渲染上执行。这在这里特别有用，因为 ParentComponent 可能会因与列表无关的原因重新渲染（例如当计数更改时），并且我们不想不必要地重新排序列表。

要点：

1. 当您想防止依赖函数引用的子组件不必要地重新渲染时，请使用 useCallback。
2. 当您想避免昂贵的值重新计算时，请使用 useMemo。
3. 这两个钩子都有助于性能优化，但应谨慎使用。过度使用会导致复杂性增加，而性能却没有显着提升。
4. 两个钩子中的依赖数组至关重要。仅当依赖项之一发生更改时，记忆的值/函数才会更新。

关注更多类似内容！

以上是React：useCallback 与 useMemo的详细内容。更多信息请关注PHP中文网其他相关文章！