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

Question

我研究 React 有一段时间了，现在才开始用它开发我自己的应用程序，当我发现我真的不知道 react 和 react-dom 库之间的区别时，我知道 'react' 是 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-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" 提供将 React 与 DOM
还有其他库可以在没有 DOM 的情况下使用 React（例如，用于服务器端渲染）

Answer 2

反应

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

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

反应DOM

对于 ReactDOM，但是，您可能最关心作为默认导出的一部分的 DOM 相关方法，如 render() 或 hydrate() 等方法。因为这就是您可能会使用的内容，所以您可以随意命名您的导入模块。所以，你可以这样做：

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

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

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

When creating a component with react, when should i call the libraries 'react' and 'react-dom'?

jsx

reactjs

create-react-app