三月 2, 2025
什么是水合 React 中的 Hydration（水合） 是服务器端渲染（SSR, Server-Side Rendering）的关键步骤，它让静态的 HTML 内容在客户端“活起来”，变为可交互的动态应用。以下是详细解释：
1. 什么是 Hydration？ 定义：Hydration 是 React 在客户端将 JavaScript 逻辑（事件处理、状态管理、交互逻辑等）“附加”到服务器预渲染的静态 HTML 上的过程。 目的：复用服务器生成的 DOM 结构，避免完全重新渲染，从而提升性能和用户体验。 2. 为什么需要 Hydration？ 性能优化：用户首次访问页面时，服务器直接返回渲染好的 HTML（快速显示内容），随后客户端通过 Hydration 添加交互逻辑，减少白屏时间。 SEO 友好：搜索引擎可以直接抓取服务器生成的静态内容。 保留初始状态：如果服务器渲染的 HTML 包含初始数据（如用户信息），Hydration 能保留这些状态，避免页面闪烁。 3. Hydration 的工作流程 服务器渲染：Node.js 使用 ReactDOMServer.renderToString() 或类似方法生成静态 HTML。 <div id="root"> <button>点击次数：0</button> </div> 客户端加载：浏览器接收到 HTML 后立即展示静态内容，同时下载 JavaScript 代码。 Hydration 阶段：客户端调用 ReactDOM.hydrateRoot()（React 18+）或旧版的 ReactDOM.hydrate()，将 React 组件与现有 DOM 关联。 // React 18+ import { hydrateRoot } from "react-dom/client"; hydrateRoot(document.
继续阅读