React：useCallback 与 useMemo-js教程-PHP中文网

React：useCallback 与 useMemo

WBOY

发布： 2024-08-26 21:30:32

原创

1019 人浏览过

React : useCallback vs 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 可能会因与列表无关的原因重新渲染（例如当计数更改时），并且我们不想不必要地重新排序列表。

要点：