使用 react 创建组件时，我应该何时调用库“react”和“react-dom”？

Question

我研究 React 已经有一段时间了，现在我开始用它开发自己的应用程序，当我注意到我真的不知道 react 和 react-dom 库之间的区别时，我知道“反应”是 JavaScript 库，react-dom 是为我提供与 DOM 交互的方法的库，但是当我不导入它们时似乎什么也没有发生（我使用 create-react-app 环境，可能就是这样） .话虽如此，这就是我通常创建组件的方式：

import React from 'react';

function ComponentName () {
  return(
    <div>
      <!-- Component code -->
    </div>
  )
}

export {ComponentName};

那么上面的代码有什么区别，这个：

import React from 'react-dom';

function ComponentName () {
  return(
    <div>
      <!-- Component code -->
    </div>
  )
}

还有这个？

import React from 'react-dom';

function ComponentName () {
  return(
    <div>
      <!-- Component code -->
    </div>
  )
}

Answer 1

反应

对于 React，您必须从“react”导入 React。您需要导入默认值，并且需要将其命名为 React。这是因为无论何时您编写类似 or 的 JSX 代码，此 JSX 代码都会被转译并使用 React.createElement()。因此，您需要能够访问命名的 React 对象。

注意： React 17 和一些较旧的指定主要版本现在包含一个新的 JSX 转换，不需要此显式 React 导入。

ReactDOM

然而，对于 ReactDOM，您可能最关心的是作为默认导出一部分的 DOM 相关方法，如 render() 或 hydra() 等方法。因为那是您可能会使用的，您可以为您的导入模块命名任何您想要的名称。所以，你可以这样做：

import FooBar from 'react-dom'
FooBar.render(someElement)

这确实有效，但标准约定是调用导入的模块 ReactDOM，因为这会使其他人更容易理解您的代码。

Answer 2

使用 react-dom 为您创建 React App 句柄（在 src 目录中的 index.js/index.ts 中）。

从"react" 导入React，而不是从"react-dom"。如果您使用的是最新版本，则只需在代码中使用React 对象时执行此操作（例如使用React.memo，尽管您可以改用import {memo} from "react"）。您不再需要为 JSX (details) 导入 React。

基本上：

• "react" 是主库
• "react-dom" 提供了在 DOM 中使用 React 的功能
• 还有其他库可以在没有 DOM 的情况下使用 React（例如，用于服务器端渲染）