react DOM 内部共享

一、作用

二、导出的常量

1. 无事件优先级

// This should line up with NoEventPriority from react-reconciler/src/ReactEventPriorities
// but we can't depend on the react-reconciler from this isomorphic code.
//
// 这应该与 react-reconciler/src/ReactEventPriorities 中的 NoEventPriority 对齐。但我们不能在这个
// 同构代码中依赖 react-reconciler。
export const NoEventPriority: EventPriority = (0: any);

2. 内部结构

type ReactDOMInternals = {
  // ReactDOM当前调度器
  d /* ReactDOMCurrentDispatcher */: HostDispatcher;
  // 当前更新优先级
  p /* currentUpdatePriority */: EventPriority;
  findDOMNode:
    | null
    // | ((componentOrElement: component(...props: any)) => null | Element | Text),
    | ((componentOrElement: Component) => null | Element | Text);
};

const Internals: ReactDOMInternals = {
  // ReactDOM当前调度器
  d /* ReactDOMCurrentDispatcher */: DefaultDispatcher,
  // 当前更新优先级
  p /* currentUpdatePriority */: NoEventPriority,
  findDOMNode: null,
};

三、常量

1. 默认调度器

备注

• noop() 是由 noop 提供的空函数

const DefaultDispatcher: HostDispatcher = {
  // 同步刷新工作
  f /* flushSyncWork */: noop,
  // 请求表单重置
  r /* requestFormReset */: requestFormReset,
  // 预取 DNS
  D /* prefetchDNS */: noop,
  // 预连接
  C /* preconnect */: noop,
  // 预下载
  L /* preload */: noop,
  // 预加载模块
  m /* preloadModule */: noop,
  // 预初始化脚本
  X /* preinitScript */: noop,
  // 预初始化样式
  S /* preinitStyle */: noop,
  // 预初始化模块脚本
  M /* preinitModuleScript */: noop,
};

四、工具

1. 请求表单重置

如果是在非 react 环境下使用 react dom 包，请求表单重置的时候会触发该报错。具体的实现是在 react dom bindings 包中实现的。实现方式是通过构建打包程序自动装载并覆盖该方法。

function requestFormReset(element: HTMLFormElement) {
  throw new Error(
    'Invalid form element. requestFormReset must be passed a form that was ' +
      'rendered by React.',
  );
}