React中useCallback 的基本使用和原理小结

const memoizedCallback = useCallback(
  () => {
    // 函数逻辑 (例如更新状态、调用API等)
    doSomething(a, b);
  },
  [a, b] // 依赖项数组
);

import React, { useState, useCallback } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  // 缓存函数：依赖项为空数组，函数只创建一次
  const increment = useCallback(() => {
    setCount(prev => prev + 1); // 使用函数式更新避免闭包问题
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+1</button>
    </div>
  );
}

let lastDeps; // 上一次的依赖项
let lastCallback; // 上一次缓存的函数

function useCallback(callback, deps) {
  if (lastDeps === undefined) {
    // 第一次调用
    lastDeps = deps;
    lastCallback = callback;
    return callback;
  }

  // 检查依赖项是否变化
  const hasChanged = deps.some((dep, index) => dep !== lastDeps[index]);
  if (hasChanged) {
    lastDeps = deps;
    lastCallback = callback;
  }
  return lastCallback;
}

function updateCallback(callback, deps) {
  const hook = updateWorkInProgressHook(); // 获取当前 Hook 节点
  const nextDeps = deps === undefined ? null : deps;
  const prevState = hook.memoizedState;     // 读取缓存的上次状态
  
  // 依赖项对比：使用浅比较（shallow equal）
  if (prevState !== null && areHookInputsEqual(nextDeps, prevState[1])) {
    return prevState[0]; // 返回缓存的函数
  }
  
  //  依赖变化：缓存新函数
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

function areHookInputsEqual(nextDeps, prevDeps) {
  if (prevDeps === null) return false;
  for (let i = 0; i < prevDeps.length; i++) {
    if (!Object.is(nextDeps[i], prevDeps[i])) {
      return false;
    }
  }
  return true;
}