2026西湖龙井茶官网DTC发售：茶农直供，政府溯源防伪到农户家 

React 中的浏览器标签页用户体验：利用标题、网站图标和通知将用户拉回

平均而言，一台笔记本电脑在任何时刻都有三十个打开的标签页，而你的应用程序只是其中之一。用户打开它，然后切换去阅读 Slack，十五分钟后回来，却忘记了哪个标签页是你的。如果你的标签页标题仍然是“我的应用”，且网站图标自发布以来一直是那个灰色的方块，那么你就浪费了这十五分钟——期间可能有新消息、构建完成或上传完毕，但用户全然不知。

浏览器已经提供了一个虽小但强大的界面来重新吸引注意力：标签页标题、网站图标、可见性状态、焦点事件以及系统通知。如果正确配置，非活动标签页可以显示“(3) 条新消息 — Acme Chat”，在网站图标上闪烁红色徽章，在隐藏时暂停昂贵的轮询，在返回时立即刷新，并在发生紧急事项时触发原生操作系统通知。如果配置错误，同样的代码会导致事件监听器泄漏，与 React 的渲染周期冲突，并在首次服务器端渲染过程中产生水合不匹配问题。

本文将逐步介绍在 React 中构建感知注意力用户界面的六个基本要素，使用来自 ReactUse 的专注型钩子函数。对于每一个要素，我们将查看手动实现方式、常见陷阱，以及能够隐藏这些复杂性的钩子函数。最后，我们将所有六个要素组合成一个聊天标签页组件，使其行为像真正的原生应用程序一样。

1. 将标签页标题作为通知渠道

<title> 元素是网络上最未被充分利用的通知界面。Gmail、GitHub、Linear 和 Discord 都在使用它：前导的 (N) 计数或 • 圆点可以在你不切换标签页的情况下告知你发生了某些事情。实现起来只需一行代码——document.title = "..."——但在 React 组件中以错误的方式执行此操作，会导致标题卡在最后一次渲染设置的值上，即使组件已卸载也是如此。

手动实现方式

import { useEffect, useState } from "react";

function ManualUnreadTitle({ count }: { count: number }) {
  useEffect(() => {
    const previous = document.title;
    document.title = count > 0 ? `(${count}) Acme Chat` : "Acme Chat";
    return () => {
      document.title =<

免责声明：本文内容来自互联网，该文观点不代表本站观点。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请到页面底部单击反馈，一经查实，本站将立刻删除。