一、useCallback 的作用與使用場景總結

• useCallback 是 React 提供的一個 Hook，用于緩存函數的引用，避免因為組件重新渲染而導致函數地址發生變化。
• 它返回一個記憶（memoized）后的回調函數，只有當依賴項發生變化時才會重新生成該函數。

---

二、具體講解與使用場景

（一）作用詳解

• (1) 避免函數在每次渲染時都重新創建
  • React 函數組件每次渲染都會重新定義所有函數，可能會導致不必要的渲染或性能浪費。
• (2) 與子組件配合 React.memo 使用，避免子組件不必要的渲染
  • 如果 props 中有一個函數，每次渲染都會創建新函數引用，即使函數體一樣，也會導致子組件更新。

（二）使用場景

• (1) 傳遞函數給使用 React.memo 的子組件時，避免子組件重復渲染。
• (2) 用于依賴函數的 useEffect、useMemo，如果不緩存函數會導致無限循環或性能問題。
• (3) 用于性能優化較敏感的場景，避免重復創建函數。

---

三、代碼示例

（一）未使用 useCallback 導致子組件重復渲染

import React, { useState } from 'react';const Child = React.memo(({ onClick }) => {console.log("Child Rendered");return <button onClick={onClick}>Click Me</button>;
});const Parent = () => {const [count, setCount] = useState(0);const handleClick = () => {console.log("Clicked");};return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Add</button><Child onClick={handleClick} /></div>);
};

• 每次點擊“Add”，Parent 組件會重新渲染，handleClick 是新函數，導致 Child 被重新渲染。

---

（二）使用 useCallback 緩存函數，優化渲染

import React, { useState, useCallback } from 'react';const Child = React.memo(({ onClick }) => {console.log("Child Rendered");return <button onClick={onClick}>Click Me</button>;
});const Parent = () => {const [count, setCount] = useState(0);const handleClick = useCallback(() => {console.log("Clicked");}, []);  // 空數組表示 handleClick 永遠不會變return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Add</button><Child onClick={handleClick} /></div>);
};

• 此時點擊“Add”不會觸發 Child 重新渲染，提升性能。

---

四、小結

• useCallback(fn, deps) 等價于 useMemo(() => fn, deps)
• 用于性能優化，不是所有場景都需要用
• 優先考慮組件中是否存在性能瓶頸，再考慮是否引入 useCallback