React vs ReactDOM?


197

私は反応するのが少し新しいです。私たちは始めるために二つのことをインポートする必要が参照、ReactおよびReactDOM缶誰でも違いを説明し、。私はReactのドキュメントを読んでいますが、何も言っていません。

回答:


250

ReactとReactDOMは最近、2つの異なるライブラリに分割されました。v0.14より前は、すべてのReactDOM機能がReactの一部でした。少し日付の古いドキュメントではReactとReactDOMの違いについて触れられていないため、これは混乱の原因となる可能性があります。

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

それ以外には、Reactがあります。Reactを使用して、ライフサイクルフックなどの要素を定義および作成します。つまり、Reactアプリケーションの根幹です。

ReactとReactDOMが2つのライブラリに分割された理由は、React Nativeの登場によるものです。Reactには、Webおよびモバイルアプリで使用される機能が含まれています。ReactDOM機能はWebアプリでのみ使用されます。[ 更新:さらなる調査の結果、React Nativeに対する私の無知が明らかになっていることは明らかです。ReactパッケージをWebとモバイルの両方に共通にすることは、現在の現実というよりは、願望のようです。React Nativeは現在、まったく別のパッケージです。]

v0.14リリースを発表するブログの投稿を参照してください:https ://facebook.github.io/react/blog/2015/10/07/react-v0.14.html


53

v0.14ベータリリースアナウンスに反応します

我々のようなパッケージを見るとreact-nativereact-artreact-canvas、そしてreact-three、美しさとの本質はブラウザやDOMとは何の関係もない反応することが明らかになっています。

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

基本的に、Reactの概念はブラウザーとは何の関係もありません。コンポーネントのツリーをレンダリングするための多くのターゲットの1つにすぎません。ReactDOMパッケージを使用すると、開発者はReactパッケージから不要なコードを削除して、より適切なリポジトリに移動できます。

reactパッケージには含まれていReact.createElementReact.createClassReact.ComponentReact.PropTypesReact.Children、および要素やコンポーネントクラスに関連する他のヘルパー。私たちはこれらを同型または普遍的と考えますコンポーネントを構築するために必要なヘルパーと見なします。

react-domパッケージには含まれていReactDOM.renderReactDOM.unmountComponentAtNodeReactDOM.findDOMNode、とにreact-dom/server我々とサーバー側のレンダリングをサポートしているReactDOMServer.renderToStringReactDOMServer.renderToStaticMarkup

これらの2つのパラグラフは、コアAPIメソッドがどこからv0.13終わったかを説明しています。


6
以下のようv15.4.0反応しなくなりましたリアクトないReactDOM- facebook.github.io/react/blog/2016/11/16/react-v15.4.0.html
Rycochet

reactはReact.PropTypesを含まなくなりました。proptypesには 'prop-types'という名前の独自のリポジトリがあります
ncubica

6

v0.14より前はメインのReactJsファイルの一部でしたが、両方が必要でない場合があるため、両方を分離し、バージョン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。


このコメントは元の質問とは関係ありませんが、あなたの答えはrequire( 'blah').. requiresを導入しています。
joedotnot



3

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


0

react package保持react source構成要素、状態、小道具およびISが反応することをすべてのコードのために。

react-dom名前が示すようにパッケージがありますglue between React and the DOM。多くの場合、1つのことだけに使用しますmounting your application to the index.html file with ReactDOM.render()

なぜそれらを分離するのですか?

reason反応しReactDOMはの到来によるものであった2つのライブラリーに分けましたReact Native (A react platform for mobile development)

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.