通過導入和導入+ ReactRender.DOM呈現之間的區別 - React

我已經能夠以幾種不同的方式呈現React中的組件，但是，我不確定這樣呈現之間的實際區別是什麼：通過導入和導入+ ReactRender.DOM呈現之間的區別 - 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的內容。然而，在渲染方面，這個主題對我來說並不是很清楚。

在此先感謝。

來源

2017-09-06 Nícolas Vieira

讓我試圖組裝一個答案:)

通常只需要在你的應用程序的根使用ReactDOM.render一次。你的第一種方法是首選。它有幾個好處。

笛卡爾組件連接到母部件（可能通過屬性）
Serverside集團的渲染是依靠React.renderToString，我敢肯定，引用document.getElementById不會在服務器上正常工作。
從代碼風格連接你的應用程序與字符串id（圖形）的兩個部分是錯誤傾向改變一個id時它會打破，特別是因爲這個連接不會被100％熟悉編碼的人所期望的。

雖然說沒有明顯的理由爲什麼多個ReactDom.render會是有益的，即使這可能工作，我會認爲這是一個反模式。

來源

2017-09-06 09:12:04 AirBorne04

您可以查看ReactDOM.render作爲您的應用程序的主要入口點。它在給定的DOM節點內安裝反應組件，並開始反應生命週期。通常，您的應用程序中不會有很多入口點。反應的想法是遠離實際的DOM並改用虛擬DOM。該official docs是很清楚這一點：

的反應-DOM包提供了可以在您的應用程序的頂層，作爲逃生艙口得到的外的陣營模式，如果使用特定於DOM的方法你需要。大部分組件不應該需要使用此模塊

關於您的實際問題。會有分歧。首先，由於ReactDOM.render，目標節點中的所有孩子都將被替換。其次 - 您會發現來自兩個單獨安裝的組件的問題accessing same context。我相信會有更多的問題 - 因此請按照推薦的方法進行，只需一個掛載點，撥打ReactDOM.render即可。

來源

2017-09-06 09:08:10 Amid

通過導入和導入+ ReactRender.DOM呈現之間的區別 - React

回答

相關問題