浏览器标签页：被忽视的注意力争夺战场

平均一台笔记本同时开着30个标签页，你的应用只是其中之一。用户打开它，切去Slack读消息，15分钟后回来，却忘了哪个标签是你的。如果标签标题还是"我的应用"，图标还是上线以来没换过的灰色方块，这15分钟就浪费了——有新消息、构建完成、上传结束，用户全然不知。

浏览器其实给开发者留了一块小而强的注意力召回 surface：标签标题、网站图标、可见性状态、焦点事件、系统通知。配置得当，一个非活跃标签可以显示"(3) 新消息 — Acme 聊天"、在图标上闪烁红色徽章、隐藏时暂停高成本轮询、切回时立即刷新、紧急事件触发原生系统通知。配置不当，同样的代码会泄漏事件监听器、与 React 渲染周期冲突、首次 SSR 就抛出 hydration 不匹配错误。

本文梳理六个用于在 React 中构建注意力感知 UI 的基础能力，全部使用 ReactUse 的聚焦式 Hook。每项先讲手动实现、再讲坑点、最后给出封装好的 Hook。文末将六个能力整合成一个聊天标签组件，行为媲美原生应用。

一、标签标题作为通知渠道

元素是网页上最被低估的通知 surface。Gmail、GitHub、Linear、Discord 都在用：前置的 (N) 计数或 • 圆点，无需切标签即可告知事件发生。实现只需一行——document.title = "..."——但在 React 组件里用错方式，会导致标题卡在最后一次渲染的值，即使组件已卸载。</p>

手动实现的问题很隐蔽：previous 变量捕获的是 effect 运行瞬间的标题，若父组件在渲染间修改了标题，清理函数会恢复一个过期值。修复方案要么选定标题的唯一数据源，要么干脆不写清理、让下次渲染覆盖。多数应用选了后者，然后彻底忘记写清理，六个月后有人开启 React StrictMode、effect 执行两次，就上线了标题卡死的 bug。

ReactUse 的 useTitle 接收单个字符串，字符串变化时同步到 document.title，自动处理清理逻辑，避免上述陷阱。

二、网站图标动态徽章

标签标题会被截断，但网站图标始终可见。动态修改 favicon 可显示未读计数、状态指示器或动画脉冲。手动实现需要操作 DOM 节点，处理多尺寸图标、缓存清除、以及 React 严格模式下的重复副作用。

ReactUse 的 useFavicon 封装了这些脏活：传入图标 URL，自动插入或更新 link 标签，卸载时恢复原始图标。配合 Canvas 动态生成带徽章的图标，可实现红点上标效果。

三、页面可见性感知

Page Visibility API 告知标签是否对用户可见。隐藏时暂停视频、停止轮询、降低动画帧率，可显著节省电量与带宽。手动实现需监听 visibilitychange 事件，注意部分浏览器在后台标签中节流 setTimeout 至 1 秒以上。

ReactUse 的 useDocumentVisibility 返回当前可见状态，变化时触发重渲染。useInterval 等 Hook 内部集成可见性感知，标签隐藏时自动暂停、恢复时追赶执行。

四、窗口焦点追踪

focus/blur 事件与 visibility 不同：用户可能看着可见的标签，但窗口失焦（如双屏场景）。聚焦状态决定输入框是否自动聚焦、实时协作的光标是否显示。手动实现需注意 iframe 嵌套时的事件冒泡异常。

ReactUse 的 useWindowFocus 提供布尔值，true 表示窗口当前获得系统焦点。配合 useEffect 可实现"用户回到页面时刷新数据"的交互。

五、系统通知临门一脚

标签页再醒目，不如系统通知直接打断用户。Notification API 需用户授权，且必须在用户手势后触发首次请求。手动实现需处理权限状态机、服务工作者集成（用于后台推送）、以及移动端 Safari 的特殊限制。

ReactUse 的 useNotification 封装权限请求与通知发送，返回 send 函数与 permission 状态。建议策略：应用内事件触发标签徽章，关键事件（被@提及、构建失败）在获得权限后补发系统通知。

六、六合一：聊天标签组件

整合上述能力，一个生产级聊天标签组件应具备：useTitle 显示未读计数、useFavicon 渲染动态徽章、useDocumentVisibility 控制 WebSocket 连接、useWindowFocus 恢复时标记消息已读、useNotification 发送高优先级提醒。每个 Hook 独立测试，组合后行为可预测，SSR 安全，严格模式兼容。

浏览器标签页是用户注意力的竞技场。六个基础 API，五封装好的 Hook，就能把被动等待的网页变成主动召回用户的工具。代码量不多，但产品体验的差距，就在这几十行里。