react包需要创建和使用组件和钩子，react- DOM包含react- DOM /客户端和react- DOM /服务器来在浏览器的DOM或服务器上的字符串(或流)中呈现你的应用程序。使用React -native，您可以使用React为Android和iOS创建原生应用程序。

---

这个问题在七年前就被提出了，自那以后发生了很多变化。 大部分答案不再正确或包含过时的信息。 我会尽量用最新的信息给你一个完整而简单的答案。

反应18

React 18已于2022年3月发布。它在其公共api中带来了一些有趣的变化。

包

反应

如React文档中所述:

React是React库的入口点。如果你从<script>标签加载React，这些顶级api在React全局中可用。

事实上，它公开了大多数常用的React特性来创建和使用组件。其中一些是:

React.Component and React.PureComponent, used to create class components and function components React.createElement(), used convert your JSX code from <Page title="Home page" />to React.createElement(Page, { title: "Home page" }, null) React.Fragment, to return multiple elements without creating additional DOM elements (starting with React 16.2 you can also use <></> to create a fragment. hooks, to let you use state and other React features without writing a class Refs, Suspence and Transitions

React对象公开的API的完整列表

React -dom, React -native和下面列出的其他都是React渲染器。它们管理React树如何转换为底层平台调用。

react-dom

React -dom包提供了特定于dom的方法，可以在应用程序的顶层使用，如果需要，也可以作为逃离React模型的出口。

这个包本质上是一个容器，用于从单个包中公开客户端和服务器子包。实际上，它只暴露了两个函数:

createPortal()，用于创建门户并在父组件的DOM层次结构之外呈现子门户 flushSync()是您可能从未听说过的东西，这是有原因的。因为它会严重影响性能。

从React 18开始，这些函数被标记为遗留函数，所以它们将在未来的版本中被弃用:

呈现() 水合物() findDOMNode () unmountComponentAtNode ()

如果你在想“天哪，他们已经弃用了ReactDOM。render´方法from React”，不要担心，阅读下面的内容。

弃用背后的原因是:

重新设计我们在客户端和服务器上呈现的api的机会。这些变化允许用户在升级到React 18的新api时，继续在React 17模式下使用旧的api。

请记住，如果你继续使用这些遗留api, React 18的新功能将被禁用。

react-dom包公开的API的完整列表

react-dom /客户端

react-dom/client包提供了客户端特定的方法，用于在客户端初始化应用程序。您的大多数组件都不需要使用这个模块。

React DOM Client模块只公开了两个方法:

createRoot()是一个新方法来创建一个根你的应用程序将。这是ReactDOM的替代品。渲染-请看下面的例子 hydrateRoot()是ReactDOM的替代品。水合物，需要水合物服务器渲染的应用程序

现在渲染你的应用程序的惯用方法是使用createRoot和渲染链接在一起:

import React from 'react';
import * as ReactDOM from 'react-dom/client';

ReactDOM
  .createRoot(document.getElementById('root'))
  .render(<h1>Hello, world!</h1>);

或者使用一个常量，如果你不喜欢链接，这只是一个风格的问题:

import React from 'react';
import * as ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<h1>Hello, world!</h1>);

react-dom/client包所公开的API的完整列表

react-dom /服务器

ReactDOMServer对象使您能够将组件呈现为静态标记。通常，它在Node服务器上使用

使用ReactDOMServer你可以在服务器端渲染React组件。它提供了广泛的方法来实现这一点-每个环境都有专门的功能:

renderToPipeableStream()，使用Node.js流 renderToNodeStream()(已弃用)，使用Node.js流 renderToStaticNodeStream()，使用Node.js流 renderToReadableStream()，使用Web流可用的浏览器，Deno，…

此外，还有一些渲染可以在不支持流的环境中使用:

React 18不推荐使用renderToString() renderToStaticMarkup ()

你可以使用他们，但他们有有限的悬念支持。

这是一个最小的工作示例，尝试自己的ReactDOMServer:

import React from 'react';
import * as ReactDOMServer from 'react-dom/server';

const html = ReactDOMServer.renderToString(<h1>Hello, world!</h1>);

react-dom/server包公开的API的完整列表

react-native

使用React Native, React原语呈现到本机平台UI，这意味着你的应用程序使用与其他应用程序相同的本机平台api。

React Native本身已经有了一个巨大的生态系统，它不仅仅局限于渲染组件。

现在不再建议您自己安装react-native模块。相反，您可以使用expoi -cli来利用它的自动化来开发应用程序。

---

其他React渲染器

这些是目前React中最有趣的渲染器

react-canvas

React-canvas项目已死，但类似的功能可以在 react-konva。使用它，你可以在HTML画布中渲染React组件。

react-three

react- 3已经被react- 3 -fiber取代。它允许你从React中声明式地构建你的three.js场景。

ink

ink是一个用于cli的React渲染器。使用它，您可以使用组件构建CLI输出。

react-figma

React - Figma是一个针对Figma的React渲染器。你可以使用React组件作为你的设计来源。

react-pdf

React - PDF是一个React渲染器，用于在浏览器和服务器上创建PDF文件。

---

FAQ

原型去哪了?

随着react 15.5的发布，prop-types库 移到React之外的一个专用包中。

react包需要创建和使用组件和钩子，react- DOM包含react- DOM /客户端和react- DOM /服务器来在浏览器的DOM或服务器上的字符串(或流)中呈现你的应用程序。使用React -native，您可以使用React为Android和iOS创建原生应用程序。

---

这个问题在七年前就被提出了，自那以后发生了很多变化。 大部分答案不再正确或包含过时的信息。 我会尽量用最新的信息给你一个完整而简单的答案。

反应18

React 18已于2022年3月发布。它在其公共api中带来了一些有趣的变化。

包

反应

如React文档中所述:

React是React库的入口点。如果你从<script>标签加载React，这些顶级api在React全局中可用。

事实上，它公开了大多数常用的React特性来创建和使用组件。其中一些是:

React.Component and React.PureComponent, used to create class components and function components React.createElement(), used convert your JSX code from <Page title="Home page" />to React.createElement(Page, { title: "Home page" }, null) React.Fragment, to return multiple elements without creating additional DOM elements (starting with React 16.2 you can also use <></> to create a fragment. hooks, to let you use state and other React features without writing a class Refs, Suspence and Transitions

React对象公开的API的完整列表

React -dom, React -native和下面列出的其他都是React渲染器。它们管理React树如何转换为底层平台调用。

react-dom

React -dom包提供了特定于dom的方法，可以在应用程序的顶层使用，如果需要，也可以作为逃离React模型的出口。

这个包本质上是一个容器，用于从单个包中公开客户端和服务器子包。实际上，它只暴露了两个函数:

createPortal()，用于创建门户并在父组件的DOM层次结构之外呈现子门户 flushSync()是您可能从未听说过的东西，这是有原因的。因为它会严重影响性能。

从React 18开始，这些函数被标记为遗留函数，所以它们将在未来的版本中被弃用:

呈现() 水合物() findDOMNode () unmountComponentAtNode ()

如果你在想“天哪，他们已经弃用了ReactDOM。render´方法from React”，不要担心，阅读下面的内容。

弃用背后的原因是:

重新设计我们在客户端和服务器上呈现的api的机会。这些变化允许用户在升级到React 18的新api时，继续在React 17模式下使用旧的api。

请记住，如果你继续使用这些遗留api, React 18的新功能将被禁用。

react-dom包公开的API的完整列表

react-dom /客户端

react-dom/client包提供了客户端特定的方法，用于在客户端初始化应用程序。您的大多数组件都不需要使用这个模块。

React DOM Client模块只公开了两个方法:

createRoot()是一个新方法来创建一个根你的应用程序将。这是ReactDOM的替代品。渲染-请看下面的例子 hydrateRoot()是ReactDOM的替代品。水合物，需要水合物服务器渲染的应用程序

现在渲染你的应用程序的惯用方法是使用createRoot和渲染链接在一起:

import React from 'react';
import * as ReactDOM from 'react-dom/client';

ReactDOM
  .createRoot(document.getElementById('root'))
  .render(<h1>Hello, world!</h1>);

或者使用一个常量，如果你不喜欢链接，这只是一个风格的问题:

import React from 'react';
import * as ReactDOM from 'react-dom/client';

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(<h1>Hello, world!</h1>);

react-dom/client包所公开的API的完整列表

react-dom /服务器

ReactDOMServer对象使您能够将组件呈现为静态标记。通常，它在Node服务器上使用

使用ReactDOMServer你可以在服务器端渲染React组件。它提供了广泛的方法来实现这一点-每个环境都有专门的功能:

renderToPipeableStream()，使用Node.js流 renderToNodeStream()(已弃用)，使用Node.js流 renderToStaticNodeStream()，使用Node.js流 renderToReadableStream()，使用Web流可用的浏览器，Deno，…

此外，还有一些渲染可以在不支持流的环境中使用:

React 18不推荐使用renderToString() renderToStaticMarkup ()

你可以使用他们，但他们有有限的悬念支持。

这是一个最小的工作示例，尝试自己的ReactDOMServer:

import React from 'react';
import * as ReactDOMServer from 'react-dom/server';

const html = ReactDOMServer.renderToString(<h1>Hello, world!</h1>);

react-dom/server包公开的API的完整列表

react-native

使用React Native, React原语呈现到本机平台UI，这意味着你的应用程序使用与其他应用程序相同的本机平台api。

React Native本身已经有了一个巨大的生态系统，它不仅仅局限于渲染组件。

现在不再建议您自己安装react-native模块。相反，您可以使用expoi -cli来利用它的自动化来开发应用程序。

---

其他React渲染器

这些是目前React中最有趣的渲染器

react-canvas

React-canvas项目已死，但类似的功能可以在 react-konva。使用它，你可以在HTML画布中渲染React组件。

react-three

react- 3已经被react- 3 -fiber取代。它允许你从React中声明式地构建你的three.js场景。

ink

ink是一个用于cli的React渲染器。使用它，您可以使用组件构建CLI输出。

react-figma

React - Figma是一个针对Figma的React渲染器。你可以使用React组件作为你的设计来源。

react-pdf

React - PDF是一个React渲染器，用于在浏览器和服务器上创建PDF文件。

---

FAQ

原型去哪了?

随着react 15.5的发布，prop-types库 移到React之外的一个专用包中。

react包保存了组件、状态、道具和所有react代码的react源。

React - DOM包顾名思义是React和DOM之间的粘合剂。通常，您只会将它用于一件事:使用ReactDOM.render()将应用程序挂载到index.html文件。

React: React是一个javascript库，旨在构建更好的用户界面。

React-DOM: React-DOM是React的一个免费库，它将React粘合到浏览器DOM上

我们正在使用React，每当我们使用render()或findDOMNode()等方法时，我们都在使用React- dom。

当我们看到React -native、React -art、React -canvas和React -three这样的包时，很明显，React的美丽和本质与浏览器或DOM无关。 为了更清楚地说明这一点，也为了更容易地构建更多React可以渲染的环境，他们将主要的React包分为两个:React和React -dom。

react包保存了组件、状态、道具和所有react代码的react源。

React - DOM包顾名思义是React和DOM之间的粘合剂。通常，您只会将它用于一件事:使用ReactDOM.render()将应用程序挂载到index.html文件。

为什么要把他们分开?

React和React dom被分成两个库的原因是React Native(一个用于移动开发的React平台)的到来。

更简洁地说，react用于组件，react- DOM用于在DOM中呈现组件。'react-dom'充当组件和DOM之间的粘合剂。您将使用react-dom的render()方法来渲染DOM中的组件，这就是您开始使用它时所需要知道的全部内容。