010 连接DOM：ReactDOM渲染逻辑与StrictMode最佳实践

导入ReactDOM并创建根节点

我们上一节已经定一个简单的 App 组件，是否意味着已经可以将 App 组件渲染到浏览器页面？答案是否定的，因为还缺少一个重要的库 —— ReactDOM。ReactDOM 是连接 React 组件与浏览器 DOM 的桥梁，是将 React 组件渲染到浏览器 DOM 中的渲染器。因此我们需要在文件顶部从react-dom/client导入 ReactDOM 库创建应用的根节点：

import ReactDOM from 'react-dom/client';

const App = () => {
  return <h1>react is fun</h1>
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

import ReactDOM from 'react-dom/client';

const App = () => {
  return <h1>react is fun</h1>
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

在这段代码中，我们创建了 React 应用的核心根容器（Root Element）—— root变量。这是整个 React 应用渲染的基准入口。实现这一目标的核心方式是调用 ReactDOM 提供的根元素创建函数createRoot，该函数的核心作用是获取浏览器 DOM 中指定挂载点的元素的引用，这一元素将作为所有 React 组件的最终渲染容器。通常为页面中id为root的 DOM 元素，上面的示例就是如此。为 React 应用明确一个唯一的根挂载点是工程化开发的核心规范，能确保组件渲染的边界清晰、流程可控。

完成根容器的创建后，我们即可执行 App 组件的渲染操作：通过根容器对象暴露的render()方法，将 App 组件作为核心参数传入。运行代码后，React 的渲染引擎会自动接管后续流程，将 App 组件中的虚拟 DOM 映射为真实 DOM，并将其挂载到此前指定的根元素中（本例中为 id 为 root 的元素）。这一步是连接 React 声明式代码与用户可视界面的关键链路，执行完成后，App 组件中定义的 UI 内容（如本例标题 react is fun）将直接渲染到网页视图中。保存我们代码，结果如下所示。

注意

如果你你的代码在运行时报错“error Fast refresh only works when a file has exports. Move your component(s) to a separate file react-refresh/only-export-components……”这个报错是 React 开发环境中 Fast Refresh（快速刷新）功能的核心机制限制导致的 ——Fast Refresh 作为 React 官方的热更新能力，其底层实现依赖文件的导出（exports）机制来追踪组件的变更。若当前文件仅包含组件定义但无任何导出语句（即未通过export/export default暴露组件），Fast Refresh 无法识别该文件内的组件关联关系，因此会触发此报错。你可以直接在组件文件顶部添加注释/* eslint-disable react-refresh/only-export-components */，或者在App组件上添加注释// eslint-disable-next-line react-refresh/only-export-components 禁用 ESLint 中 react-refresh 插件的 only-export-components 规则校验。前者是禁用整个文件的该规则，后者是只禁用下一行的该规则。

StrictMode最佳实践

React 19 中无需强制导入 React 核心库即可使用 JSX语法，但如需使用StrictMode等核心功能，仍需导入 React 库。

import React from 'react';
import ReactDOM from 'react-dom/client';

const App = () => {
  return <h1>react is fun</h1>
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

import React from 'react';
import ReactDOM from 'react-dom/client';

const App = () => {
  return <h1>react is fun</h1>
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

在上面的代码中，我们将 App 组件包裹在 React 的 <StrictMode> 组件标签中。<StrictMode> 组件是 React 提供的开发阶段校验工具，可以帮助我们在开发的早期阶段发现潜在的问题。虽非简单应用的强制要求，但属于生产级开发的最佳实践。它会在开发阶段执行额外检查，识别组件中潜在的性能问题和不合规写法，同时暴露在常规模式下无法发现的警告与隐患，从而提升应用的可靠性与可维护性；这些校验仅在开发环境生效，不会影响生产环境的性能。