Reagieren gegen ReactDOM?

Ich bin ein bisschen neu zu reagieren. Ich sehe, wir müssen zwei Dinge importieren, um loszulegen, Reactund ReactDOMkann jemand den Unterschied erklären. Ich lese die React-Dokumentation durch , aber es heißt nicht.

React und ReactDOM wurden erst kürzlich in zwei verschiedene Bibliotheken aufgeteilt. Vor Version 0.14 war die gesamte ReactDOM-Funktionalität Teil von React. Dies kann zu Verwirrung führen, da in leicht veralteten Dokumentationen die Unterscheidung zwischen React und ReactDOM nicht erwähnt wird.

Wie der Name schon sagt, ist ReactDOM der Klebstoff zwischen React und dem DOM. Oft verwenden Sie es nur für eine einzige Sache: Montage mit ReactDOM.render(). Eine weitere nützliche Funktion von ReactDOM ist ReactDOM.findDOMNode()die, mit der Sie direkten Zugriff auf ein DOM-Element erhalten. (Etwas, das Sie in React-Apps sparsam verwenden sollten, das jedoch erforderlich sein kann.) Wenn Ihre App "isomorph" ist, würden Sie sie auch ReactDOM.renderToString()in Ihrem Back-End-Code verwenden.

Für alles andere gibt es React. Sie verwenden React, um Ihre Elemente zu definieren und zu erstellen, für Lifecycle-Hooks usw., dh den Mut einer React-Anwendung.

Der Grund, warum React und ReactDOM in zwei Bibliotheken aufgeteilt wurden, war die Ankunft von React Native. React enthält Funktionen, die in Web- und mobilen Apps verwendet werden. Die ReactDOM-Funktionalität wird nur in Web-Apps verwendet. [ UPDATE: Nach weiteren Recherchen ist klar, dass meine Unkenntnis von React Native zeigt. Das React-Paket für Web und Mobile gemeinsam zu haben, scheint derzeit eher ein Anspruch als eine Realität zu sein. React Native ist derzeit ein völlig anderes Paket.]

Siehe den Blog-Beitrag zur Ankündigung der Version v0.14: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html

Aus der Ankündigung der Beta-Version von React v0.14 .

Wie wir bei Pakete aussehen react-native, react-art, react-canvas, und react-three, es ist deutlich geworden , dass die Schönheit und das Wesen nichts Reagieren hat mit Browsern oder dem DOM zu tun.

Um dies klarer zu machen und es einfacher zu machen, mehr Umgebungen zu erstellen, in die React rendern kann, teilen wir das Hauptreaktionspaket in zwei Teile: React und React-Dom.

Grundsätzlich hat die Idee von React nichts mit Browsern zu tun, sie sind einfach eines von vielen Zielen, um Bäume von Komponenten zu rendern. Mit dem ReactDOM-Paket konnten die Entwickler nicht wesentlichen Code aus dem React-Paket entfernen und in ein geeigneteres Repository verschieben.

Das reactPaket enthält React.createElement, React.createClassund React.Component, React.PropTypes, React.Childrenund die andere , um Elemente und Komponenten - Klassen im Zusammenhang Helfer. Wir betrachten diese als isomorphe oder universelle Helfer, die Sie zum Erstellen von Komponenten benötigen.

Das react-domPaket enthält ReactDOM.render, ReactDOM.unmountComponentAtNodeund ReactDOM.findDOMNode, und in react-dom/serverwir serverseitige Rendering - Unterstützung haben mit ReactDOMServer.renderToStringund ReactDOMServer.renderToStaticMarkup.

In diesen beiden Absätzen wird erläutert, woher die wichtigsten API-Methoden stammen v0.13.

Vor v0.14 waren sie Teil der Hauptdatei von ReactJs, aber da wir in einigen Fällen möglicherweise nicht beide benötigen, trennen sie sie und es beginnt mit Version 0.14. Wenn wir nur eine davon benötigen, wird unsere App aufgrund von kleiner mit nur einem von denen:

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);

Das React- Paket enthält: React.createElement, React.createClass, React.Component, React.PropTypes, React.Children

Das React-Dom- Paket enthält: ReactDOM.render, ReactDOM.unmountComponentAtNode, ReactDOM.findDOMNode und React-Dom / Server, einschließlich ReactDOMServer.renderToString und ReactDOMServer.renderToStaticMarkup.

Das ReactDOM-Modul stellt DOM-spezifische Methoden bereit, während React über die Kernwerkzeuge verfügt, die von React auf verschiedenen Plattformen (z. B. React Native) gemeinsam genutzt werden sollen.

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

Es sieht so aus, als hätten sie React in reactund react-domPakete getrennt, sodass Sie den DOM-bezogenen Teil nicht für Projekte verwenden müssen, in denen Sie ihn in nicht DOM-spezifischen Fällen verwenden möchten , wie hier https: // github.com/Flipboard/react-canvas, wo sie importieren

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

Wie du siehst. Ohne react-dom.

Um es genauer zu machen: Reagieren ist für die Komponenten und React-Dom dient zum Rendern der Komponenten im DOM. 'React-Dom' fungiert als Klebstoff zwischen Komponenten und DOM. Sie verwenden die render () -Methode des React-Dom, um Komponenten im DOM zu rendern, und das ist alles, was Sie wissen müssen, wenn Sie damit beginnen.

Das react packageenthält die react sourcefor-Komponenten, den Status, die Requisiten und den gesamten Code, der reagiert.

Das react-domPaket ist, wie der Name schon sagt, das glue between React and the DOM. Oft werden Sie es nur für eine einzige Sache verwenden : mounting your application to the index.html file with ReactDOM.render().

Warum sie trennen?

Das reasonReact und das ReactDOM wurden aufgrund der Ankunft von in zwei Bibliotheken aufgeteilt React Native (A react platform for mobile development).