本文將講解useCallback的源碼實現(xiàn)氢烘。useCallback是也一個非常簡單的鉤子说订，其實現(xiàn)比useMemo還要簡單愚屁。
Mount階段
在這個階段中死宣，主要完成hook實例的創(chuàng)建，以及緩存當前的callback及其依賴列表惋啃。
function mountCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
// 創(chuàng)建一個hook實例
const hook = mountWorkInProgressHook();
const nextDeps = deps === undefined ? null : deps;
// 緩存當前的callback及其依賴列表
hook.memoizedState = [callback, nextDeps];
return callback;
}
其他階段
Update和Rerender階段useCallback的處理邏輯都是一樣的哼鬓。
- 進行依賴比較
- 如果新依賴與舊依賴一致（其比較方式與useMemo一致，都采用的是
Object.is比較方法）边灭，返回原callback - 如果不一致异希，返回新的
callback，并緩存新callback以及新依賴列表绒瘦。
function updateCallback<T>(callback: T, deps: Array<mixed> | void | null): T {
const hook = updateWorkInProgressHook();
const nextDeps = deps === undefined ? null : deps;
const prevState = hook.memoizedState;
if (prevState !== null) {
if (nextDeps !== null) {
const prevDeps: Array<mixed> | null = prevState[1];
// 比較新舊依賴列表
if (areHookInputsEqual(nextDeps, prevDeps)) {
return prevState[0];
}
}
}
hook.memoizedState = [callback, nextDeps];
return callback;
}
