React 中的 &#useCallback&# 是什麼？

useCallback 是一個 React Hook，可協助您透過記憶回呼函數來最佳化元件。它確保函數引用在渲染之間保持不變，除非其依賴項發生變化。當您將函數作為 prop 傳遞給子元件時，這特別有用，因為它可以防止子元件的 useEffect 鉤子不必要的重新渲染或重新執行。

---

為什麼要使用useCallback？

1. 防止不必要的重新渲染：
   如果將回呼函數作為 prop 傳遞給子元件，則該函數會在每次渲染時重新建立。這可能會導致子元件不必要地重新渲染。

2. 穩定函數參考：
   如果子元件使用 useEffect 並依賴回調 prop，不穩定的函數參考將導致 useEffect 不必要地重新運行。

3. 最佳化效能：
   有助於防止因頻繁重新建立相同函數而導致昂貴的計算或操作。

---

文法

const memoizedCallback = useCallback(
  () => {
    // Your logic here
  },
  [dependencies] // Array of dependencies
);

• 回呼函數：您要記住的函數。
• 相依性： 函數所依賴的值。如果這些發生變化，則函數將被重新建立。

---

沒有 useCallback 的範例

import React, { useState, useEffect } from "react";

const Child = ({ callback }) => {
  useEffect(() => {
    callback(); // Runs whenever the `callback` reference changes
  }, [callback]);

  return <div>Child Component</div>;
};

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

  const callback = () => {
    console.log("Callback called");
  };

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child callback={callback} />
    </div>
  );
};

export default Parent;

• 問題：即使計數發生變化，Child 元件的 useEffect 也會重新運行，因為每次 Parent 渲染時都會重新建立回調函數。

---

使用 useCallback 修復

import React, { useState, useEffect, useCallback } from "react";

const Child = ({ callback }) => {
  useEffect(() => {
    callback(); // Runs only when `callback` changes
  }, [callback]);

  return <div>Child Component</div>;
};

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

  const callback = useCallback(() => {
    console.log("Callback called");
  }, []); // Dependencies are empty, so the callback is memoized

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <Child callback={callback} />
    </div>
  );
};

export default Parent;

• 解決方案： 現在，回調引用保持穩定，因此子元件的 useEffect 不會不必要地重新運行。

---

何時使用 useCallback？

• 當您將函數作為 props 傳遞給子元件。
• 當子元件使用React.memo()進行最佳化時。
• 當子元件依賴使用該函數的 useEffect 時。

---

常見誤用

不要不要對每個函數使用useCallback。僅在以下情況下才有用：

1. 此函數以 prop 傳遞給子函數。
2. 重新建立該函數的計算成本很高。

以上是React 中的 &#useCallback&# 是什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！