私は反応するのが少し新しいです。私たちは始めるために二つのことをインポートする必要が参照、React
およびReactDOM
缶誰でも違いを説明し、。私はReactのドキュメントを読んでいますが、何も言っていません。
私は反応するのが少し新しいです。私たちは始めるために二つのことをインポートする必要が参照、React
およびReactDOM
缶誰でも違いを説明し、。私はReactのドキュメントを読んでいますが、何も言っていません。
回答:
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
我々のようなパッケージを見ると
react-native
、react-art
、react-canvas
、そしてreact-three
、美しさとの本質はブラウザやDOMとは何の関係もない反応することが明らかになっています。これをより明確にし、Reactがレンダリングできる環境をより簡単に構築できるようにするために、メインのreactパッケージを2つに分割します。reactとreact-domです。
基本的に、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つのパラグラフは、コアAPIメソッドがどこからv0.13
終わったかを説明しています。
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。
ReactDOMモジュールはDOM固有のメソッドを公開しますが、Reactには、さまざまなプラットフォーム(React Nativeなど)でReactが共有することを目的としたコアツールがあります。
React react
とreact-dom
パッケージが分離されているようです。したがって、ここhttps:// github.com/Flipboard/react-canvas(
インポートする場所)
var React = require('react');
var ReactCanvas = require('react-canvas');
ご覧のように。なしreact-dom
。
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)
。
ReactDOM
- facebook.github.io/react/blog/2016/11/16/react-v15.4.0.html