Question

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

App.js（样本剪切）：

var Tag = sequelize.define('Tag', {
        id: {
            type: DataTypes.INTEGER(11),
            allowNull: false,
            primaryKey: true,
            autoIncrement: true
        },
        user_id: {
            type: DataTypes.INTEGER(11),
            allowNull: false,
            unique: 'uniqueTag',
        },
        count: {
            type: DataTypes.INTEGER(11),
            allowNull: true,
            unique: 'uniqueTag',
        },
        name: {
            type: DataTypes.STRING,
            allowNull: true,
            unique: 'uniqueTag',
        })

Cartesian.js：

    import Cartesian from './cartesian'

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

现在这种方法很完美，但是，如果我添加了一些内容，我不确定区别：

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"));

呈现方式，这些中的任何一个有什么不同吗？我已经从API和这个有用的帖子（React vs ReactDOM?）中读到了一些关于React DOM的内容。但是，在渲染时，这个主题对我来说并不十分清楚。

提前致谢。

Answer 1

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

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

关于你的实际问题。会有分歧。首先，目标节点中的所有子节点都将替换为ReactDOM.render的结果。第二 - 您将从两个单独安装的组件中发现问题accessing same context。我确信会有更多问题 - 因此请遵循建议的方法，使用一个安装点进行单ReactDOM.render次呼叫。

Answer 2

让我试着回答一下：）

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

与笛卡尔组件到父组件的连接（可能传递属性）
Serverside呈现依赖于React.renderToString，我很确定引用document.getElementById无法在服务器上正常运行。
从代码样式连接你的应用程序的两个部分与字符串id（图形）相比，在更改一个id时会出错，特别是因为没有100％熟悉编码的人不期望这种连接。 / LI>
说过没有明显的理由说明为什么多个ReactDom.render会有所帮助，即使这可能有效，我也会认为这是一个反模式。

导入和导入+ ReactRender.DOM渲染之间的区别 - React

2 个答案: