React vs ReactDOM?

Sono un po 'nuovo per reagire. Vedo che per iniziare dobbiamo importare due cose Reacte ReactDOM, qualcuno può spiegare la differenza. Sto leggendo la documentazione di React , ma non lo dice.

React e ReactDOM sono stati divisi solo di recente in due diverse librerie. Prima della versione 0.14, tutte le funzionalità di ReactDOM erano parte di React. Questo può essere fonte di confusione, poiché qualsiasi documentazione leggermente datata non menzionerà la distinzione React / ReactDOM.

Come suggerisce il nome, ReactDOM è la colla tra React e il DOM. Spesso lo userete solo per una sola cosa: montare con ReactDOM.render(). Un'altra utile funzione di ReactDOM è quella ReactDOM.findDOMNode()che puoi usare per ottenere l'accesso diretto a un elemento DOM. (Qualcosa che dovresti usare con parsimonia nelle app React, ma può essere necessario.) Se la tua app è "isomorfa", utilizzeresti anche ReactDOM.renderToString()nel tuo codice back-end.

Per tutto il resto, c'è React. Usa React per definire e creare i tuoi elementi, per ganci del ciclo di vita, ecc. Cioè le viscere di un'applicazione React.

Il motivo per cui React e ReactDOM sono stati divisi in due librerie era dovuto all'arrivo di React Native. React contiene funzionalità utilizzate nelle app Web e mobili. La funzionalità ReactDOM viene utilizzata solo nelle app Web. [ AGGIORNAMENTO: Dopo ulteriori ricerche, è chiaro che sta mostrando la mia ignoranza di React Native. Avere il pacchetto React comune sia al web che al cellulare sembra essere più un'aspirazione che una realtà in questo momento. React Native è attualmente un pacchetto completamente diverso.]

Vedi il post sul blog che annuncia la versione v0.14: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html

Dall'annuncio della versione beta di React v0.14 .

Se guardiamo a pacchetti come react-native, react-art, react-canvas, e react-three, è diventato chiaro che la bellezza e l'essenza di Reagire non ha nulla a che fare con i browser o il DOM.

Per rendere questo più chiaro e per rendere più semplice la creazione di più ambienti in cui React può renderizzare, stiamo dividendo il pacchetto di reazione principale in due: reagire e reagire-dom.

Fondamentalmente, l'idea di React non ha nulla a che fare con i browser, si tratta solo di uno dei tanti obiettivi per il rendering di alberi di componenti. Il pacchetto ReactDOM ha permesso agli sviluppatori di rimuovere qualsiasi codice non essenziale dal pacchetto React e spostarlo in un repository più appropriato.

Il reactpacchetto contiene React.createElement, React.createClasse React.Component, React.PropTypes, React.Children, e gli altri aiutanti relative ad elementi e classi di componenti. Pensiamo a questi come agli aiutanti isomorfi o universali di cui hai bisogno per costruire componenti.

Il react-dompacchetto contiene ReactDOM.render, ReactDOM.unmountComponentAtNodee ReactDOM.findDOMNode, e, in react-dom/serverabbiamo il supporto di rendering lato server con ReactDOMServer.renderToStringe ReactDOMServer.renderToStaticMarkup.

Questi due paragrafi spiegano da dove v0.13finiscono i metodi API principali .

Prima della v0.14 facevano parte del file ReactJs principale, ma poiché in alcuni casi potremmo non aver bisogno di entrambi, li separano e parte dalla versione 0.14, in questo modo se ne abbiamo bisogno solo uno, la nostra app sarà più piccola a causa di usando solo uno di quelli:

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

Il pacchetto React contiene: React.createElement, React.createClass, React.Component, React.PropTypes, React.Children

Il pacchetto React-dom contiene: ReactDOM.render, ReactDOM.unmountComponentAtNode, ReactDOM.findDOMNode e rea-dom / server che include: ReactDOMServer.renderToString e ReactDOMServer.renderToStaticMarkup.

Il modulo ReactDOM espone metodi specifici per DOM, mentre React ha gli strumenti principali che devono essere condivisi da React su piattaforme diverse (ad es. React Native).

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

Sembra che abbiano separato React in reacte react-dompacchetti, quindi non è necessario utilizzare la parte relativa al DOM per progetti in cui si desidera utilizzarla in casi non specifici del DOM, come qui https: // github.com/Flipboard/react-canvas dove importano

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

come potete vedere. Senza react-dom.

Per essere più concisi, reagire è per i componenti e reagire-dom è per il rendering dei componenti nel DOM. 'reagire-dom' funge da collante tra componenti e DOM. Utilizzerai il metodo render () del reagente-dom per renderizzare i componenti nel DOM e questo è tutto ciò che devi sapere quando inizi con esso.

Il react packagecontiene i react sourcecomponenti, lo stato, i puntelli e tutto il codice che reagisce.

Il react-dompacchetto come suggerisce il nome è il glue between React and the DOM. Spesso, si utilizzerà solo per una sola cosa: mounting your application to the index.html file with ReactDOM.render().

Perché separarli?

Il reasonreagiscono e ReactDOM sono stati suddivisi in due librerie è dovuto per l'arrivo di React Native (A react platform for mobile development).