四月八日

let dir = __dirname;

do {
  if (fs.statSync(path.join(dir, "node_modules", packageName)).isDirectory()) {
    return true;
  }
} while (dir !== (dir = path.dirname(dir)));

//require("module") 用于管理模块的接口
for (const internalPath of require("module").globalPaths) {
  if (fs.statSync(path.join(internalPath, packageName)).isDirectory()) {
    return true;
  }
}
return false;

if (fs.existsSync(path.resolve(process.cwd(), "yarn.lock"))) {
  packageManager = "yarn";
} else if (fs.existsSync(path.resolve(process.cwd(), "pnpm-lock.yaml"))) {
  packageManager = "pnpm";
} else {
  packageManager = "npm";
}

const readLine = require("readline");

const questionInterface = readLine.createInterface({
  input: process.stdin,
  output: process.stderr,
});

questionInterface.question("question one (yes/no):", (answer) => {
  if (answer.startsWith("y")) {
  }
});

const cp = require("child_process");
new Promise((resolve, reject) => {
  const executedCommand = cp.spawn("echo 1", [], {
    stdio: "inherit",
    shell: true,
  });

  executedCommand.on("error", reject);

  executedCommand.on("exit", (code) => {
    if (code === 0) resolve();
  });
}).then(() => {});

const pkgPath = require.resolve(`${packageName}/package.json`);
const pkg = require(pkgPath);
if (pkg.type === "module" || /\.mjs/i.test(pkg.bin[name])) {
  import(path.resolve(path.dirname(pkgPath), pkg.bin[name])).catch();
} else {
  require(path.resolve(path.dirname(pkgPath), pkg.bin[name]));
}

const cp = require("child_process");

const { output } = cp.spawnSync(
  "npm.cmd",
  ["view", "react@latest", "version"],
  {
    stdio: "pipe",
  }
);
console.log(output.toString());

// 使用 typeof, 对于不存在的变量会返回 undefined
const hasDocument = typeof document !== "undefined";

var isIE11 =
  typeof navigator !== "undefined" &&
  navigator.userAgent.indexOf("Trident") !== -1;

const semver = require("semver");

const version1 = "1.2.3";
const version2 = "2.0.0";

if (semver.gt(version1, version2)) {
  console.log(`${version1} is greater than ${version2}`);
}

import { Command } from "commander";
const program = new Command();

program
  .name("sun-cli")
  .description("这是一个描述")
  .option("--targetCommand", "参数的描述", "team1/command")
  .action((options) => {
    console.log(options);
  });

program
  .command("clone <source> [destination]")
  .description("子命令的描述")
  .action((source, destination) => {
    console.log("clone command called");
  });

program.parse();

function Child() {
  console.log("child");
  return <div>2</div>;
}
function App() {
  const [state, setState] = useState(1);
  console.log("parent");
  return (
    <div>
      <div onClick={() => setState(2)}>click</div>
      <Child></Child>
    </div>
  );
}

if (
  fiber.lanes === NoLanes &&
  (alternate === null || alternate.lanes === NoLanes)
) {
  // 如果新状态与当前状态相同，我们可以完全摆脱副作用
  const lastRenderedReducer = queue.lastRenderedReducer;
  if (lastRenderedReducer !== null) {
    let prevDispatcher;
    try {
      const currentState = queue.lastRenderedState; // 就是 memoizedState
      const eagerState = lastRenderedReducer(currentState, action); // 基于 action 提前计算 state
      // 如果在我们进入渲染阶段时 reducer 没有改变，那我们可以使用 eager 状态而无需再次调用 reducer。
      update.hasEagerState = lastRenderedReducer; // 标记该 update 存在 eagerState
      update.eagerState = eagerState; // 存储 eagerState 的值
      if (is(eagerState, currentState)) {
        return;
      }
    } catch (error) {
      // ...
    } finally {
      // ...
    }
  }
}

fiber.lanes === NoLanes && (alternate === null || alternate.lanes === NoLanes);

function bailoutHooks(current: Fiber, workInProgress: Fiber, lanes: Lanes) {
  workInProgress.updateQueue = current.updateQueue;
  // ...
  current.lanes = removeLanes(current.lanes, lanes);
}

module.exports = {
  entry: path.resolve(__dirname, "./src/index.js"),
  output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: "/",
    // 设置打包格式为 system
    libraryTarget: "system",
  },
  // 排除依赖，通过 cdn 加载
  externals: {
    react: "react",
    "react-dom": "react-dom",
  },
  module: {/** loader 配置 */}
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      scriptLoading: "systemjs-module",
    }),
  ],
};

System.register(
  ["react", "react-dom"],
  function (__WEBPACK_DYNAMIC_EXPORT__, __system_context__) {
    var __WEBPACK_EXTERNAL_MODULE_react__ = {};
    var __WEBPACK_EXTERNAL_MODULE_react_dom__ = {};
    Object.defineProperty(__WEBPACK_EXTERNAL_MODULE_react__, "__esModule", {
      value: true,
    });
    Object.defineProperty(__WEBPACK_EXTERNAL_MODULE_react_dom__, "__esModule", {
      value: true,
    });
    return {
      setters: [
        function (module) {
          Object.keys(module).forEach(function (key) {
            __WEBPACK_EXTERNAL_MODULE_react__[key] = module[key];
          });
        },
        function (module) {
          Object.keys(module).forEach(function (key) {
            __WEBPACK_EXTERNAL_MODULE_react_dom__[key] = module[key];
          });
        },
      ],
      execute: function () {
        __WEBPACK_DYNAMIC_EXPORT__(
          (() => {
            "use strict";
            var __webpack_modules__ = {
              "./src/index.js": (
                __unused_webpack_module,
                __webpack_exports__,
                __webpack_require__
              ) => {
                eval(/** index.js 编译结果 */);
              },

              "./node_modules/react-dom/client.js": (
                __unused_webpack_module,
                exports,
                __webpack_require__
              ) => {
                eval(/**react-dom/client.js 编译结果 */);
              },

              react: (module) => {
                module.exports = __WEBPACK_EXTERNAL_MODULE_react__;
              },

              "react-dom": (module) => {
                module.exports = __WEBPACK_EXTERNAL_MODULE_react_dom__;
              },
            };
            /************************************************************************/
            // The module cache
            var __webpack_module_cache__ = {};

            // The require function
            function __webpack_require__(moduleId) {
              // Check if module is in cache
              var cachedModule = __webpack_module_cache__[moduleId];
              if (cachedModule !== undefined) {
                return cachedModule.exports;
              }
              // Create a new module (and put it into the cache)
              var module = (__webpack_module_cache__[moduleId] = {
                // no module.id needed
                // no module.loaded needed
                exports: {},
              });

              // Execute the module function
              __webpack_modules__[moduleId](
                module,
                module.exports,
                __webpack_require__
              );

              // Return the exports of the module
              return module.exports;
            }

            // startup
            // Load entry module and return exports
            // This entry module can't be inlined because the eval devtool is used.
            var __webpack_exports__ = __webpack_require__("./src/index.js");

            return __webpack_exports__;
          })()
        );
      },
    };
  }
);

{
  depcache:{},
  imports:{
    "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js",
    "react": "https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js",
    "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js",
    "@fefw/root-config": "http://localhost:9000/fefw-root-config.js",
    "@supos/supos-react-1": "http://localhost:3000/supos-supos-react-1.js",
    "@supos/supos-react-2": "http://localhost:8081/supos-supos-react-2.js"
  },
  integrity:{},
  scope:{}
}

// 1. 序列化import map
// importMap 只用作描述资源，建立映射关系，不会主动加载资源

function System() {}
var global = window;
// 记录加载的资源
System["@"] = {};

// 记录import资源隐射
var importMap = { imports: {} };

// baseURL 为当前的资源加载路径
var baseUrl = location.href.split("#")[0].split("?")[0];

var importMapPromise = Promise.resolve();
function processScripts() {
  document.querySelectorAll("script").forEach((script) => {
    // 处理 importmap
    if (script.type === "systemjs-importmap") {
      if (script.src) {
        /** 如果是远程资源，则发起请求 */
      } else {
        // 解析 importmap
        importMapPromise = importMapPromise.then(() =>
          extendImportMap(importMap, script.innerHTML, baseUrl)
        );
      }
    }
    // 处理systemjs 模块
    else if (script.type === "systemjs-module") {
      System.import(script.src);
    }
  });
}

// 尽早执行, 并在 dom 全部加载后重新检测
processScripts();

window.addEventListener("DOMContentLoaded", processScripts);

function extendImportMap(importMap, content, baseUrl) {
  const packages = JSON.parse(content);
  for (let k in packages) {
    importMap[k] = packages[k];
  }
}

// 用于加载 system-module 以及依赖项

var firstGlobalProp = (secondGlobalProp = undefined);

function shouldSkipProperty(p) {
  return !global.hasOwnProperty(p) || (!isNaN(p) && p < global.length);
}
function noteGlobalProps() {
  firstGlobalProp = secondGlobalProp = undefined;
  for (var p in global) {
    if (shouldSkipProperty(p)) continue;
    if (!firstGlobalProp) firstGlobalProp = p;
    else if (!secondGlobalProp) secondGlobalProp = p;
    lastGlobalProp = p;
  }
  return lastGlobalProp;
}

System.import = function (id) {
  // 加载前记录下当前环境中的属性，依赖加载后和上次环境中的属性做对比，可以知道在环境中挂载了那些新的属性
  noteGlobalProps();

  return Promise.resolve().then(() => {
    var load = getOrCreateLoad(id);
    return load.completion || topLevelLoad(load);
  });
};

function getOrCreateLoad(id) {
  var load = System["@"][id];
  if (load) return load;

  var ns = Object.create(null);
  Object.defineProperty(ns, Symbol.toStringTag, { value: "Module" });

  var instantiatePromise = Promise.resolve()
    .then(() => {
      return System.instantiate(id);
    })
    .then((registration) => {
      //依赖项
      var deps = registration[0];

      var _export = (name) => {
        for (var p in name) {
          ns[p] = name[p];
        }
        load.setter.forEach((setter) => setter(ns));
      };

      // 参数 __WEBPACK_DYNAMIC_EXPORT__ 函数，接受 webpack 模块化对象
      var declare = registration[1](_export);

      load.execute = declare.execute;
      return [deps, declare.setters];
    });

  var linkPromise = instantiatePromise.then((res) => {
    return Promise.all(
      res[0].map((dep, index) => {
        var setter = res[1][index];
        var depLoad = getOrCreateLoad(importMap.imports[dep]);

        if (setter) {
          depLoad.setter.push(setter);
        }

        return depLoad;
      })
    ).then((deps) => {
      load.deps = deps;
    });
  });

  return (load = System["@"][id] =
    {
      id,
      importMapPromise,
      linkPromise,
      ns,
      setter: [],
      deps: [],
      execute: () => {},
      completion: void 0,
    });
}

System.instantiate = function (id) {
  var script = document.createElement("script");
  script.async = true;
  script.src = id;

  // 异步等待 system 模块加载，并执行，执行结束后可以获取到模块注册的依赖信息
  return new Promise((resolve, reject) => {
    script.addEventListener("load", function () {
      document.head.removeChild(script);
      var register = System.getRegister();
      resolve(register);
    });
    document.head.appendChild(script);
  });
};

// 保存注册依赖以及回调函数

var lastRegister;
System.register = function (deps, declare) {
  lastRegister = [deps, declare];
};

function getGlobalProp() {
  var foundLastProp, result;
  var n = 0;

  // 依赖js引擎的行为
  for (var p in global) {
    if (shouldSkipProperty(p)) continue;

    if ((n == 0 && p !== firstGlobalProp) || (n == 1 && secondGlobalProp !== p))
      return p;
    if (foundLastProp) {
      // 下一个属性就是最新被赋值的属性
      lastGlobalProp = p;
      result = p;
    } else {
      // 匹配上一次最后一个属性
      foundLastProp = p === lastGlobalProp;
    }
    n++;
  }
  return result;
}

System.getRegister = function () {
  var _lastRegister = lastRegister;
  lastRegister = void 0;

  if (_lastRegister) return _lastRegister;

  // 检查js文件执行之后在环境中添加的属性

  var prop = getGlobalProp();

  var globalExport = global[prop];

  return [
    [],
    function (_exports) {
      return {
        execute: function () {
          _exports(globalExport);
          // 兼容esModule
          _exports({ default: globalExport, __useDefault: true });
        },
      };
    },
  ];
};

function topLevelLoad(load) {
  return Promise.resolve(load.linkPromise)
    .then(() => {
      return Promise.all(load.deps.map((dep) => dep.linkPromise));
    })
    .then(() => {
      // 等待所有依赖加载完成执行
      postOrderExec(load);
    });
}

function postOrderExec(load) {
  var execute = load.execute;

  // 首先执行依赖

  load.deps.forEach((dep) => {
    postOrderExec(dep);
  });

  execute();
}

function getDepsAndExec(arg1, arg2) {
  // define([], function () {})
  if (arg1 instanceof Array) {
    return [arg1, arg2];
  }
}
let amdDefineDeps, amdDefineExec;
global.define = function (name, deps, execute) {
  var depsAndExec;

  depsAndExec = getDepsAndExec(name, deps);
  amdDefineDeps = depsAndExec[0];
  amdDefineExec = depsAndExec[1];
};

var getRegister = systemPrototype.getRegister;
var lastRegisterDeclare;
var systemRegister = systemPrototype.register;
systemPrototype.register = function (name, deps, declare) {
  lastRegisterDeclare = typeof name === "string" ? declare : deps;
  systemRegister.apply(this, arguments);
};

systemPrototype.getRegister = function () {
  var register = getRegister.call(this); //[[], function () { return {} }];
  // 如果可以获取到 register 注册的依赖，表示此资源是标准的 systemJS 模块，直接返回
  if (register && register[1] === lastRegisterDeclare) return register;

  // 由于 amd 接管了模块的加载过程，所以在 window 上不会挂载 react 对象，getRegister 会返回空的声明函数结果，作为返回值
  // amd 模块默认有 ["exports"] 依赖
  // 此时 react 资源的 依赖对象和执行函数 都已经获取到 amdDefineDeps amdDefineExec

  createAMDRegister(amdDefineDeps, amdDefineExec);
};

function createAMDRegister(amdDefineDeps, amdDefineExec) {
  var exports = {};
  var module = { exports: exports };
  var depModules = [];
  var setters = [];
  var splice = 0;
  for (var i = 0; i < amdDefineDeps.length; i++) {
    var id = amdDefineDeps[i];
    var index = setters.length;
    if (id === "require") {
      depModules[i] = unsupportedRequire;
      splice++;
    } else if (id === "module") {
      depModules[i] = module;
      splice++;
    } else if (id === "exports") {
      depModules[i] = exports;
      splice++;
    } else {
      createSetter(i);
    }
    if (splice) amdDefineDeps[index] = id;
  }
  if (splice) amdDefineDeps.length -= splice;
  var amdExec = amdDefineExec;
  return [
    amdDefineDeps,
    function (_export) {
      _export({ default: exports, __useDefault: true });
      return {
        setters: setters,
        execute: function () {
          var amdResult = amdExec.apply(exports, depModules);
          if (amdResult !== undefined) module.exports = amdResult;
          _export(module.exports);
          _export("default", module.exports);
        },
      };
    },
  ];

  // needed to avoid iteration scope issues
  function createSetter(idx) {
    setters.push(function (ns) {
      depModules[idx] = ns.__useDefault ? ns.default : ns;
    });
  }
}

const HooksDispatcherOnMount: Dispatcher = {
  readContext,
  useCallback: mountCallback,
  useEffect: mountEffect,
  useMemo: mountMemo,
  useReducer: mountReducer,
  useRef: mountRef,
  useState: mountState,
  // ...其他 Hooks
};

const HooksDispatcherOnUpdate: Dispatcher = {
    readContext,
    useCallback: updateCallback,
    useContext: readContext,
    useEffect: updateEffect,
    useMemo: updateMemo,
    useReducer: updateReducer,   /
    useRef: updateRef,
    useState: updateState,
    // ...其他 Hooks
};

export const ContextOnlyDispatcher: Dispatcher = {
  readContext, // 允许读取 Context
  useCallback: throwInvalidHookError, // 抛出非法调用错误
  useContext: throwInvalidHookError,
  useEffect: throwInvalidHookError,
  useMemo: throwInvalidHookError,
  useReducer: throwInvalidHookError,
  useRef: throwInvalidHookError,
  useState: throwInvalidHookError,
  // ...其他 Hooks 同理
};

const hook = {
  memoizedState: null, //当前 Hook 的缓存状态
  baseState: null, // 基础状态（用于更新对比或重置）
  baseQueue: null, // 基础更新队列（待处理的优先级较低更新）
  queue: null, // 当前更新队列（高优先级更新）
  next: null, // 指向下一个 Hook 节点的指针
};

export function renderWithHooks(
  current, // 当前 Fiber 节点（null 表示首次挂载）
  workInProgress, // 正在处理的 Fiber 节点（本次渲染目标）
  Component, // 用户编写的函数组件
  props, // 组件接收的 props
  secondary, // 次要参数（通常为 ref）
  nextRenderLanes // 本次渲染的优先级车道（Lane 模型）
) {
  // 设置全局渲染相关变量
  renderLanes = nextRenderLanes;
  currentlyRenderingFiber = workInProgress;

  // 重置 Hook 链表和副作用队列
  workInProgress.memoizedState = null; // 清空 Hooks 链表
  workInProgress.updateQueue = null; // 清空 Effect List

  // 动态切换 Hooks 分发器
  ReactCurrentDispatcher.current =
    current === null || current.memoizedState === null
      ? HooksDispatcherOnMount // 挂载阶段分发器
      : HooksDispatcherOnUpdate; // 更新阶段分发器

  // 执行用户函数组件，触发 Hooks 调用
  let children = Component(props, secondary);

  // 渲染后清理工作
  finishRenderingHooks(current, workInProgress);
  return children;
}

function finishRenderingHooks(current, workInProgress) {
  // 强制切换为错误分发器，防止外部调用 Hooks
  ReactCurrentDispatcher.current = ContextOnlyDispatcher;
  // ...其他清理逻辑
}

function mountState(initialState) {
  // 1. 创建 hook 对象
  const hook = mountWorkInProgressHook(); // 初始化 hook 对象，关联当前正在渲染的组件

  // 2. 判断 initialState 是否是一个函数，如果是则调用它并获得初始状态
  if (typeof initialState === "function") {
    initialState = initialState(); // 如果 initialState 是函数，调用该函数获取状态值
  }

  // 2. 初始化 hook 的属性
  // 2.1 设置 hook.memoizedState / hook.baseState
  hook.memoizedState = hook.baseState = initialState;

  // 定义 queue（队列），用于管理状态更新
  const queue = {
    pending: null, // 队列中待处理的更新
    lanes: NoLanes, // 当前更新所属的 lane，通常表示优先级
    dispatch: null, // 状态更新函数
    lastRenderedReducer: basicStateReducer, // 上一次渲染的状态更新函数
    lastRenderedState: initialState, // 上一次渲染的状态
  };

  // 2.2 设置 hook.queue
  hook.queue = queue; // 将队列分配给 hook 的 queue 属性

  // 2.3 设置 hook.dispatch
  // 将 dispatchSetState 绑定到当前组件的上下文中，并传入队列
  const dispatch = (queue.dispatch = dispatchSetState.bind(
    null,
    currentlyRenderingFiber,
    queue
  ));

  // 3. 返回当前状态和 dispatch 函数
  return [hook.memoizedState, dispatch]; // 返回当前状态和状态更新函数
}

function mountWorkInProgressHook() {
  const hook = {
    memoizedState: null, // Hook 自身维护的状态
    baseState: null,
    baseQueue: null,
    queue: null, // Hook 自身维护的更新队列
    next: null, // 指向下一个 Hook
  };

  // 如果当前组件的 Hook 链表为空，说明这是第一个 Hook
  if (workInProgressHook === null) {
    // 这是链表的第一个节点（头结点）
    currentlyRenderingFiber.memoizedState = workInProgressHook = hook;
  } else {
    // 如果当前组件的 Hook 链表不为空，将新创建的 Hook 添加到链表的末尾（作为尾结点）
    workInProgressHook = workInProgressHook.next = hook;
  }

  return workInProgressHook;
}

function updateWorkInProgressHook() {
  let nextCurrentHook;

  // 获取当前 Fiber 的 alternate（用于双缓冲）
  const current = currentlyRenderingFiber.alternate;

  if (current !== null) {
    // 如果当前有 alternate（即已经存在旧的 Fiber）
    nextCurrentHook = current.memoizedState;
  } else {
    nextCurrentHook = null;
  }

  // 获取下一个 Hook
  nextCurrentHook = currentHook.next;

  // 更新 workInProgressHook 的指向
  let nextWorkInProgressHook;
  if (workInProgressHook === null) {
    // 当是第一个 Hook，直接从当前 Fiber 上获取第一个 hook
    nextWorkInProgressHook = currentlyRenderingFiber.memoizedState;
  } else {
    // 获取链表的下一个 hook
    nextWorkInProgressHook = workInProgressHook.next;
  }

  // nextWorkInProgressHook 指向当前正在工作的 hook
  if (nextWorkInProgressHook !== null) {
    // 如果已经有工作中的 hook，重用它
    workInProgressHook = nextWorkInProgressHook;
    nextWorkInProgressHook = workInProgressHook.next;

    // 当前 hook 指向下一个 hook
    currentHook = nextCurrentHook;
  } else {
    // 克隆当前 hook
    if (nextCurrentHook === null) {
      const currentFiber = currentlyRenderingFiber.alternate;
      if (currentFiber === null) {
        // 这是初始渲染，组件挂起、恢复时将渲染一个附加的 hook
        const newHook = {
          memoizedState: null,
          baseState: null,
          baseQueue: null,
          queue: null,
          next: null,
        };
        nextCurrentHook = newHook; // 设置为当前 hook
      } else {
        // 如果是更新渲染，应该有一个有效的当前 hook
        throw new Error("Rendered more hooks than during the previous render.");
      }
    }
  }

  const newHook = {
    memoizedState: currentHook.memoizedState, // 当前 Hook 的状态值
    baseState: currentHook.baseState, // 当前 Hook 的基础状态
    baseQueue: currentHook.baseQueue, // 当前 Hook 的基础更新队列
    queue: currentHook.queue, // 当前 Hook 的更新队列
    next: null, // 指向下一个 Hook
  };

  // 如果 workInProgressHook 为 null，说明这是第一个 Hook
  if (workInProgressHook === null) {
    // 设置当前渲染组件的 memoizedState 为新的 Hook
    currentlyRenderingFiber.memoizedState = workInProgressHook = newHook;
  } else {
    // 否则，将新的 Hook 添加到链表的末尾
    workInProgressHook = workInProgressHook.next = newHook;
  }

  return workInProgressHook;
}

const effect = {
  // 用于区分 effect 类型 Passive | Layout | Insertion
  tag, // effect 回调函数
  create, // effect 创建函数
  destroy, // 销毁函数
  deps, // 依赖项
  // 与当前 FC 的其他 effect 形成环状链表
  next: null,
};

function mountCallback(callback, deps) {
  // 首先还是创建一个 hook 对象
  const hook = mountWorkInProgressHook();

  // 依赖项
  const nextDeps = deps === undefined ? null : deps;

  // 把要缓存的函数和依赖数组存到 hook 对象上
  hook.memoizedState = [callback, nextDeps];

  // 向外部返回缓存函数
  return callback;
}

function updateCallback(callback, deps) {
  // 获取之前的 hook 对象
  const hook = updateWorkInProgressHook();

  // 新的依赖项
  const nextDeps = deps === undefined ? null : deps;

  // 之前的值，也就是 [callback, nextDeps]
  const prevState = hook.memorizedState;

  if (prevState !== null) {
    if (nextDeps !== null) {
      const prevDeps = prevState[1]; // 获取到之前的依赖项

      // 对比依赖项是否相同
      if (areHookInputsEqual(nextDeps, prevDeps)) {
        // 相同回 callback
        return prevState[0];
      }
    }
  }

  // 否则重新缓存
  hook.memorizedState = [callback, nextDeps];
  return callback;
}

function mountRef(initialValue) {
  // 创建 hook 对象
  const hook = mountWorkInProgressHook();
  const ref = { current: initialValue };

  // hook对象的 memorizedState 值 { current: initialValue }
  hook.memorizedState = ref;
  return ref;
}

function updateRef(initialValue) {
  // 获取当前的 hook 对象
  const hook = updateWorkInProgressHook();
  return hook.memorizedState;
}

function markRef(current, workInProgress) {
  const ref = workInProgress.ref;
  if (
    (current === null && ref !== null) ||
    (current !== null && current.ref !== ref)
  ) {
    // 标记 Reg tag
    workInProgress.flags |= Ref;
  }
}

function commitLayoutEffectOnFiber(
  finishedRoot,
  current,
  finishedWork,
  committedLanes
) {
  // 省略代码
  if (finishedWork.flags & Ref) {
    commitAttachRef(finishedWork);
  }
}

function commitAttachRef(finishedWork) {
  const ref = finishedWork.ref;
  if (ref !== null) {
    const instance = finishedWork.stateNode;
    let instanceToUse;
    switch (finishedWork.tag) {
      case HostComponent:
        // HostComponent 需要获取对应的 DOM 元素
        instanceToUse = getPublicInstance(instance);
        break;
      default:
        // ClassComponent 使用 FiberNode.stateNode 保存实例
        instanceToUse = instance;
    }

    if (typeof ref === "function") {
      // 函数类型，执行函数并将实例传入
      let retVal;
      retVal = ref(instanceToUse);
    } else {
      // { current: T } 类型则更新 current 指向
      ref.current = instanceToUse;
    }
  }
}