web-dev-qa-db-fra.com

React vs ReactDOM?

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

reactjsreact-dom
172
Noitidart

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 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: monter 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 devez également utiliser ReactDOM.renderToString() dans votre code de back-end.

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.-à-d. Les entrailles d'une application React.

La raison pour laquelle React et ReactDOM ont été scindé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. [ UPDATE: Après d'autres recherches, il est clair que mon ignorance de React Native est visible. Avoir le paquet React commun au Web et au mobile semble être plus une aspiration qu'une réalité à l'heure actuelle. React Native est actuellement un package totalement différent.]

Voir l'article de blog annonçant la publication de la version v0.14: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html

228
David L. Walsh

À partir de annonce de la version bêta de React v0.14 .

Lorsque nous examinons des packages tels que react-native , react-art , react-canvas , et react-three , il est devenu évident que la beauté et l'essence de React n'ont rien à voir avec les navigateurs ou le DOM.

Pour que cela soit plus clair et qu'il soit plus facile de créer plus d'environnements que React peut rendre, nous divisons le paquet principal de réactions en deux: réagir et réagir.

Fondamentalement, l’idée de React n’a rien à voir avec les navigateurs, c’est justement l’une des nombreuses cibles permettant de restituer des arborescences de composants. Le package ReactDOM a permis aux développeurs de supprimer l’ajout de code non essentiel du package React et de le déplacer dans un référentiel plus approprié.

Le package react contient _React.createElement_, _React.createClass_ et _React.Component_, _React.PropTypes_, _React.Children_ et les autres aides relatives aux éléments et aux classes de composants. Nous les considérons comme les aides isomorphes ou universelles dont vous avez besoin pour construire des composants.

Le package _react-dom_ contient _ReactDOM.render_, _ReactDOM.unmountComponentAtNode_ et _ReactDOM.findDOMNode_ et _react-dom/server_, nous avons un support de rendu côté serveur avec _ReactDOMServer.renderToString_ et _ReactDOMServer.renderToStaticMarkup_.

Ces deux paragraphes expliquent où se sont retrouvées les principales méthodes API de _v0.13_.

47
Dan Prince

Avant v0.14 ils faisaient partie du fichier principal de ReactJs, 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. Ainsi, si nous n’avons besoin que d’un seul fichier, notre application va être plus petite en raison de l'utilisation d'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);

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

React-dom Le package contient les éléments suivants: ReactDOM.render, ReactDOM.unmountComponentAtNode, ReactDOM.findDOMNode et react-dom/server y compris: ReactDOMServer.renderToString et ReactDOMServer.renderToStaticMarkup.

6
Alireza

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

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

5
Daniel

On dirait qu'ils ont séparé React en react et react-dom, de sorte que vous n'avez pas à utiliser la partie liée au DOM pour les projets pour lesquels vous souhaitez utiliser dans des cas non spécifiques au 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.

4
Íhor Mé

Pour être plus concis, réagit pour les composants et react-dom pour restituer les composants dans le DOM. 'react-dom' agit comme un liant entre les composants et DOM. Vous utiliserez la méthode render () de react-dom pour rendre les composants dans le DOM et c’est tout ce que vous devez savoir pour commencer.

3
Arvind