React 16源码解读：useCallback钩子

一 作用

通过useCallback钩子，可以实现多次渲染函数组件时，复用函数。

二 代码

比较两次渲染时传入useCallback的依赖数组是否相同，来决定是否复用函数。

export function useCallback(callback, inputs) {
  currentlyRenderingFiber = resolveCurrentlyRenderingFiber(); // 函数组件虚拟节点
  workInProgressHook = createWorkInProgressHook(); // useCallback钩子实例

  // 本次渲染时的依赖数组
  const nextInputs =
    inputs !== undefined && inputs !== null ? inputs : [callback];

  const prevState = workInProgressHook.memoizedState;
  if (prevState !== null) {
    // 上次渲染时的依赖数组
    const prevInputs = prevState[1];
    // 使用Object.is判断两个数组的每个成员是否相同
    if (areHookInputsEqual(nextInputs, prevInputs)) {
      return prevState[0]; // 复用函数
    }
  }

  workInProgressHook.memoizedState = [callback, nextInputs];
  return callback;
}