React vs ReactDOM？

Question

我有点新的反应。我发现我们必须导入两件事才能开始，React和ReactDOM，任何人都可以解释这些差异。我正在阅读React documentation，但它没有说。

Answer 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的无知表现出来了。让网络和移动通用的React包更像是一种渴望，而不是现实。 React Native目前是一个完全不同的包。]

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

Answer 2

来自React v0.14 Beta release announcement。

  

在我们查看react-native，react-art，react-canvas和react-three等软件包时，很明显React的美丽和本质一无所获与浏览器或DOM有关。

     

为了使这一点更加清晰，并且更容易构建React可以渲染的更多环境，我们将主反应包分成两部分：react和react-dom。

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

  

public static int maxNonOverlappingBridges(String[] bridges) { int overlappings1 = 0; int overlappings2 = 0; int maxIndexOfCityOnOtherSide = 0; /* * Sorting bridge connections with respect to the left index. (i.e : 2 in 2#y4) * O(n*log(n)) time */ Arrays.sort(bridges); List<Integer[]> brigesAsArray = new ArrayList<>(); Integer[] previousBridge = null; for(String b: bridges){ if(previousBridge == null){ String[] bridgeIndexes = b.split("#y"); previousBridge = new Integer[]{Integer.parseInt(bridgeIndexes[0]),Integer.parseInt(bridgeIndexes[1])}; maxIndexOfCityOnOtherSide = previousBridge[1]; brigesAsArray.add(previousBridge); continue; } String[] bridgeIndexes = b.split("#y"); Integer[] currentBridge = new Integer[]{Integer.parseInt(bridgeIndexes[0]),Integer.parseInt(bridgeIndexes[1])}; if(currentBridge[1] < maxIndexOfCityOnOtherSide){ //overlapping found; overlappings1++; }else{ maxIndexOfCityOnOtherSide = currentBridge[1]; } previousBridge = currentBridge; brigesAsArray.add(previousBridge); } Integer[][] bridgeIndexes = brigesAsArray.toArray(new Integer[0][0]); brigesAsArray.toArray(bridgeIndexes); /* * Sorting bridge connections with respect to the right index. (i.e : 4 in 2#y4) * O(n*log(n)) time */ Arrays.sort(bridgeIndexes, new Comparator<Integer[]>() { @Override public int compare(Integer[] o1, Integer[] o2) { return Integer.compare(o1[1], o2[1]); } }); previousBridge = null; for(Integer[] b: bridgeIndexes){ if(previousBridge == null){ maxIndexOfCityOnOtherSide = b[0]; previousBridge = b; continue; } if(b[0] < maxIndexOfCityOnOtherSide){ //overlapping found; overlappings2++; }else{ maxIndexOfCityOnOtherSide = b[0]; } previousBridge = b; brigesAsArray.add(previousBridge); } return (bridges.length - Math.min(overlappings1, overlappings2)); } 包中包含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方法最终的位置。

Answer 3

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

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

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

Answer 5

看起来他们已将React分离为react和react-dom包，因此您不必将DOM相关部分用于您希望在非-DOM特定案例，例如https://github.com/Flipboard/react-canvas 他们导入的地方

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

你可以看到

没有react-dom。

Answer 6

为了更简洁，对组件做出反应，反应用于渲染DOM中的组件。 'react-dom'充当组件和DOM之间的粘合剂。你将使用react-dom的render（）方法来渲染DOM中的组件，这是你开始使用它时所需要知道的。

Answer 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 Native (A react platform for mobile development) React和ReactDOM被分为两个库。

Answer 8

反应：React是一个JavaScript库，旨在构建更好的用户界面。

React-DOM：React-DOM是React的免费库，它将React粘合到浏览器DOM

我们正在使用React，每当我们使用诸如render（）或findDOMNode（）之类的方法时，我们都会使用React-DOM。

当我们查看诸如react-native，react-art，react-canvas和React-3之类的包时，很明显，React的本质和本质与浏览器或DOM无关。 为了更清楚地说明这一点并使其更易于构建React可以渲染的更多环境，他们将主要的react包分为两个：react和react-dom。

Answer 9

react软件包包含组件，状态，道具和所有已反应代码的React源。

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