反应水合作用详解

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

Dan Abramov（Create React App 和 Redux）对 Hydration 的定义是：“Hydration 就像用用户交互和事件处理程序的‘水’来浇灌‘干燥的’HTML。”

水合作用是深入理解 React 工作原理的一个高级且基础的主题。在深入探讨这个概念之前，让我们先简要回顾一些重要的主题：

1. 客户端渲染 (CSR)

客户端渲染是指所有页面都直接在浏览器中使用 JavaScript 加载和渲染。这样，浏览器负责处理所有请求（数据获取）、管理加载状态以及其他交互操作。

2. 服务器端渲染 (SSR)

在服务器端渲染（SSR）中，页面在服务器端使用 JavaScript 生成，并以 HTML 格式发送给客户端。此过程优化了服务器端的数据获取，从而提升了用户体验。在 SSR 中，初始 HTML 加载完毕，而交互所需的 JavaScript 代码则在后台加载。

什么是反应水合？

水合（Hydration）是指将服务器端预渲染的 HTML 代码在浏览器中实现交互的过程。换句话说，React 会检查现有的 HTML 代码，并关联必要的 JavaScript 代码来激活组件，从而实现交互功能。

这样可以加快页面加载速度，因为静态内容（初始 HTML）会快速加载，交互功能随后启用。

值得注意的是，水合作用并不直接适用于仅在客户端运行的库或框架（仅限客户端），例如仅在客户端使用的 React。

为什么纯客户端框架没有 Hydration 功能？

纯客户端框架或库，例如纯客户端渲染（CSR）模型中的 React，直接在浏览器中渲染页面，使用 JavaScript 从头开始​​生成 DOM。在这种情况下，无需从服务器预渲染 HTML 进行“加载”。

因此，仅客户端框架使用称为客户端渲染 (CSR) 的过程，而水合作用的概念不适用于它们。

简单解释

想象一下，你的页面已经渲染完成，所有内容都已呈现，但点击按钮却没有任何反应。React Hydration 的作用就是让这个页面“活”起来，将屏幕上的内容与负责交互的代码连接起来。

当 React 执行水合过程时，它会“动画化”页面，将可见组件与代码连接起来，使按钮和其他元素在浏览器中具有功能性和交互性。

React 19 中的水合作用

在 React 19 中，hydrate负责水合的方法被移除，并替换为新hydrateRoot方法。以下是移除前和移除后的示例：

前：

import { hydrate } from 'react-dom';
hydrate(<App />, document.getElementById('root'));

后：

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

React 团队引入了此次更新，旨在改进水合过程并提高与 React 19 中新 API 的兼容性。

主要区别：

• hydrate （React 18 及更早版本）：从服务器停止处理 HTML 的位置开始水合过程。
• hydrateRoot （React 18 及更高版本）：替换hydrate并提供更现代、更灵活的 API，尤其支持React 中的流式传输和过渡等功能。

关于补水，基本上就这些了 ;)