React：useCallback 與 useMemo-js教程-PHP中文網

React：useCallback 與 useMemo

WBOY

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

原創

1020 人瀏覽過

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 可能會因與列表無關的原因重新渲染（例如當計數更改時），並且我們不想不必要地重新排序列表。

重點：