ReactJS ReactDOMClient

提供了在客户端上初始化应用程序的方法的 react-dom/client 包。大多数组件不应该需要使用此模块。

安装所需的包：

客户端特定的初始化技术可在 react-dom/client 包中使用。大多数组件不应该需要使用此模块。

import * as ReactDOM from 'react-dom/client';

如果你使用 ES5 和 npm，你可以写成：

createRoot(container[, options]);

在客户环境中使用：

createRoot()
hydrateRoot()

ReactJS createRoot 和 hydrateRoot 是React JavaScript库中用于创建和填充根React组件的两个函数。

创建React项目：

步骤1： 通过npm命令安装React模块以创建React应用。

npm create-react-app project name

步骤2： 创建完你的React项目后，进入文件夹进行不同的操作。

cd project name

步骤3： 在创建ReactJS应用后，将以下依赖项导入到您的应用程序中。

import * as ReactDOM from 'react-dom/client'; // ES6
createRoot(container[, options]); // ES5 with npm

项目结构： 项目结构应该如下所示：

ReactJS ReactDOMClient

1. createRoot(): createRoot 用于创建一个根React组件，作为整个React应用的容器。它设置必要的上下文，并为根组件提供访问 React DOM 的权限。

语法-

createRoot(container[, options]);

在给定容器中创建一个React根节点后，返回根节点。可以使用根节点和render方法将React元素渲染到 DOM 中。

const root = createRoot(container);
root.render(element)

createRoot接受两个选项：

onRecoverableError： 可选回调函数，当React自行修复错误时激活。
identifierPrefix： React可以用该前缀来为 React.useId 产生的id添加前缀。在同一页上使用多个根时，避免冲突会很有帮助。前缀必须与服务器使用的前缀匹配。

也可以使用unmount卸载根节点：

root.unmount();

注意： 你传递给 createRoot() 的容器节点对内容有控制权。当调用render时，容器内部的任何现有 DOM 组件都会被替换。为了有效地更新，后续的调用会使用React的 DOM 差异机制。

容器节点不会被 createRoot() 修改（只会修改容器的子节点）。一个现有的DOM节点可以在不改变其子节点的情况下添加组件。

使用 createRoot() 不支持用于对服务器渲染的容器进行渲染。而是使用 hydrateRoot() 。

示例： 下面的示例将演示 createRoot() 的用法：

index.js

import { createRoot } from 'react-dom/client'; 
import './index.css'; 
import App from './App.js'; 
  
const root = createRoot(document.getElementById('root')); 
  
let i = 0; 
setInterval(() => { 
    root.render(<App counter={i} />); 
    i++; 
}, 500);

App.js

import './index.css'; 
export default function App({ counter }) { 
    return ( 
        <> 
            <h1>GeeksforGeeks{counter}</h1> 
            <input placeholder="Type something here" /> 
        </> 
    ); 
}

输出：

ReactJS ReactDOMClient

2. hydrateRoot(): hydrateRoot 用于在客户端上水合服务器端渲染的React应用程序。它接收服务器生成的标记，并使用必要的事件处理程序和状态更新它，以便应用程序在客户端上正确运行。这可以为用户提供更流畅，更快的初始加载，并改进搜索引擎优化 (SEO) 。

语法 –

hydrateRoot(container, element[, options])

与 createRoot() 相同，但用于水合化由 ReactDOMServer 渲染的容器的 HTML 内容。React 将尝试将事件监听器附加到现有的标记上。

hydrateRoot 接受两个选项：

onRecoverableError： 可选的回调函数，在 React 自己修复故障时激活。
identifierPrefix： 一个选择的前缀，React 使用 react-generated 的 ID。当在同一页上使用多个根时，避免冲突非常有帮助。前缀必须与服务器使用的相匹配。

注意： React 期望在客户端和服务器上渲染的内容相同。它可以掩盖文本内容的差异，但您应将不一致视为错误并加以修正。在开发模式下，React 在水合化期间会发出关于不兼容性的警告。如果存在不匹配，不保证属性差异会得到修复。由于大多数应用程序中不兼容性很少见，并且检查所有标记的成本极高，这对于效率至关重要。

示例： 下面的示例将说明如何使用 hydrateRoot()

index.js

import './index.css'; 
import { hydrateRoot } from 'react-dom/client'; 
import App from './App.js'; 
  
hydrateRoot( 
    document.getElementById('root'), 
    <App /> 
);

App.js

import { useState } from 'react'; 
  
export default function App() { 
    return ( 
        <> 
            <h1>GeeksforGeeks</h1> 
            <Counter /> 
        </> 
    ); 
} 
  
function Counter() { 
    const [count, setCount] = useState(0); 
    return ( 
        <button onClick={() => setCount(count + 1)}> 
            You clicked me {count} times 
        </button> 
    ); 
}

输出：

ReactJS ReactDOMClient