インポートによるレンダリングとReactRender.DOMのインポートとの違い

Question

私はReactのコンポーネントをいくつかの方法でレンダリングできましたが、実際のレンダリングの違いはわかりません：

App.js（サンプルカット）：

import Cartesian from './cartesian' 

    //Somewhere inside the App.js component: 
    <div id="graph"> 
     <Cartesian/> 
    </div> 

Cartesian.js：私は何かのリンケトンを追加した場合

export default class Cartesian extends Component { 
    render() { 
     return <h1> Ex </h1> 
    } 
} 

さて、これは完璧に動作は、しかし、私は、違いについてはよく分かりません彼：

import Cartesian from './cartesian' 

    //Somewhere inside the App.js component: 
    <div id="graph"> 
     <Cartesian/> 
    </div> 
    ReactDOM.render(<Cartesian/>,document.getElementById("graph")); 

あるいはこの：

import Cartesian from './cartesian' 

    //Somewhere inside the App.js component: 
     <div id="graph"> 
     </div> 
    ReactDOM.render(<Cartesian/>,document.getElementById("graph")); 

レンダリングワイズ、これらのいずれかが何らかの違いがあるのでしょうか？私は、APIとこの便利な投稿（React vs ReactDOM?）の両方からReact DOMについていくつか読んだことがあります。しかし、このテーマはレンダリングに関しては私にとってはあまり明確ではありません。

ありがとうございます。

Answer 1

は、私は通常、あなただけのアプリケーションのルートに一度ReactDOM.renderを使用答え:)

を組み立ててみましょう。あなたの最初のアプローチが好ましいものです。それにはいくつかの利点があります。

1. 親コンポーネントへのデカルトコンポーネントへの接続（潜在的に渡す属性）
2. サーバー側レンダリングがReact.renderToStringに頼っているが、私はdocument.getElementByIdを参照すると、正しくサーバー上で動作しないことをかなり確信しています。
3. 2つのアプリケーションを文字列id（グラフ）で接続するコードスタイルから、1つのIDを変更するとエラーが発生しやすくなります。特に、この接続は100％のコードに慣れていない人には期待できません。

複数のReactDom.renderが有効であるという明らかな理由がないと言われていますが、これが機能していても、これは反パターンとみなされます。

Answer 2

アプリケーションのメインエントリポイントとしてReactDOM.renderを見ることができます。与えられたDOMノードの内部に反応コンポーネントをマウントし、反応のライフサイクルを開始します。通常、アプリケーションには多くのエントリポイントがありません。反応の考え方は、実際のDOMから離れて仮想DOMで作業することです。 official docsはこれについてかなり明確です：

反応-DOMパッケージがインクルードがあればモデルに反応 の外で取得するには、あなたのアプリのトップレベルでエスケープハッチとして を使用することができますDOM固有のメソッドを提供します必要がある。あなたのコンポーネントのほとんどは、あなたの実際の質問にについては、このモジュールに

を使用する必要はありませ 必要があります。違いがあります。最初に、ターゲットノード内のすべての子がReactDOM.renderの結果として置換されます。第2の - あなたは2つの別々にマウントされたコンポーネントから問題accessing same contextを見つけるでしょう。より多くの問題があると確信しています。したがって、1つの取り付けポイントで推奨の方法に従ってください。ReactDOM.renderコール。