const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useCallback看上去和useMemo很相似，入参也是一个执行函数和依赖项数组，二者区别是：

• useCallback缓存的是函数本身，而useMemo缓存的是函数执行结果
• useCallback(fn, deps) 相当于 useMemo(() => fn, deps)。

手写useCallBack

const GlobalHookData = (() => {
  const HookIds = {};
  const current = {
    id: 0,
  };
  const generateId = () => {
    return current.id + 1;
  };
  return {
    HookIds,
    generateId,
  };
})();

export default GlobalHookData;

import GlobalHookData from "./global";
console.log("GlobalHookData", GlobalHookData);
const { HookIds, generateId } = GlobalHookData;
// 局部变量
let localHookId = 0;
export default function useMyCallback(callback, deps) {
  if (HookIds[localHookId] === undefined) {
    localHookId = generateId();
    HookIds[localHookId] = {
      callback,
      deps,
    };
  } else {
    const { deps: oldDeps } = HookIds[localHookId];
    if (
      deps.some((dep, index) => {
        return dep !== oldDeps[index];
      })
    ) {
      HookIds[localHookId] = {
        callback,
        deps,
      };
    }
  }
  return HookIds[localHookId].callback;
}

仿写链接

codesandbox.io/p/sandbox/s…