React DOM client

一、作用

二、常量

1. 找到开发者工具

备注

• injectIntoDevTools() 由 ReactFilerReconciler#injectIntoDevTools 实现
• canUseDOM() 由 ExecutionEnvironment#canUseDOM 提供

const foundDevTools = injectIntoDevTools();

if (__DEV__) {
  if (!foundDevTools && canUseDOM && window.top === window.self) {
    // If we're in Chrome or Firefox, provide a download link if not installed.
    // 如果我们在 Chrome 或 Firefox 中，如果未安装，则提供下载链接
    if (
      (navigator.userAgent.indexOf('Chrome') > -1 &&
        navigator.userAgent.indexOf('Edge') === -1) ||
      navigator.userAgent.indexOf('Firefox') > -1
    ) {
      const protocol = window.location.protocol;
      if (/^(https?|file):$/.test(protocol)) {
        console.info(
          '%cDownload the React DevTools ' +
            'for a better development experience: ' +
            'https://react.dev/link/react-devtools' +
            (protocol === 'file:'
              ? '\nYou might need to use a local HTTP server (instead of file://): ' +
                'https://react.dev/link/react-devtools-faq'
              : ''),
          'font-weight:bold',
        );
      }
    }
  }
}

三、工具

1. 嗯

全局副作用。

备注

源码中 22 - 50 行

• ensureCorrectIsomorphicReactVersion() 由 ensureCorrectIsomorphicReactVersion 实现
• findHostInstance() 由 ReactFilerReconciler#findHostInstance 实现

ensureCorrectIsomorphicReactVersion();

if (__DEV__) {
  if (
    typeof Map !== 'function' ||
    Map.prototype == null ||
    typeof Map.prototype.forEach !== 'function' ||
    typeof Set !== 'function' ||
    Set.prototype == null ||
    typeof Set.prototype.clear !== 'function' ||
    typeof Set.prototype.forEach !== 'function'
  ) {
    console.error(
      'React depends on Map and Set built-in types. Make sure that you load a ' +
        'polyfill in older browsers. https://react.dev/link/react-polyfills',
    );
  }
}

function findDOMNode(
  // componentOrElement: component(...props: any),
  componentOrElement: Component,
): null | Element | Text {
  return findHostInstance(componentOrElement);
}

// Expose findDOMNode on internals
Internals.findDOMNode = findDOMNode;

四、转导

• 从 ReactDOMRoot#createRoot 转导了 createRoot
• 从 ReactDOMRoot#hydrateRoot 转导了 hydrateRoot
• 从 ReactVersion 转导了 ReactVersion ad version