通过导入和导入渲染的区别 + ReactRender.DOM - React答案

【问题标题】：Difference between Rendering by importing and Importing + ReactRender.DOM - React通过导入和导入渲染的区别 + ReactRender.DOM - React
【发布时间】：2018-02-14 15:45:47
【问题描述】：

我已经能够在 React 中以几种不同的方式渲染组件，但是，我不确定像这样渲染之间的实际区别是什么：

App.js（示例剪辑）：

    import Cartesian from './cartesian'

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

笛卡尔.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 的信息。但是，在渲染方面，这个主题对我来说不是很清楚。

提前致谢。

【问题讨论】：

标签： javascript reactjs ecmascript-6

【解决方案1】：

让我试着收集一个答案:)

通常您只在应用程序的根目录中使用一次ReactDOM.render。您的第一种方法是首选方法。它有几个优点。

笛卡尔组件到父组件的连接（可能传递属性）
服务器端渲染依赖于React.renderToString，我很确定引用document.getElementById 将无法在服务器上正常工作。
从代码风格来看，使用字符串 id（图形）连接应用程序的两个部分很容易出错，当更改一个 id 时它会中断，特别是因为不是 100% 熟悉编码的人不会期望这种连接。

虽然没有明显的理由说明多个ReactDom.render 会带来什么好处，尽管这可能会起作用，但我会认为这是一种反模式。

【讨论】：

【解决方案2】：

您可以将ReactDOM.render 作为应用程序的主要入口点。它在给定的 DOM 节点内挂载 react 组件并启动 react 生命周期。通常，您的应用程序中不会有很多入口点。 React 的想法是远离实际的 DOM，而使用虚拟 DOM。 official docs 对此非常清楚：

react-dom 包提供了可以使用的特定于 DOM 的方法在您的应用程序的顶层，并作为逃生舱口离开如果需要，可以使用 React 模型。您的大多数组件不应该需要用到这个模块

关于您的实际问题。会有差异。首先，目标节点中的所有子节点将被替换为ReactDOM.render 的结果。第二 - 你会发现问题accessing same context 来自两个单独安装的组件。我相信会有更多问题 - 因此请遵循推荐的方法，使用单个 ReactDOM.render 调用的一个安装点。

【讨论】：