一、簡介
useCallback?是 React 提供的一個 Hook，用于緩存函數引用，避免在組件重新渲染時創建新的函數實例，從而優化性能。
1.1 基本語法
const memoizedCallback = useCallback(() => {// 函數邏輯},[dependencies] // 依賴項數組
);第一個參數：要緩存的函數
第二個參數：依賴項數組，只有當依賴項變化時，才會重新創建函數
1.2 主要特點
??緩存函數：避免每次渲染時都創建新的函數
??優化子組件渲染：配合?React.memo?使用，防止因父組件更新導致子組件不必要的重新渲染
??依賴項控制：只有依賴項變化時，才會重新生成函數
二、代碼實現
import { memo, useState, useCallback } from "react";// 子組件
const Input = memo(({ onChange }) => {console.log("子組件重新渲染了");return (<div><input type="text" onChange={(e) => onChange(e.target.value)}></input></div>);
});export default function App() {// 觸發父組件渲染的函數const [count, setCount] = useState(0);const [count2, setCount2] = useState(0);// 傳給子組件的函數const changeHandler = useCallback((value) => console.log(value), [count2]);return (<div><Input onChange={changeHandler}></Input><button onClick={() => setCount(count + 1)}>點我 子組件不會重新渲染</button><button onClick={() => setCount2(count2 + 1)}>點我 子組件重新渲染</button></div>);
}
