007 React应用的初始结构与根节点

本节将引导你从零构建首个 React 函数式组件，并深度解析 React 应用的渲染逻辑、JSX 语法底层原理，以及生产级开发的最佳实践。在动手编写自定义组件前，我们先梳理基于 Vite 初始化的 React 应用核心结构，理解组件渲染的底层逻辑。

React应用的初始结构与根节点

我们已经在上一节中简要地第解了index.html是 React 应用的静态入口文件，但其核心作用并非直接与 React 组件交互，而是为 React 提供根 DOM 节点—— 即页面中id=”root”的<div>元素。该节点是 React DOM 的根挂载点，React 会将整个应用的组件树注入并渲染到这个节点中，这个节点是连接静态 HTML 与动态 React 组件的核心桥梁。

为了证明这一点，可以通过浏览器调试工具可直观验证根节点的渲染行为。启动 React 开发服务器后，在浏览器中打开应用页面。右键点击页面任意位,置，点击“Inspect（检查）”进入开发者工具，切换至“Elements（元素）”标签页，定位到 id=”root” 的 <div> 元素。如下图所示：

可以看到 <div id=”root”></div> 元素节点内部已被动态填充了与 React 组件对应的 HTML 元素 —— 这正是 React 将组件渲染至 DOM 的直观体现。

核心调试：注释法验证渲染脚本的作用

main.jsx 文件作为 React 应用的核心入口脚本文件，其内部编写的核心渲染脚本代码承担着将 React 组件树挂载至页面中 id=”root” 根 DOM 节点的关键职责，通过注释该脚本可以清晰地验证其作用。

注释掉index.html文件中的导入main.js的脚本 <script type=”module” src=”/src/main.jsx”></script>或者main.jsx 文件中的 <App/> 组件。如下图所示。

观察浏览器页面，此时页面呈现空白状态 —— 原因是 React 的 JavaScript 渲染代码被阻断，<div id=”root”></div> 元素节点未被填充任何内容。取消注释并保存文件 ，页面会重新加载，id=”root”节点再次被 React 组件内容填充。如下图所示：

这一调试过程印证了：main.jsx 是连接 React 组件与根 DOM 节点的关键，其中导入的 App 组件作为应用的根组件，其内容直接决定了浏览器中渲染的页面内容，对 App 组件的任何修改都会实时反映到前端界面。