logo标签列表

React与ReactDOM的区别？

reactjsreact-dom
253

我对React还不太熟悉。我发现我们需要导入两个东西才能开始使用：React和ReactDOM，能否有人解释一下它们的区别？我正在阅读React文档，但里面没有说。

10个回答
308

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知识有限。目前，将React软件包共享给Web和移动应用程序似乎更多地是一种愿景而不是现实。React Native目前是完全不同的软件包。]

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

2
关注点分离...我们喜欢看到它 - Elijah Mock
71
从 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。

这两段文字解释了 v0.13 中核心 API 方法的去向。

9
自React v15.4.0起，React不再使用ReactDOM - https://facebook.github.io/react/blog/2016/11/16/react-v15.4.0.html - Rycochet
React不再包含React.PropTypes，proptypes已经有了自己的存储库，名为'prop-types'。 - ncubica
10

简述 创建和使用组件和钩子需要安装React包，react-dom包含react-dom/client和react-dom/server用于在浏览器的DOM中或在服务器上的字符串（或流）中呈现你的应用程序。使用React-Native可以使用React创建Android和iOS原生应用。

This question has been asked almost seven years ago and a lot has changed since then. Most of the answer are no longer correct or contains outdated information. I'll try to give you a complete but simple answer with the most up to date information available.
React 18
In March 2022 React 18 has been released. It has brought some interesting changes in its public APIs.
Packages
react
As stated in React documentation:
React is the entry point to the React library. If you load React from a
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。

这条评论与原问题无关，但是你的回答引入了 require('blah').. 你能解释一下如何在浏览器中运行它吗？因为 require 不是纯 js。 - joedotnot
7
看起来他们已经将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中呈现组件，这就是您刚开始使用它时所需要了解的全部内容。
5
4

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博客的引用，并进行适当的链接。 - MEMark
2

React package包含了组件、状态、属性以及所有的React代码。

React-DOM包是React和DOM之间的粘合剂。通常，你只需要用它来完成一件事情：使用ReactDOM.render()方法将你的应用程序挂载到index.html文件上。

为什么要把它们分开？

React和ReactDOM被拆分成两个库的原因是出现了React Native（一个用于移动开发的React平台）。

2

React package包含组件、状态、属性以及所有React代码的源代码。

React-DOM包作为名称意味着它是React和DOM之间的粘合剂。通常情况下，您只需要使用ReactDOM.render()将应用程序挂载到index.html文件中。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接