235

我有点新反应。我看到我们必须导入两件事才能开始，React并且ReactDOM，任何人都可以解释其中的区别。我正在阅读React 文档，但没有说明。

4

9 回答 9

294

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

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

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

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

请参阅宣布 v0.14 版本的博客文章： https ://facebook.github.io/react/blog/2015/10/07/react-v0.14.html

于 2015-12-06T06:17:47.177 回答
62

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

当我们查看 、 、 和 等包react-native时react-art，react-canvas很react-three明显 React 的美丽和本质与浏览器或 DOM 无关。

为了更清楚地说明这一点并更容易构建更多 React 可以渲染的环境，我们将主要的 react 包分成两个：react 和 react-dom。

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

该react包包含React.createElement、React.createClass、React.Component、React.PropTypes、React.Children和其他与元素和组件类相关的帮助器。我们将这些视为构建组件所需的同构或通用助手。

该react-dom包包含ReactDOM.render、ReactDOM.unmountComponentAtNode和ReactDOM.findDOMNode，并且react-dom/server我们有服务器端渲染支持ReactDOMServer.renderToString和ReactDOMServer.renderToStaticMarkup。

这两段解释了核心 API 方法从何而来v0.13。

于 2015-12-06T06:24:22.720 回答
7

在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、React.createClass、React.Component、React.PropTypes、React.Children

React-dom包包含：ReactDOM.render、ReactDOM.unmountComponentAtNode、ReactDOM.findDOMNode 和 react-dom/server，其中包括：ReactDOMServer.renderToString 和 ReactDOMServer.renderToStaticMarkup。

于 2016-12-14T11:44:41.720 回答
6

看起来他们已经将 React 分成react和react-dom包，因此您不必将与 DOM 相关的部分用于您想在非 DOM 特定情况下使用它的项目，例如这里https:// github.com/Flipboard/react-canvas 他们导入的地方

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

如你看到的。没有react-dom.

于 2017-02-25T23:22:32.253 回答
5

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

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

于 2016-05-04T15:20:00.710 回答
5

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

于 2017-03-10T08:24:31.113 回答
3

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。

于 2020-09-21T11:01:26.313 回答
2

react 包包含组件、状态、道具和所有反应代码的反应源。

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

于 2020-11-20T13:41:33.020 回答
1

react package保存react source组件、状态、道具和所有反应的代码。

react-dom顾名思义，该包是glue between React and the DOM. 通常，您只会将它用于一件事：mounting your application to the index.html file with ReactDOM.render().

为什么要把它们分开？

React 和ReactDOMreason被拆分为两个库是由于React Native (A react platform for mobile development).

于 2019-11-29T07:34:11.140 回答