Reaccionar frente a ReactDOM?


197

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

Respuestas:


251

React y ReactDOM se dividieron recientemente en dos bibliotecas diferentes. Antes de v0.14, toda la funcionalidad de ReactDOM formaba 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 lo 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 puede usar para obtener acceso directo a un elemento DOM. (Algo que debe usar con moderación en las aplicaciones React, pero puede ser necesario). Si su aplicación es "isomórfica", también la usaría ReactDOM.renderToString()en su código de fondo.

Para todo lo demás, está React. Utiliza React para definir y crear sus elementos, para ganchos de ciclo de vida, etc., es decir, las entrañas 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 aplicaciones web y móviles. La funcionalidad ReactDOM se utiliza solo en aplicaciones web. [ ACTUALIZACIÓN: Tras una investigación más profunda, está claro que mi ignorancia de React Native se está mostrando. Tener el paquete React común tanto en la web como en el móvil parece ser más una aspiración que una realidad en este momento. React Native es actualmente un paquete completamente diferente.]

Vea la publicación del blog que anuncia la versión v0.14: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html


53

Del anuncio de lanzamiento de React v0.14 Beta .

Si nos fijamos en paquetes como react-native, react-art, react-canvas, y react-three, ha quedado claro que la belleza y la esencia de Reaccionar no tiene nada que ver con navegadores o el DOM.

Para aclarar esto y facilitar la creación de más entornos en los que React pueda procesar, dividimos el paquete principal de reacción 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 procesar árboles de componentes. El paquete ReactDOM ha permitido a los desarrolladores eliminar cualquier código no esencial del paquete React y moverlo a un repositorio más apropiado.

El reactpaquete contiene React.createElement, React.createClassy React.Component, React.PropTypes, React.Children, y los otros ayudantes relacionados con los elementos y clases de componentes. Pensamos en estos como los ayudantes isomórficos o universales que necesita para construir componentes.

El react-dompaquete contiene ReactDOM.render, ReactDOM.unmountComponentAtNodey ReactDOM.findDOMNode, y en la react-dom/serverque tenemos el apoyo representación del lado del servidor con ReactDOMServer.renderToStringy ReactDOMServer.renderToStaticMarkup.

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


66
A partir de React v15.4.0 React ya no tiene ReactDOM- facebook.github.io/react/blog/2016/11/16/react-v15.4.0.html
Rycochet

reaccionar ya no incluye React.PropTypes, los proptypes tienen su propio repositorio llamado 'prop-types'
ncubica

6

Antes de la v0.14 , formaban parte del archivo principal de ReactJs, pero como en algunos casos es posible que no necesitemos ambos, los separan y comienza a partir de la versión 0.14, de esa manera si solo necesitamos uno de ellos, nuestra aplicación será más pequeña debido a usando solo uno de esos:

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

El paquete React contiene: React.createElement, React.createClass, React.Component, React.PropTypes, React.Children

El paquete React-dom contiene: ReactDOM.render, ReactDOM.unmountComponentAtNode, ReactDOM.findDOMNode y react-dom / server que incluye: ReactDOMServer.renderToString y ReactDOMServer.renderToStaticMarkup.


este comentario no está relacionado con la pregunta original, pero su respuesta introduce require ('blah') ... ¿le gustaría explicar cómo ejecutar esto en un navegador, ya que require no es simple js?
joedotnot


4

Parece que han separado React en reacty react-dompaquetes, por lo que no tiene que usar la parte relacionada con DOM para proyectos donde le gustaría usarla en casos no específicos de 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.


3

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


0

El react packagemantiene el react sourcede componentes, estado, accesorios y todo el código que se reaccionan.

El react-dompaquete como su nombre lo indica es el glue between React and the DOM. A menudo, sólo se va a usar para una sola cosa: mounting your application to the index.html file with ReactDOM.render().

¿Por qué separarlos?

El reasonReact y ReactDOM se dividieron en dos bibliotecas debido a la llegada de React Native (A react platform for mobile development).

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.