React 与 ReactDOM？

Posted 2023-02-21

【中文标题】React 与 ReactDOM？

【英文标题】：React vs ReactDOM?

【发布时间】：2016-03-10 22:06:33

【问题描述】：

我对反应有点陌生。我看到我们必须导入两个东西才能开始，React 和ReactDOM，谁能解释一下区别。我正在阅读React documentation，但它没有说。

【参考方案1】：

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

【讨论】：

关注点分离...我们喜欢看到它

【参考方案2】：

来自React v0.14 Beta release announcement。

当我们查看像 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 提供服务器端渲染支持。

这两段解释了来自v0.13 的核心 API 方法在哪里结束。

【讨论】：

从 React v15.4.0 开始，React 不再有 ReactDOM - facebook.github.io/react/blog/2016/11/16/react-v15.4.0.html

react 不再包含 React.PropTypes，proptypes 有自己的名为 'prop-types' 的存储库

【参考方案3】：

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

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

【参考方案4】：

在 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。

【讨论】：

此评论与原始问题无关，但您的回答引入了 require('blah').. 解释一下如何在浏览器中运行它，因为 require 不是普通的 js 吗？跨度>

【参考方案5】：

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

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

如您所见。没有react-dom。

【参考方案6】：

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

【参考方案7】：

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

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

为什么要将它们分开？

reason React 和 ReactDOM 被拆分为两个库是由于 React Native (A react platform for mobile development) 的到来。

【参考方案8】：

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。

【参考方案9】：

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

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