Реагувати проти ReactDOM?

Я трохи новий, щоб реагувати. Я бачу, що нам потрібно імпортувати дві речі, щоб почати роботу, Reactі чи ReactDOMможе хтось пояснити різницю. Я читаю документацію React , але вона не говорить.

React і ReactDOM були нещодавно розділені на дві різні бібліотеки. До випуску v0.14, усі функціональні можливості ReactDOM були частиною React. Це може бути джерелом плутанини, оскільки будь-яка злегка датована документація не буде згадувати відмінність React / ReactDOM.

Як випливає з назви, ReactDOM - це клей між React та DOM. Часто ви будете використовувати його лише для однієї речі: монтажу з ReactDOM.render(). Ще одна корисна особливість ReactDOM - це те, за допомогою ReactDOM.findDOMNode()якого ви можете отримати прямий доступ до елемента DOM. (Щось, що ви повинні економно використовувати в програмах React, але це може знадобитися.) Якщо ваш додаток "ізоморфний", ви також використовуєте його ReactDOM.renderToString()в коді.

Для всього іншого є React. Ви використовуєте React для визначення та створення своїх елементів, для гачків життєвого циклу тощо, тобто кишок програми React.

Причина React та ReactDOM була розділена на дві бібліотеки через прихід React Native. React містить функціональні можливості, які використовуються в Інтернеті та мобільних додатках. Функціональність ReactDOM використовується лише у веб-додатках. [ ОНОВЛЕННЯ: Після подальших досліджень зрозуміло, що виявляється моє незнання Реактивної Рідної. Наявність пакету React, загального для Інтернету та мобільного, зараз здається швидше прагненням, ніж реальністю. На даний момент React Native - це зовсім інший пакет.]

Дивіться публікацію в блозі, що оголошує випуск v0.14: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html

Від Реагувати V0.14 оголошення бета - реліз .

Коли ми дивимося на пакети , такі як react-native, react-art, react-canvas, і react-three, стало ясно , що краса і суть Реагувати не має нічого спільного з браузерами або DOM.

Щоб зробити це більш зрозумілим і полегшити створення більшої кількості середовищ, до яких може реагувати React, ми розділимо основний пакет реакцій на два: react and react-dom.

По суті, ідея React не має нічого спільного з браузерами, вони просто стають однією з багатьох цілей для перетворення дерев компонентів. Пакет ReactDOM дозволив розробникам видалити будь-який несуттєвий код із пакета React та перемістити його у більш відповідне сховище.

reactПакет містить React.createElement, React.createClassі React.Component, React.PropTypes, React.Children, та інші помічники , пов'язані з елементами і класів компонентів. Ми вважаємо це ізоморфними або універсальними помічниками, які потрібні для створення компонентів.

react-domПакет містить ReactDOM.render, ReactDOM.unmountComponentAtNodeі ReactDOM.findDOMNode, і в react-dom/serverнас є підтримка на стороні сервера візуалізації з ReactDOMServer.renderToStringі ReactDOMServer.renderToStaticMarkup.

Ці два абзаци пояснюють, з чого v0.13закінчилися основні методи API .

До v0.14 вони були частиною головного файлу ReactJs, але оскільки в деяких випадках нам може не знадобитися і те, і інше, вони відокремлюються, і він починається з версії 0.14, тому, якщо нам потрібен лише один, наш додаток буде меншим через використовуючи лише один із них:

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 містить: React.createElement, React.createClass, React.Component, React.PropTypes, React.Children

Пакет React-dom містить: ReactDOM.render, ReactDOM.unmountComponentAtNode, ReactDOM.findDOMNode та react-dom / сервер, що включає: ReactDOMServer.renderToString та ReactDOMServer.renderToStaticMarkup.

Модуль ReactDOM розкриває специфічні для DOM методи, тоді як React має основні інструменти, призначені для спільного використання React на різних платформах (наприклад, React Native).

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

Схоже, вони розділили React на reactта react-domпакети, тому вам не доведеться використовувати частину, пов’язану з DOM, для проектів, де ви хочете використовувати її у випадках, що не стосуються DOM, як, наприклад, тут https: // github.com/Flipboard/react-canvas, де вони імпортують

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

як ви можете бачити. Без react-dom.

Щоб бути більш стислим, react - це для компонентів, а rea-dom - для надання компонентів у DOM. 'react-dom' діє як клей між компонентами та DOM. Ви будете використовувати метод render () react-dom для візуалізації компонентів у DOM, і це все, що вам потрібно знати, коли ви починаєте з нього.

react packageтримаєreact source для компонентів, стану, реквізит і весь код , тобто реагувати.

react-domПакет , як випливає з назви є glue between React and the DOM. Часто ви будете використовувати його лише для однієї речі:mounting your application to the index.html file with ReactDOM.render() .

Навіщо їх розділяти?

reasonReact і ReactDOM були розділені на дві бібліотеки було пов'язано з приходом React Native (A react platform for mobile development).