React useCallback 最小代码

最小实现代码，直观感受 useCallback 的原理。在控制台中输入下面代码

let state = 0; // 无论怎么修改 state 值，总是打印 0
let fnMemo = null;
function getState() {
    return state;
}

function useCallback(fn) {
    if(!fnMemo) {
        fnMemo = fn;
        return fn
    } else {
        return fnMemo;
    }
}

function App() {
    const state = getState()

    const log = useCallback(() => {
        console.log(state);
    })

    log()
}
App();

// 修改 state
state = 1;
App();
state = 2;
App();
state = 10;
App();

对应关键源码，在areHookInputsEqual函数中对比依赖，如果相等，返回 memo 后的函数，否则返回最新的函数

function updateCallback(callback, deps) {
  var hook = updateWorkInProgressHook();
  var nextDeps = deps === undefined ? null : deps;
  var prevState = hook.memoizedState;

  if (prevState !== null) {
    if (nextDeps !== null) {
      var prevDeps = prevState[1];

      if (areHookInputsEqual(nextDeps, prevDeps)) {
        return prevState[0];
      }
    }
  }

  hook.memoizedState = [callback, nextDeps];
  return callback;
}