useCallback以及部分源码

40 阅读1分钟

useCallback以及部分源码

const [count,setCount] = useState(0)
const add = useCallback(() => {
    setCount((value) => {
      value++;
      return value
    });
  }, []);

const handle = useCallback(() => {
    console.log(count); // 0
  }, []);

const handle1 = useCallback(() => {
    console.log(count); // 非0
  }, [count]);

function mountCallback<T>(callback, deps) {
  const hook = mountWorkInProgressHook();
  const nextDeps = deps === undefined ? null : deps;
  hook.memoizedState = [callback, nextDeps];
  return callback;
}

function updateCallback(callback, deps) {
  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;
}