ReactJS - hydrateRoot() 方法

更新于 2025/3/23 16:37:17

使用 React 构建网页时，我们需要处理在服务器端创建的 HTML 内容。在这种情况下，hydrateRoot 函数非常有用。因此，我们将了解 hydrateRoot 是什么、如何使用它以及为什么它在某些情况下很重要。

hydrateRoot 到底是什么?

hydrateRoot 是一种 React 方法，它允许我们在网页的 DOM 节点内显示 React 组件。此 DOM 节点已经具有 React 在服务器上创建的 HTML 内容。或者简单地说，它允许我们控制已经由 React 创建的网页的一部分并在客户端进行管理。

const root = hydrateRoot(domNode, reactNode,optionalObject)

简单来说，当我们在服务器(而不是浏览器)上呈现 React 应用程序时，它会为我们的组件生成 HTML。然后在客户端使用 hydrateRoot 函数来附加事件侦听器并使 HTML 具有交互性。

这个过程称为"hydration"。它将服务器呈现的 HTML 与客户端 JavaScript 结合起来，创建一个功能齐全的应用程序。使用 hydrateRoot 有助于 React 优化渲染过程并增强用户体验。

参数

domNode −为了放置我们的 React 组件，我们必须首先在网页中创建一个 DOM 元素。此 DOM 元素应与服务器呈现的内容的根相对应。
reactNode − 它是将在 DOM 节点内呈现的 React 组件。它通常是在服务器上呈现的 JSX 元素，例如 <App />。
optionalObject − 我们可以给出带有附加参数的选项对象。这可以包含一个回调来处理失败

hydrateRoot 方法返回一个具有两个方法的对象:render 和 unmount。

render 方法用于更新hydrateRoot内的 React 组件。

root.render(reactNode)

unmount 方法用于销毁 React 根内的渲染树。

root.unmount()

如何使用它?

因此，我们可以以不同的方式使用 hydrateRoot。第一种是通过水合整个文档，第二种是通过处理不同的客户端和服务器内容，第三种是通过更新hydrateRoot组件。因此我们将逐一讨论这些内容。

示例

示例 − 为整个文档补充水分

创建一个补充整个文档的 React 应用是一个有效的概念。它帮助我们使用 React 组件通过包含 HTML 结构来创建完整的网页。因此我们将使用此概念创建一个应用 −

使用"npx create-react-app"设置 React 应用。
现在我们将为我们的应用创建一个组件。在 src 文件夹中，我们将为该应用创建一个名为 App.js 的新组件。
现在，我们将使用 hydrateRoot 函数在 HTML 文档中呈现整个 React 应用。在项目文件夹中，我们有 src/index.js 文件，因此我们将用下面提到的新代码替换现有代码。

src/App.js

import React from 'react';

function App() {
   return (
      <html>
         <head>
            <meta charSet="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1" />
            <link rel="stylesheet" href="/styles.css" />
            <title>My React App</title>
         </head>
         <body>
            <div>
               <h1>Hello, World!</h1>
               <p>This is a simple React app.</p>
            </div>
         </body>
      </html>
   );
}

export default App;

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { hydrateRoot } from 'react-dom/client';

const rootElement = document.getElementById('root');
if (rootElement) {
   hydrateRoot(document, <App />);
} else {
   ReactDOM.render(
      <React.StrictMode>
         <App />
      </React.StrictMode>,
      document.getElementById('root')
   );
}

输出

此代码块检查 rootElement 是否存在。如果存在，则使用 hydrateRoot 将整个文档呈现为 React 应用程序。

示例 − 处理不同的客户端和服务器内容

创建一个简单的应用程序来展示处理不同客户端和服务器内容的概念。因此，让我们看看下面的代码 −

首先，我们需要设置一个 React 应用程序。
现在我们将创建一个组件，使用两遍渲染在服务器和客户端上呈现不同的内容。在 src 文件夹中，我们将为应用程序创建一个名为 App.js 的组件。
现在，我们将启动开发服务器来检查结果。

src/App.js

import React, { useState, useEffect } from 'react';

function App() {
   const [isClient, setIsClient] = useState(false);   
   useEffect(() => {
      setIsClient(true);
   }, []);   
   return (
   <div>
      <h1>
         {isClient ? 'Rendered on Client' : 'Rendered on Server'}
      </h1>
   </div>
   );
}

export default App;

输出

在上面的代码中，我们有一个状态变量 isClient，我们使用 useEffect Hooks在客户端将其设置为 true。这让我们能够根据服务器或客户端上的渲染情况呈现不同的内容。

示例 − 更新hydrateRoot组件

我们将创建一个小型 React 应用，该应用显示一个计数器并每秒刷新一次以显示hydrateRoot组件。这个概念解释了如何使用 root.render 在组件水合后更新组件。让我们看看代码 −

首先创建一个新项目，然后在终端或命令提示符中导航到我们的项目目录。
现在我们将修改 src 文件夹中的 App 组件，名为 App.js。现在我们将在此文件中创建一个简单的计数器 App。在此文件中，组件接受一个计数器 prop。并且此 prop 用于初始化计数器值。因此 useEffect Hooks会在应用程序中每秒增加一次计数器。
现在我们将修改 src/index.js 文件以使用 hydrateRoot 并每秒更新 App 组件 −

src/App.js

import React, { useState, useEffect } from 'react';

function App({ counter }) {
   const [count, setCount] = useState(counter);   
   useEffect(() => {
   const interval = setInterval(() => {
      setCount(count + 1);
   }, 1000);   
   return () => clearInterval(interval);
   }, [count]);   
   return (
   <div>
      <h1>The Counter: {count}</h1>
      <p>It is updating every second.</p>
   </div>
   );
}

export default App;

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { hydrateRoot } from 'react-dom/client';

const rootElement = document.getElementById('root');

if (rootElement) {
   const root = hydrateRoot(rootElement, <App counter={0} />);   
   let i = 0;
   setInterval(() => {
      root.render(<App counter={i} />);
      i++;
   }, 1000);
} else {
   ReactDOM.render(
      <React.StrictMode>
         <App counter={0} />
      </React.StrictMode>,
      rootElement
   );
}