DOM 容器（DOM Container） 是 React 应用中用于挂载和渲染组件树的实际 DOM 元素。它是 React 虚拟 DOM 和浏览器实际 DOM 之间的桥梁。React 会将组件树渲染到 DOM 容器中，从而在页面上显示出来。
DOM 容器的定义
在 React 中，DOM 容器通常是一个普通的 HTML 元素（例如 div、span 等），它作为 React 应用的根节点。React 会将整个组件树渲染到这个容器中。
例如：
<div id="root"></div>在这个例子中，<div id="root"></div> 就是一个 DOM 容器。React 会将组件树渲染到这个 div 中。
DOM 容器的作用
-
挂载点：
-
DOM 容器是 React 应用的挂载点，React 会将组件树渲染到这个容器中。
-
如果没有 DOM 容器，React 就无法将组件渲染到页面上。
-
-
连接虚拟 DOM 和实际 DOM：
-
React 使用虚拟 DOM 来描述组件树的结构和状态。
-
DOM 容器是虚拟 DOM 和实际 DOM 之间的桥梁，React 会将虚拟 DOM 的变化应用到实际的 DOM 容器中。
-
-
渲染目标：
-
当 React 完成组件的渲染和更新后，它会将最终的 DOM 结构插入到 DOM 容器中。
-
例如，如果组件树渲染出一个
<h1>Hello World</h1>，React 会将其插入到 DOM 容器中，使其显示在页面上。
-
DOM 容器的使用
javascript">import React from 'react';
import ReactDOM from 'react-dom';function App() {return <h1>Hello, World!</h1>;
}// 获取 DOM 容器
const container = document.getElementById('root');// 将 React 组件树渲染到 DOM 容器中
const root = ReactDOM.createRoot(rootElement);
root.render(<App />);-
rootElement：-
这是 DOM 容器，通常是一个 HTML 元素（例如
div）。 -
例如：
const rootElement = document.getElementById('root');
-
-
createRoot：-
创建一个支持并发模式的根节点。
-
返回一个
root对象，该对象提供了render、unmount等方法。
-
-
root.render(<App />)：-
将
<App />组件树渲染到rootElement中。 -
与
ReactDOM.render不同，root.render支持并发模式，可以更好地处理高优先级更新。
-
