DOMでReact.render（）を複数回使用しても問題ありませんか？

107

Reactを使用して、DOM全体に複数回コンポーネントを追加したいと思います。このフィドルは私が何をしようとしているのかを示しており、エラーをスローしません。これがコードです：

HTML：

<div id="container">
    <!-- This element's contents will be replaced with the first component. -->
</div>

<div id="second-container">
    <!-- This element's contents will be replaced with the second component. -->
</div>

JS：

var Hello = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));

React.render(<Hello name="Second World" />, document.getElementById('second-container'));

私はこの質問を見たことがありますが、上記を実行すると、Reactコンポーネントが互いに干渉する危険性があります。その質問への答えは、私がDjangoサーバーサイドを使用しているので、私にとってオプションではないサーバーサイドレンダリングを使用することを示唆しています。

一方、Reactライブラリのインスタンスを1つしかマウントしていないので、複数のコンポーネントがReactの独自のインスタンスを呼び出すのではなく、私がやっていることは大丈夫ですか？

複数のDOMインスタンスを使用するこの方法は、Reactを使用するためのOK方法ですか？

reactjs

— YPCrumble
ソース

回答:

120

はい、React.render同じページで複数回呼び出すのはまったく問題ありません。あなたが示唆したように、Reactライブラリ自体は一度だけロードされますが、を呼び出すたびReact.renderに、他のインスタンスから独立した新しいコンポーネントインスタンスが作成されます。（実際、このような状況は、Reactへの移行中のサイトでは珍しくReact.renderありません。この場合、ページの一部が使用され、他の一部は使用されません。）

— ホッパー
ソース

すばらしい-既存のDjangoアプリを「スーパーチャージ」するのにも非常に役立ちます。レンダリングされたコンテンツにDjangoを使用してSEOを取得し、DOM要素とのユーザー操作にReactを使用したいと思います。これにより、非常に簡単に実現できます。

— YPCrumble 2015

また、shouldComponentUpdateも確認できます。将来的にはパフォーマンスが向上する可能性があります（おそらくあなたの場合はそうではありません）。これがリファレンスです：facebook.github.io/react/docs/component-specs.html

— Jim

@YPCrumbleホッパーの答えが正しい場合はマークしてください

— Dana Woodman

また、開いているページに応じてReactDOM.render()、コンポーネントを同じに挿入する必要があるものが複数あるdiv場合はどうでしょうか。特に、すべてのページapp.jsに1つのみの醜い連結資産があります<script src="app.js">。そして、それは、例えばjQuery、Bootstrap、Reactなどのライブラリをロードし、カスタムJSコードとReactコンポーネントを持ちます。あなたが訪問した場合/foo、あなたは持っていReactDOM.render(<Foo />, getElemById('content'))ます。/bar', you have ReactDOM.render（<Bar />、getElemById（ 'content'）） `にアクセスした場合。彼らは干渉します。これをどのように管理しますか？

— Green

@Greenコンポーネントが別のページにある場合、どのように干渉するのでしょうか。それ以外の場合は、各コンポーネントに新しいコンテナ要素を追加してください。例：ReactDOM.render(<Foo/>, document.getElementById('content').appendChild(document.createElement('div')))

— hopper

この方法はページ読み込みのパフォーマンスの観点からは問題ありませんが、他にも欠点があり、可能であれば複数のReactルートを回避する必要があります。

異なるReactルートはコンテキストを共有できません。Reactルート間で通信する必要がある場合は、グローバルDOMイベントにフォールバックする必要があります
タイムスライシング（サスペンスおよび非同期レンダリング）などのパフォーマンス最適化のメリットは少なくなります。Reactルートの境界を越えて中断することはできません

より高度な-https ://github.com/facebook/react/issues/12700

— ヤンシュン・テイ
ソース