web-dev-qa-db-ja.com

React対ReactDOM？

私は少し反応があります。はじめにReactとReactDOMの2つをインポートする必要があると思いますが、違いは誰でも説明できます。私は React documentation を通して読んでいますが、それは言っていません。

reactjsreact-dom
163
Noitidart

ReactとReactDOMはつい最近、2つの異なるライブラリに分割されました。 v0.14より前のすべてのReactDOM機能はReactの一部でした。少し時代遅れのドキュメントはReact/ReactDOMの区別について言及していないので、これは混乱の元になるかもしれません。

その名前が示すように、ReactDOMはReactとDOMの間の接着剤です。多くの場合、あなたはそれを一つのことだけに使うでしょう：ReactDOM.render()でマウントする。 ReactDOMのもう1つの便利な機能はReactDOM.findDOMNode()であり、これを使ってDOM要素に直接アクセスすることができます。 （Reactアプリでは控えめに使うべきものですが、必要な場合もあります。）アプリが「同型」である場合は、バックエンドコードでもReactDOM.renderToString()を使用します。

他には、Reactがあります。ライフサイクルフックなど、Reactアプリケーションの内臓など、要素を定義および作成するためにReactを使用します。

ReactとReactDOMが2つのライブラリに分割された理由は、React Nativeの登場によるものです。 ReactにはWebおよびモバイルアプリで利用されている機能が含まれています。 ReactDOM機能はWebアプリでのみ利用されます。 [UPDATE：今後の調査で、React Nativeに対する私の無知が明らかになっていることは明らかです。 ReactパッケージをWebとモバイルの両方に共通にすることは、現時点では現実よりもむしろ願望のように思えます。 React Nativeは現在のところまったく異なるパッケージです。]

V0.14リリースを発表したブログ記事を参照してください。 https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html

216
David L. Walsh

React v0.14 Betaリリースのお知らせ より。

react-native 、 react-art 、 react-canvas 、（ react-three 、Reactの美しさと本質はブラウザやDOMとは無関係であることが明らかになりました。

これをより明確にし、Reactがレンダリングできる環境をより簡単に構築できるようにするために、メインのreactパッケージをreactとreact-domの2つに分割します。

基本的に、Reactの概念はブラウザとは関係がなく、コンポーネントのツリーをレンダリングするためのターゲットの1つにすぎません。 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を使用してサーバー側のレンダリングをサポートしています。

これら2つの段落は、v0.13のコアAPIメソッドがどこで終わるのかを説明します。

46
Dan Prince

ReactDOMモジュールはDOM固有のメソッドを公開していますが、Reactは異なるプラットフォーム上でReactによって共有されることを意図したコアツールを持っています（例えばReact Native）。

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

5
Daniel

v0.14以前はメインのReactJファイルの一部でしたが、場合によっては両方とも必要ない場合もありますが、これらは分離されていて、片方だけが必要な場合はバージョン0.14から始まります。私たちのアプリは、それらのうちの1つだけを使用するために小さくなるでしょう：

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/server ReactDOMServer.renderToStringとReactDOMServer.renderToStaticMarkupを含みます。

4
Alireza

Reactをreactパッケージとreact-domパッケージに分けているように見えます。そのため、ここでのように、DOM固有ではないケースで使用する場合は、DOM関連部分を使用する必要はありません - https://github.com/Flipboard/react-canvas インポート先

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

ご覧のように。 react-domがない場合.

4
Íhor Mé

より簡潔に言うと、reactはコンポーネント用で、react-domはDOM内のコンポーネントをレンダリングするためのものです。 'react-dom'はコンポーネントとDOMの間の接着剤として機能します。 DOM内のコンポーネントをレンダリングするためにreact-domのrender（）メソッドを使用することになります。それを始めるときに知っておくべきことはそれだけです。

3
Arvind