通过导入和导入+ 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

回答

相关问题