React vs ReactDOM?

Jestem trochę nowy, aby zareagować. Widzę, że musimy zaimportować dwie rzeczy, aby zacząć, Reacti ReactDOMczy ktoś może wyjaśnić różnicę. Czytam dokumentację React , ale to nie mówi.

React i ReactDOM dopiero niedawno zostały podzielone na dwie różne biblioteki. Przed wersją 14.14 cała funkcjonalność ReactDOM była częścią React. Może to być źródłem nieporozumień, ponieważ żadna nieco przestarzała dokumentacja nie wspomina o rozróżnieniu React / ReactDOM.

Jak sama nazwa wskazuje, ReactDOM jest klejem między React a DOM. Często używasz go tylko do jednego: montażu z ReactDOM.render(). Inną przydatną funkcją ReactDOM jest to, za pomocą ReactDOM.findDOMNode()którego można uzyskać bezpośredni dostęp do elementu DOM. (Coś, czego powinieneś używać oszczędnie w aplikacjach React, ale może to być konieczne.) Jeśli twoja aplikacja jest „izomorficzna”, możesz również użyć jej ReactDOM.renderToString()w kodzie zaplecza.

Na wszystko inne jest React. Używasz React do definiowania i tworzenia swoich elementów, dla haków cyklu życia itp., Tj. Wnętrzności aplikacji React.

Powodem, dla którego React i ReactDOM zostały podzielone na dwie biblioteki, było pojawienie się React Native. React zawiera funkcje wykorzystywane w aplikacjach internetowych i mobilnych. Funkcjonalność ReactDOM jest wykorzystywana tylko w aplikacjach internetowych. [ AKTUALIZACJA: Po dalszych badaniach jasne jest, że moja ignorancja na temat React Native pokazuje. Posiadanie pakietu React wspólnego zarówno dla Internetu, jak i dla urządzeń przenośnych wydaje się teraz bardziej aspiracją niż rzeczywistością. React Native to obecnie zupełnie inny pakiet.]

Zobacz post na blogu informujący o wydaniu v0.14: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html

Od ogłoszenia wersji beta React v0.14 .

Gdy patrzymy na opakowaniach takich jak react-native, react-art, react-canvas, i react-three, to stało się jasne, że piękno i istotę React ma nic wspólnego z przeglądarek lub DOM.

Aby to wyjaśnić i ułatwić budowanie większej liczby środowisk, w których React może renderować, dzielimy główny pakiet reagowania na dwa: reaguj i reaguj.

Zasadniczo pomysł React nie ma nic wspólnego z przeglądarkami, są one po prostu jednym z wielu celów renderowania drzew komponentów. Pakiet ReactDOM umożliwił programistom usunięcie niepotrzebnego kodu z pakietu React i przeniesienie go do bardziej odpowiedniego repozytorium.

reactOpakowanie zawiera React.createElement, React.createClassi React.Component, React.PropTypes, React.Children, i inne elementy związane z pomocników i klas składowych. Myślimy o nich jako o izomorficznych lub uniwersalnych pomocnikach potrzebnych do budowy komponentów.

react-domOpakowanie zawiera ReactDOM.render, ReactDOM.unmountComponentAtNodei ReactDOM.findDOMNode, i react-dom/servermamy po stronie serwera wsparcie renderingu ReactDOMServer.renderToStringi ReactDOMServer.renderToStaticMarkup.

Te dwa akapity wyjaśniają, gdzie v0.13skończyły się podstawowe metody API .

Przed wersją v0.14 były częścią głównego pliku ReactJs, ale ponieważ w niektórych przypadkach możemy nie potrzebować obu, rozdzielają je i zaczyna się od wersji 0.14, w ten sposób, jeśli potrzebujemy tylko jednego z nich, nasza aplikacja będzie mniejsza z powodu używając tylko jednego z tych:

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

Pakiet React zawiera: React.createElement, React.createClass, React.Component, React.PropTypes, React.Children

Pakiet React-dom zawiera: ReactDOM.render, ReactDOM.unmountComponentAtNode, ReactDOM.findDOMNode oraz React-dom / server, w tym: ReactDOMServer.renderToString i ReactDOMServer.renderToStaticMarkup.

Moduł ReactDOM ujawnia metody specyficzne dla DOM, podczas gdy React ma podstawowe narzędzia przeznaczone do udostępniania przez React na różnych platformach (np. React Native).

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

Wygląda na to, że rozdzielili React na reacti react-dompakiety, więc nie musisz używać części związanej z DOM w projektach, w których chcesz użyć jej w przypadkach, które nie są specyficzne dla DOM, jak tutaj https: // github.com/Flipboard/react-canvas gdzie importują

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

jak widzisz. Bez react-dom.

Aby być bardziej zwięzłym, zareaguj na komponenty, a reakt-dom służy do renderowania komponentów w DOM. „reag-dom” działa jak klej między komponentami a DOM. Do renderowania komponentów w DOM będziesz używał metody render () z reag-dom i to wszystko, co musisz wiedzieć, kiedy zaczynasz z nią.

react packageTrzyma react sourceskładników, stanu, rekwizytów i cały kod, który jest reagować.

react-domPakiet jak sama nazwa wskazuje jest glue between React and the DOM. Często można go używać tylko do jednej rzeczy: mounting your application to the index.html file with ReactDOM.render().

Po co je rozdzielać?

reasonReact i ReactDOM zostały podzielone na dwie biblioteki było spowodowane przybyciem React Native (A react platform for mobile development).