使用选择性水合实现渐进式水合

选择性水合是 React 18 的一项功能，它允许 React 在组件的 JavaScript 代码到达后立即开始为组件进行水合，而无需等待整个页面的 JavaScript 下载完成。每个独立进行代码分割的区域都会在其代码包加载时进行水合，而不是所有区域同时水合。

在 React 18 之前，水合是“全有或全无”的——React 必须下载所有 JavaScript 并为整棵树完成水合，页面的任何部分才能变得可交互。React 18 打破了这一限制：树的各个部分会随着其代码和数据可用而独立完成水合。

如果用户点击或与尚未完成水合的 Suspense 边界交互，React 会立即优先为该子树完成水合，然后再处理其他待处理的水合工作。这意味着用户试图使用的功能会先变得可交互，即使它不在文档顺序中的前面。

将 React.lazy 与动态导入和 Suspense 边界结合使用，可以为经过代码分割的组件启用选择性水合。浏览器首先下载主 JS 代码包，并立即为外壳进行水合。每个延迟加载的组件会在其代码块下载完成后进行水合——随着浏览器获取这些代码块逐步完成。

结果是，首屏内容会在首屏以下的 JavaScript 甚至下载之前就变得可交互。用户可以与导航和主视觉区域中的 CTA 交互，而评论信息流和推荐组件仍在加载其 JavaScript 代码块。

选择性水合会减少总阻塞时间（TBT）——这是衡量水合性能的关键指标。在 Chrome DevTools 的性能面板中，长任务（超过 50 毫秒的任务）会以红色突出显示。在选择性水合之前，您可能会看到一个用于完整水合的 300 毫秒长任务；之后，则会看到多个随时间错开的较小任务。

破坏选择性水合的反模式是将所有组件都导入应用的顶部：import Footer from './Footer'。这会迫使浏览器在任何水合开始前下载、解析并执行 Footer 的代码。请用 React.lazy + 动态导入替换首屏以下组件的顶层导入。

对于出现在初始视口以下的组件，请使用 const Footer = React.lazy(() => import('./Footer'))。将它们包裹在带有简单回退界面的 Suspense 中。浏览器会延后获取 Footer 的代码包，直到首屏水合完成，从而自然地改善 TBT。

流式传输和选择性水合相辅相成：流式传输发送 HTML 数据块以改善 FCP 和 LCP，而选择性水合处理 JavaScript 代码块以改善 TTI 和 TBT。二者共同解决性能的两个方面：快速显示内容，以及快速使内容具备交互能力。

React 服务器组件将选择性水合推进得更远：服务器组件完全不会为客户端生成 JavaScript。只有客户端组件（用“use client”标记）需要进行水合。这样可减少需要水合的 JavaScript 总量，使选择性水合更加有效。

一种实用模式是：使用 renderToPipeableStream 流式传输 HTML，在页面根部使用 hydrateRoot 调用（而不是 createRoot）来启用水合模式，对所有首屏以下区域使用 React.lazy，并将每个区域包裹在 Suspense 边界中。其余工作由 React 自动处理。

用户交互会如何影响 React 18 中选择性水合的优先级？

选择性水合让 React 能随着 JavaScript 到达而逐步为组件子树进行水合，而不是等待完整代码包。用户交互会优先为目标子树进行水合。对首屏以下内容使用 React.lazy + 动态导入，并结合 Suspense 边界，即可实现这种渐进式模式。选择性水合和流式 SSR 是相辅相成的技术，二者共同解决内容交付和交互性能问题。