DOM容器

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 容器的作用

1. 挂载点：

   • DOM 容器是 React 应用的挂载点，React 会将组件树渲染到这个容器中。

   • 如果没有 DOM 容器，React 就无法将组件渲染到页面上。

2. 连接虚拟 DOM 和实际 DOM：

   • React 使用虚拟 DOM 来描述组件树的结构和状态。

   • DOM 容器是虚拟 DOM 和实际 DOM 之间的桥梁，React 会将虚拟 DOM 的变化应用到实际的 DOM 容器中。

3. 渲染目标：

   • 当 React 完成组件的渲染和更新后，它会将最终的 DOM 结构插入到 DOM 容器中。

   • 例如，如果组件树渲染出一个 <h1>Hello World</h1>，React 会将其插入到 DOM 容器中，使其显示在页面上。

DOM 容器的使用

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

1. rootElement：

   • 这是 DOM 容器，通常是一个 HTML 元素（例如 div）。

   • 例如：const rootElement = document.getElementById('root');

2. createRoot：

   • 创建一个支持并发模式的根节点。

   • 返回一个 root 对象，该对象提供了 render、unmount 等方法。

3. root.render(<App />)：

   • 将 <App /> 组件树渲染到 rootElement 中。

   • 与 ReactDOM.render 不同，root.render 支持并发模式，可以更好地处理高优先级更新。