使用“demo”或“root”的目的是什么？

Question

ReactDOM.render(
    <App />,
    document.getElementById('root')
    );

当我在应用程序末尾看到类似的内容时，我应该理解什么？
“root”或“demo”代表什么？

Answer 1

它是原始 HTML 中存在的元素，所有 React 内容都进入其中。例如，如果您的 HTML 包含：

<body>
  <div>Maybe some other content here</div>
  <div id="root"></div>
</body>

React 渲染到意味着#rootApp 渲染的所有内容都将放入该元素中：

<div id="root"> 
  <!-- App populates this element -->
</div>

选择要填充的元素可以是您想要的任何元素 - 不必是root或demo特别是。

Answer 2

我假设您正在使用 Create React App。看一下public/index.html。在那里您会看到所指的<div id="root"></div>是什么。document.getElementById('root')

Answer 3

很多React初学者都对这个东西感到好奇，我也是如此。因此我将尝试用简单的语言解释这一点。

当浏览器从服务器收到响应并开始渲染时，它会转到根文件（在大多数情况下是）public/index.html，并首先渲染相同的文件。

在这个 html 中<div>写入了一个 id 为“root”的元素

<div id="root"> <div>

然后控制权转到另一个文件，即index.js.

在这个 .js 文件中，使用了一个组件（在大多数 React 应用程序中，该组件称为<App/>.

ReactDOM.render(
    <App />
  document.getElementById("root"),
);

该<App/>组件是最先呈现在屏幕上的组件。每个组件都在该组件或其子组件内定义。

并document.getElementById("root")渲染index.html作为根文件的文件。

这就是所有组件的渲染方式以及您的 React 应用程序开始工作的方式。