订阅浏览器 API

浏览器媒体查询是理想的外部存储。您可以订阅用于深色模式或断点的 matchMedia 查询，并在匹配状态切换时重新渲染。

订阅函数向 MediaQueryList 添加变化监听器，getSnapshot 则返回当前的匹配布尔值，从而让您能够响应式地访问响应式条件。

将这套逻辑封装到 useMediaQuery 钩子中后，组件只需调用一次就能询问某个查询是否匹配。该钩子会围绕给定的查询字符串构建稳定的订阅函数和 getSnapshot。

借助 useSyncExternalStore，这就形成了简洁、可复用的响应式行为基础原语，并且在并发渲染下仍能保持一致。

浏览器提供在线和离线事件，以及 navigator.onLine。订阅这些事件并读取该属性，就能在 React 中获得实时的连接状态。

getSnapshot 返回 navigator.onLine，订阅函数则为在线和离线事件添加监听器，使组件能够随着连接状态变化而更新。

将这些逻辑封装到 useOnlineStatus 钩子中后，任何组件都可以在网络断开时显示离线提示或禁用操作。React 官方文档正是使用这个例子来演示该钩子。

这是一个虽小却很有说明性的案例，展示了外部浏览器信号如何自然地映射为一部分响应式状态。

您可以通过监听历史记录状态变化事件，并在 getSnapshot 中读取 window.location，来订阅导航变化。这是基于历史记录接口构建简单自定义路由器的基础。

由于 pushState 不会发出历史记录状态变化事件，自定义路由器通常会自行分发事件，使快照也能在程序化导航时更新。

当 localStorage 发生变化时，存储事件会在其他标签页中触发，因此您可以订阅它作为外部存储。getSnapshot 读取当前值，订阅函数则监听存储事件。

这样即可实现跨标签页同步：在一个标签页中更新值后，另一个标签页中的组件也会响应式地更新。

设备方向事件会报告设备的物理倾斜情况。订阅该事件，并在 getSnapshot 中读取最新角度，就能将运动数据转换为响应式状态。

这对于视差效果或交互式可视化很有用，因为它们可以根据手机的握持方式做出响应。

IntersectionObserver 会告诉您某个元素何时进入或离开视口。您可以对它进行封装，使订阅函数创建观察器，而 getSnapshot 返回最新的 isIntersecting 值。

这样就能获得响应式的 isVisible 标志，用于延迟加载图片、触发动画或实现无限滚动哨兵。

ResizeObserver 会报告元素尺寸的变化。对它进行封装后，订阅函数可以观察元素，getSnapshot 可以返回其当前尺寸，从而让组件精确响应布局变化。

当您关注的是特定元素而不是整个视口时，这比监听窗口大小变化更加高效和准确。

您可以将大小变化事件与该钩子结合起来，构建一个返回当前宽度和高度的 useWindowSize。订阅函数添加大小变化监听器，getSnapshot 读取窗口尺寸。

请记得返回稳定的快照：缓存尺寸对象，使未改变的尺寸不会导致重新渲染，从而保持组合逻辑的高效。

思考 useMediaQuery 钩子如何使用存储钩子。

许多浏览器接口都可以作为外部存储，并通过 useSyncExternalStore 连接起来：用于断点的 matchMedia，用于连接状态的 navigator.onLine，用于导航和跨标签页同步的位置与存储，以及方向、交叉检测和大小变化观察器。

它们都遵循相同的结构：一个负责添加和移除监听器的订阅函数，以及稳定的 getSnapshot。您可以将它们组合成 useMediaQuery、useOnlineStatus 和 useWindowSize 等钩子。