Answers:
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
当我们看到像包
react-native
,react-art
,react-canvas
,和react-three
,它很清楚,美和本质作出反应无关,与浏览器或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
。
在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。
ReactDOM模块公开了特定于DOM的方法,而React具有旨在由React在不同平台(例如React Native)上共享的核心工具。
看起来他们已经将React分为react
和react-dom
包,所以您无需在非特定于DOM的情况下使用DOM相关部分的项目,例如此处https:// github.com/Flipboard/react-canvas
导入的地方
var React = require('react');
var ReactCanvas = require('react-canvas');
如你看到的。没有react-dom
。
该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)
。
ReactDOM
- facebook.github.io/react/blog/2016/11/16/react-v15.4.0.html