我什么時候在 React 中使用 useCallback？

Question

我真的很難決定是否使用 useCallback。 如果沒有昂貴的 function，我應該省略它嗎？ （但我不知道 function 是否昂貴......）

或者當一個組件頻繁重新渲染時，我可以通過 useCallback 將每個 function 包裝在其中嗎？

任何想法？

Answer 1

您可以考慮以下有關使用 useCallback 的用例

React 的 useCallback Hook 可用於優化 React function 組件的渲染行為。

通常useCallback在將回調道具傳遞給子組件時非常有用。

假設如果一個接受回調的子組件依賴於引用相等性檢查來防止在其 props 更改時發生不必要的重新渲染，那么重要的是任何回調 props 在渲染之間都不會發生變化。

為此，父組件可以將回調屬性包裝在 useCallback 中，並保證它將相同的 function object 向下傳遞到優化的子組件中。

假設您有一個呈現大量項目的組件。

import React from 'react';
import useSearch from './fetch-items';

function ListItem({ value, handleClick }) {
  const items = useSearch(value);

  const itemToElement = item => <div onClick={handleClick}>{item}</div>;

  return <div>{items.map(itemToElement)}</div>;
}

export default React.memo(ListItem);

在這里， ListItem呈現項目列表。 讓我們想象一下這個列表可能很大，可能有幾千個項目。 要保留列表重新渲染，請將其包裝到React.memo中。

ListItem的父組件需要在單擊項目時提供一個處理程序 function。

import React, { useCallback } from 'react';

export default function ParentComponent({ value }) {
  const handleClick = useCallback(item => {
    console.log('List item is clicked', item);
  }, [value]);

  return (
    <ListItem
      value={value}
      handleClick={handleClick}
    />
  );
}

handleClick回調由useCallback() 記憶。 只要 term 變量保持不變， useCallback() 就會返回相同的 function 實例。

即使由於某種原因ParentComponent組件重新渲染， handleClick保持不變並且不會破壞 ListItem 的記憶。

注意：請不要將 React 的 useCallback Hook 與 React 的備忘錄 API 混用。 useCallback 用於 memoize 函數，而 React memo 用於包裝 React 組件以防止重新渲染。 它們提供兩種不同的功能。