React和ReactDOM最近才被分成两个不同的库。在v0.14之前，所有的React功能都是React的一部分。这可能是一个困惑的来源，因为任何稍微过时的文档都不会提到React / ReactDOM的区别。

顾名思义，ReactDOM是React和DOM之间的粘合剂。通常，你只会用它做一件事:用ReactDOM.render()安装。ReactDOM的另一个有用特性是ReactDOM. finddomnode()，您可以使用它直接访问DOM元素。(在React应用程序中应该少用，但可能是必要的。)如果你的应用是“同构”的，你也可以在后端代码中使用ReactDOM.renderToString()。

对于其他的事情，有React。你使用React来定义和创建你的元素，用于生命周期钩子等，即React应用程序的核心。

React和React dom被分成两个库的原因是React Native的到来。React包含在web和移动应用程序中使用的功能。ReactDOM功能仅在web应用中使用。[更新:经过进一步的研究，很明显我对React Native的无知正在显现。现在，让React包在网络和移动设备上都通用似乎更像是一种愿望，而不是现实。React Native目前是一个完全不同的包。

查看发布v0.14的博文: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html

来自React v0.14 Beta发布公告。

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

从根本上说，React的想法与浏览器无关，它们只是渲染组件树的众多目标之一。React包允许开发人员从React包中删除任何不必要的代码，并将其移动到更合适的存储库中。

The react package contains React.createElement, React.createClass and React.Component, React.PropTypes, React.Children, and the other helpers related to elements and component classes. We think of these as the isomorphic or universal helpers that you need to build components. The react-dom package contains ReactDOM.render, ReactDOM.unmountComponentAtNode, and ReactDOM.findDOMNode, and in react-dom/server we have server-side rendering support with ReactDOMServer.renderToString and ReactDOMServer.renderToStaticMarkup.

这两段说明了v0.13的核心API方法的最终位置。

ReactDOM模块公开了dom特定的方法，而React拥有核心工具，旨在由React在不同平台上共享(例如React Native)。

http://facebook.github.io/react/docs/tutorial.html

在v0.14之前，它们是主ReactJs文件的一部分，但在某些情况下，我们可能不需要两个，它们分开了，从0.14版本开始，这样如果我们只需要其中一个，我们的应用程序会因为只使用其中一个而变得更小:

var React = require('react'); /* importing react */
var ReactDOM = require('react-dom'); /* importing react-dom */

var MyComponent = React.createClass({
  render: function() {
    return <div>Hello World</div>;
  }
});

ReactDOM.render(<MyComponent />, node);

React包包含:React。createElement,反应。createClass,反应。组件,反应。proptype,反应。孩子们

React-dom包包含:渲染,ReactDOM。unmountComponentAtNode ReactDOM。findDOMNode和react-dom/server，包括:ReactDOMServer。renderToString和ReactDOMServer.renderToStaticMarkup。

看起来他们已经将React分为React和React -dom包，所以你不必在非dom特定的情况下使用dom相关的部分，比如这里的https://github.com/Flipboard/react-canvas 他们从哪里进口

var React = require('react');
var ReactCanvas = require('react-canvas');

如你所见。没有react-dom。

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

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

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

为什么要把他们分开?

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

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- 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之外的一个专用包中。