Реакция против ReactDOM?

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

Ответ 1

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

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

Во всем остальном Реакт. Вы используете React для определения и создания ваших элементов, для крючков жизненного цикла и т.д., Т. Е. Кишки приложения React.

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

Смотрите сообщение в блоге, сообщающее о выпуске v0.14: https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html

Ответ 2

Из React v0.14 Объявление о выпуске бета-версии.

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

Чтобы сделать это более понятным и упростить создание дополнительных окружений, которые может оказать React, мы разделяем основной пакет реагирования на два: реагировать и реагировать.

По сути, идея 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.

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

Ответ 3

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

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

Ответ 4

Чтобы быть более кратким, реагируйте на компоненты, а реакция - на рендеринг компонентов в DOM. "response-dom" действует как клей между компонентами и DOM. Вы будете использовать метод render() реагирования для рендеринга компонентов в DOM и все, что вам нужно знать, когда вы начинаете с него.

Ответ 5

До 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 и реакцию/сервер, которые включают в себя: ReactDOMServer.renderToString и ReactDOMServer.renderToStaticMarkup.

Ответ 6

Похоже, что они отделили React в пакеты react и react-dom, поэтому вам не нужно использовать связанную с DOM часть для проектов, в которых вы хотели бы использовать ее в не-DOM-специфических случаи, как здесь https://github.com/Flipboard/react-canvas где они импортируют

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

как вы можете видеть. Без react-dom.