React vs ReactDOM?


196

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

Answers:


250

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


52

来自React v0.14 Beta发布公告

当我们看到像包react-nativereact-artreact-canvas,和react-three,它很清楚,美和本质作出反应无关,与浏览器或DOM。

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

从根本上说,React的想法与浏览器无关,它们恰好是将组件树呈现到其中的众多目标之一。ReactDOM包允许开发人员从React包中删除所有不必要的代码,并将其移至更合适的存储库中。

所述react包中包含React.createElementReact.createClass并且React.ComponentReact.PropTypesReact.Children,和与元件和组件类的其它辅助函数。我们认为这些是同构的或通用的构建组件所需帮助器。

react-dom软件包包括ReactDOM.renderReactDOM.unmountComponentAtNodeReactDOM.findDOMNode,和react-dom/server我们有服务器端渲染的支持ReactDOMServer.renderToStringReactDOMServer.renderToStaticMarkup

这两段说明了核心API方法从何而来v0.13


6
由于发生反应v15.4.0阵营不再有ReactDOM- facebook.github.io/react/blog/2016/11/16/react-v15.4.0.html
Rycochet

react不再包括React.PropTypes,proptypes有自己的存储库,名为“ prop-types”
ncubica

6

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


4

看起来他们已经将React分为reactreact-dom包,所以您无需在非特定于DOM的情况下使用DOM相关部分的项目,例如此处https:// github.com/Flipboard/react-canvas 导入的地方

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

如你看到的。没有react-dom


3

为了更简洁,react用于组件,而react-dom用于呈现DOM中的组件。“反应域”充当组件和DOM之间的粘合剂。您将使用react-dom的render()方法来渲染DOM中的组件,而这就是您从开始时所要知道的全部。


0

react package持有react source为组件,状态,道具和一切反应的代码。

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

为什么要分开?

reason反应并ReactDOM被分成两个库是由于的到来React Native (A react platform for mobile development)

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.