useCallback
使用useCallback可以避免組件重復(fù)渲染南缓，提升性能梭冠，以下是一個(gè)使用useCallback的例子：
import { useCallback } from 'react';
const App = () => {
const [counter, setCounter] = useState(0);
const incrementCounter = useCallback(
() => setCounter(prevCounter => prevCounter + 1),
[setCounter]
);
return (
<div>
<h1>{counter}</h1>
<button onClick={incrementCounter}>Increment Counter</button>
</div>
);
};
在上面的例子中满葛，我們使用useCallback來(lái)包裝incrementCounter函數(shù)邪铲，這樣每次incrementCounter函數(shù)被調(diào)用時(shí)疲憋，它的引用就不會(huì)發(fā)生改變望拖，從而避免了組件的重復(fù)渲染渺尘。
useMemo
useMemo 可以幫助我們優(yōu)化 React 應(yīng)用的性能，它接受一個(gè)函數(shù)和一個(gè)可選的數(shù)組作為參數(shù)说敏，當(dāng)數(shù)組中的值發(fā)生變化時(shí)鸥跟，函數(shù)才會(huì)重新執(zhí)行，否則函數(shù)不會(huì)重新執(zhí)行盔沫，從而避免了不必要的重新渲染医咨。
舉例說(shuō)明：
const App = () => {
const [num, setNum] = useState(0);
const [name] = useState('Nick');
// 使用 useMemo 優(yōu)化處理
const doubleNum = useMemo(() => num * 2, [num]);
return (
<div>
<p>{`${name}'s number is ${doubleNum}`}</p>
<button onClick={() => setNum(num + 1)}>+1</button>
</div>
);
};
useCallback 和 useMemo 的區(qū)別
useCallback是一個(gè) Hook，它會(huì)返回一個(gè) memoized （記憶化的）回調(diào)函數(shù)迅诬，其中的dependencies將被用來(lái)決定它是否需要重新計(jì)算腋逆。useMemo也是一個(gè) Hook，它會(huì)返回一個(gè) memoized 值侈贷，其中的dependencies將被用來(lái)決定它是否需要重新計(jì)算惩歉。它接受一個(gè)函數(shù)作為第一個(gè)參數(shù)，它將在dependencies發(fā)生變化時(shí)被調(diào)用俏蛮，并且返回一個(gè) memoized 的值撑蚌。
