React vs ReactDOM?

Je suis un peu nouveau pour réagir. Je vois que nous devons importer deux choses pour commencer, Reactet ReactDOM, quelqu'un peut-il expliquer la différence. Je lis la documentation de React , mais cela ne dit pas.

React et ReactDOM n'ont été divisés que récemment en deux bibliothèques différentes. Avant la v0.14, toutes les fonctionnalités de ReactDOM faisaient partie de React. Cela peut être une source de confusion, car toute documentation légèrement datée ne mentionnera pas la distinction React / ReactDOM.

Comme son nom l'indique, ReactDOM est la colle entre React et le DOM. Souvent, vous ne l'utiliserez que pour une seule chose: le montage avec ReactDOM.render(). Une autre fonctionnalité utile de ReactDOM est ReactDOM.findDOMNode()que vous pouvez utiliser pour accéder directement à un élément DOM. (Quelque chose que vous devriez utiliser avec parcimonie dans les applications React, mais cela peut être nécessaire.) Si votre application est "isomorphe", vous l'utiliserez également ReactDOM.renderToString()dans votre code principal.

Pour tout le reste, il y a React. Vous utilisez React pour définir et créer vos éléments, pour les hooks de cycle de vie, etc. c'est-à-dire les tripes d'une application React.

La raison pour laquelle React et ReactDOM ont été divisés en deux bibliothèques était due à l'arrivée de React Native. React contient des fonctionnalités utilisées dans les applications Web et mobiles. La fonctionnalité ReactDOM est utilisée uniquement dans les applications Web. [ MISE À JOUR: À Après de nouvelles recherches, il est clair que mon ignorance de React Native montre. Avoir le package React commun au web et au mobile semble être plus une aspiration qu'une réalité en ce moment. React Native est actuellement un package entièrement différent.]

Voir le billet de blog annonçant la sortie de la v0.14: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html

Extrait de l' annonce de la version bêta de React v0.14 .

Comme nous regardons les paquets comme react-native, react-art, react-canvaset react-three, il est devenu clair que la beauté et l' essence de React n'a rien à voir avec les navigateurs ou les DOM.

Pour rendre cela plus clair et pour faciliter la création de plus d'environnements dans lesquels React peut être rendu, nous divisons le package de réaction principal en deux: react et react-dom.

Fondamentalement, l'idée de React n'a rien à voir avec les navigateurs, ils se trouvent être l'une des nombreuses cibles pour le rendu d'arbres de composants. Le package ReactDOM a permis aux développeurs de supprimer tout code non essentiel du package React et de le déplacer dans un référentiel plus approprié.

Le reactpaquet contient React.createElement, React.createClasset React.Component, React.PropTypes, React.Childrenet les autres aides liées aux éléments et classes de composants. Nous les considérons comme les assistants isomorphes ou universels dont vous avez besoin pour créer des composants.

Le react-dompaquet contient ReactDOM.render, ReactDOM.unmountComponentAtNodeet ReactDOM.findDOMNode, et react-dom/servernous avons rendu côté serveur avec support ReactDOMServer.renderToStringet ReactDOMServer.renderToStaticMarkup.

Ces deux paragraphes expliquent où v0.13se sont retrouvées les principales méthodes de l'API .

Avant la v0.14, ils faisaient partie du fichier ReactJs principal, mais comme dans certains cas, nous n'avons peut-être pas besoin des deux, ils les séparent et cela commence à partir de la version 0.14, de cette façon si nous n'en avons besoin que d'une seule, notre application sera plus petite en raison de en utilisant un seul de ceux-ci:

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

Le package React contient: React.createElement, React.createClass, React.Component, React.PropTypes, React.Children

Le package React-dom contient: ReactDOM.render, ReactDOM.unmountComponentAtNode, ReactDOM.findDOMNode et react-dom / server qui comprend: ReactDOMServer.renderToString et ReactDOMServer.renderToStaticMarkup.

Le module ReactDOM expose des méthodes spécifiques au DOM, tandis que React a les principaux outils destinés à être partagés par React sur différentes plateformes (par exemple React Native).

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

Il semble qu'ils aient séparé React reactet les react-dompackages, vous n'avez donc pas à utiliser la partie liée à DOM pour les projets où vous souhaitez l'utiliser dans des cas non spécifiques à DOM, comme ici https: // github.com/Flipboard/react-canvas où ils importent

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

comme vous pouvez le voir. Sans react-dom.

Pour être plus concis, react est pour les composants et react-dom est pour le rendu des composants dans le DOM. 'react-dom' agit comme une colle entre les composants et DOM. Vous utiliserez la méthode render () du react-dom pour rendre les composants dans le DOM et c'est tout ce que vous devez savoir lorsque vous commencez avec.

Le react packagedétient lereact source composants for, l'état, les accessoires et tout le code qui réagit.

Le react-dompackage comme son nom l'indique est le glue between React and the DOM. Souvent, vous ne l'utiliserez que pour une seule chose:mounting your application to the index.html file with ReactDOM.render() .

Pourquoi les séparer?

Le reasonReact et le ReactDOM ont été divisés en deux bibliothèques en raison de l'arrivée de React Native (A react platform for mobile development).