跳到主要内容

认识

2024年02月29日
柏拉文
越努力，越幸运

一、认识​

水合 hydrateRoot() 函数允许你在先前由 react-dom/server 生成的浏览器 HTML DOM 节点中展示 React 组件。主要作用是在客户端接管从服务器端渲染的应用程序，并将应用程序的状态与服务器端保持一致。

在传统的 SSR 过程中，服务器端会渲染出 HTML 字符串，并将其发送给客户端。然后，客户端的 JavaScript 代码会接管这个已经渲染好的页面，并对其进行交互处理。但是，在客户端接管页面之前，用户可能会看到一个空白屏幕或者不完全渲染的页面，这被称为闪烁现象。

hydrate 方法可以解决这个问题。它允许在服务器端渲染的 HTML 中插入一些特殊的注释（称为hydration markers），这些注释包含了客户端 JavaScript 需要的一些信息，例如应用程序的状态、组件的类型等等。当客户端加载页面时，它会查找这些注释，并使用这些信息来恢复应用程序的状态，从而快速接管页面，并减少闪烁现象。

使用 hydrate（水合） 方法，可以使 SSR 的应用程序更加流畅地过渡到客户端，提高用户体验。

二、语法​

const root = hydrateRoot(domNode, reactNode, options?)

root.render(reactNode);

root.unmount();

  • domNode: 一个在服务器端渲染时呈现为根元素的 DOM 元素

  • reactNode: 用于渲染已存在 HTML 的 React 节点。这个节点通常是一些类似于 <App /> 的 JSX，它会在 ReactDOM Server 端使用类似于 renderToPipeableStream(<App />) 的方法进行渲染。

  • options: 一个包含此 React 根元素选项的对象

    • onRecoverableError: 当 React 自动从错误中恢复时调用的回调函数

    • identifierPrefix: 字符串前缀，用于标识由 useId 生成的 ID ，可以避免在同一页面上使用多个 React 根元素时出现冲突。必须与服务端使用的前缀相同。

  • root: 返回一个包含两个方法的对象 render 和 unmount

三、用法​

用 hydrateRoot 函数将 React 连接到由 React 在服务端环境中渲染的现有 HTML 中。

import { hydrateRoot } from 'react-dom/client';

const domNode = document.getElementById('root');
const root = hydrateRoot(domNode, reactNode);

React 将会连接到内部有 domNode 的 HTML 上，然后接管其中的 domNode。一个完全由 React 构建的应用只会在其根组件中调用一次 hydrateRoot 方法。