react hooks的逻辑在哪里？答案

【问题标题】：Where is the logic of react hooks?react hooks的逻辑在哪里？
【发布时间】：2022-01-03 06:12:19
【问题描述】：

最近我开始阅读 react hooks 代码，我看到了这个。

function useState(initialState) {
  var dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}
function useReducer(reducer, initialArg, init) {
  var dispatcher = resolveDispatcher();
  return dispatcher.useReducer(reducer, initialArg, init);
}
function useRef(initialValue) {
  var dispatcher = resolveDispatcher();
  return dispatcher.useRef(initialValue);
}
function useEffect(create, deps) {
  var dispatcher = resolveDispatcher();
  return dispatcher.useEffect(create, deps);
}
function useLayoutEffect(create, deps) {
  var dispatcher = resolveDispatcher();
  return dispatcher.useLayoutEffect(create, deps);
}
function useCallback(callback, deps) {
  var dispatcher = resolveDispatcher();
  return dispatcher.useCallback(callback, deps);
}
function useMemo(create, deps) {
  var dispatcher = resolveDispatcher();
  return dispatcher.useMemo(create, deps);
}
function useImperativeHandle(ref, create, deps) {
  var dispatcher = resolveDispatcher();
  return dispatcher.useImperativeHandle(ref, create, deps);
}
function useDebugValue(value, formatterFn) {
  {
    var dispatcher = resolveDispatcher();
    return dispatcher.useDebugValue(value, formatterFn);
  }
}

dispatcher是一个由resolveDispatcher()初始化的对象。

function resolveDispatcher() {
  var dispatcher = ReactCurrentDispatcher.current;

  if (!(dispatcher !== null)) {
    {
      throw Error( "Invalid hook call. Hooks can only be called inside of the body of a function component..." );
    }
  }

  return dispatcher;
}

而 ReactCurrentDispatcher 是一个具有一个名为 current 的属性的对象。

var ReactCurrentDispatcher = {
  /**
   * @internal
   * @type {ReactComponent}
   */
  current: null
};

现在我的问题是 react 如何以及在哪里处理钩子的逻辑？ useImperativeHandle or ...的逻辑在哪里？

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

一般来说，要回答这样的问题，我会克隆 repo 并使用 ag 或 git grep：

(react) $ git grep useImperativeHandle
[...]
packages/react-reconciler/src/ReactFiberHooks.new.js:    useImperativeHandle<T>(
[...]

这让我找到了these mappings，例如，useImperativeHandle 的代码似乎是 these three functions。

了解它们如何工作以及如何与 React 光纤系统交互是另一个兔子洞。

【讨论】：