¿React vs ReactDOM?


Soy un poco nuevo para reaccionar. Veo que tenemos que importar dos cosas para empezar, React y ReactDOM, puede alguien explicar la diferencia. Estoy leyendo la documentación de React , pero no dice.

 135
Author: Chris Martin, 2015-12-06

6 answers

React y ReactDOM se dividieron recientemente en dos bibliotecas diferentes. Antes de la v0. 14, toda la funcionalidad de ReactDOM era parte de React. Esto puede ser una fuente de confusión, ya que cualquier documentación ligeramente fechada no mencionará la distinción React / ReactDOM.

Como su nombre indica, ReactDOM es el pegamento entre React y el DOM. A menudo, solo lo usará para una sola cosa: montar con ReactDOM.render(). Otra característica útil de ReactDOM es ReactDOM.findDOMNode() que se puede utilizar para obtener directa acceso a un elemento DOM. (Algo que debe usar con moderación en las aplicaciones de React, pero puede ser necesario.) Si tu app es "isomorfa", también usarás ReactDOM.renderToString() en tu código de back-end.

Para todo lo demás, está React. Utilizas React para definir y crear tus elementos, para hooks de ciclo de vida, etc. es decir, las tripas de una aplicación React.

La razón por la que React y ReactDOM se dividieron en dos bibliotecas se debió a la llegada de React Native. React contiene la funcionalidad utilizada en la web y aplicaciones móviles. La funcionalidad de ReactDOM se utiliza solo en aplicaciones web. [ACTUALIZACIÓN: Tras más investigación, está claro que mi ignorancia de React Native está mostrando. Tener el paquete React común tanto a la web como a los dispositivos móviles parece ser más una aspiración que una realidad en este momento. React Native es actualmente un paquete completamente diferente.]

Ver la entrada del blog anunciando la versión v0.14: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html

 192
Author: David L. Walsh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-01-07 01:09:15

Del anuncio de la versión beta de React v0.14.

Como vemos en paquetes como react-native, react-art, react-canvas, y react-three, claro que la belleza y la esencia de Reaccionar no tiene nada que ver con los navegadores o el DOM.

Para que esto sea más claro y para que sea más fácil construir más entornos a los que React puede renderizar, estamos dividiendo el paquete principal de react en dos: react y react-dom.

Fundamentalmente, la idea de React no tiene nada que ver con los navegadores, simplemente resultan ser uno de los muchos objetivos para renderizar árboles de componentes. El paquete ReactDOM ha permitido a los desarrolladores eliminar código no esencial del paquete React y moverlo a un repositorio más apropiado.

El paquete react contiene React.createElement, React.createClass y React.Component, React.PropTypes, React.Children, y los otros ayudantes relacionados con elementos y clases de componentes. Pensamos en estos son los ayudantes isomorfos o universales que necesita para construir componentes.

El paquete react-dom contiene ReactDOM.render, ReactDOM.unmountComponentAtNode, y ReactDOM.findDOMNode, y en react-dom/server tenemos soporte de renderizado del lado del servidor con ReactDOMServer.renderToString y ReactDOMServer.renderToStaticMarkup.

Estos dos párrafos explican dónde terminaron los métodos API principales de v0.13.

 42
Author: Dan Prince,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-06 08:11:57

El módulo ReactDOM expone métodos específicos del DOM, mientras que React tiene las herramientas principales destinadas a ser compartidas por React en diferentes plataformas (por ejemplo, React Native).

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

 4
Author: dan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-10 12:07:33

Para ser más conciso, react es para los componentes y react-dom es para renderizar los componentes en el DOM. 'react-dom' actúa como un pegamento entre los componentes y DOM. Usarás el método render () del react-dom para renderizar componentes en el DOM y eso es todo lo que tienes que saber cuando empieces con él.

 3
Author: Arvind,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-10 08:24:31

Antes de v0. 14 eran parte del archivo principal ReactJS, pero como en algunos casos puede que no necesitemos ambos, los separan y comienza desde la versión 0.14, de esa manera si solo necesitamos uno de ellos, nuestra aplicación va a ser más pequeña debido a usar solo uno de ellos:

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 el paquete contiene: React.createElement, Reaccionar.createClass, React.Componente, React.PropTypes, Reaccionen.Niños

React-dom el paquete contiene: ReactDOM.render, ReactDOM.No hay componente en el modo, reino de reacción.findDOMNode, y react-dom / server que incluye: ReactDOMServer.renderToString y ReactDOMServer.renderToStaticMarkup.

 3
Author: Alireza,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-18 11:58:12

Parece que han separado React en paquetes react y react-dom, por lo que no tiene que usar la parte relacionada con el DOM para proyectos donde le gustaría usarla en casos no específicos del DOM, como aquí https://github.com/Flipboard/react-canvas donde importan

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

Como puedes ver. Sin react-dom.

 2
Author: Íhor Mé,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-25 23:22:32