react hot reloading / react refresh 是

怎么做的。

track react refresh

背景

• vite 5.0.10
• @vitejs/plugin-react 4.2.1
• react-router 6.21.1

发现 hmr 正常给了新文件出去，但是 react refresh not work。

思路

• injectIntoGlobalHook 会提前埋伏，劫持关键的回调 onScheduleFiberRoot 和 onCommitFiberRoot，从关键回调里面通过 helpersByRendererID 获取到 helper 。把 helper 储存起来。
• @react-refresh 的 register 会把哪一些文件需要更新的提前注册存储起来。
• import.meta.hot.accept 接收到新更新文件。把现有源码文件和新更新源码文件发到 RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate 进行处理。
• validateRefreshBoundaryAndEnqueueUpdate 会安排他们进入更新队列 enqueueUpdate。
• 从已经挂载的节点中，执行 helpers.scheduleRefresh 来更新节点。
• 执行 flushPassiveEffects、flushSync， 进入 scheduleFibersWithFamiliesRecursively， 如果tag不属于 class、func、memo 不更新；

    switch (tag) {
      case FunctionComponent:
      case SimpleMemoComponent:
      case ClassComponent:
        candidateType = type;
        break;

      case ForwardRef:
        candidateType = type.render;
        break;
    }

什么情况下会更新：

• fiber 节点需要属于 func、 class、 memo 才能正常更新，如果你新保存的文件内容不属于这一类则不进行更新。

ReactTypeOfWork 说明 fiber tag 的类型

参考地址：

• react-refresh 源码