React useOnline钩子：网络状态检测与优化实践

1. React useOnline 钩子：网络状态检测的现代解决方案

在当今移动优先的Web开发环境中，网络连接状态管理已经成为提升用户体验的关键因素。想象一下这样的场景：用户正在地铁上使用你的应用，突然进入隧道导致网络中断，一个优雅的网络状态提示远比页面突然崩溃要友好得多。这正是useOnline自定义钩子要解决的核心问题。

作为React开发者，我们经常需要处理这类状态管理问题。传统的解决方案往往需要在各个组件中重复编写事件监听逻辑，而useOnline钩子将这些繁琐的细节封装成一个简洁的API，让开发者可以专注于业务逻辑的实现。

2. 浏览器网络状态API基础解析

2.1 Navigator.onLine属性探秘

浏览器原生提供了检测网络状态的API，核心是navigator.onLine属性。这个布尔值属性简单明了：

• true表示在线
• false表示离线

但要注意，这个属性只能反映浏览器的"认为"的网络状态。在某些情况下，比如电脑连接到路由器但路由器本身没有互联网连接时，可能会产生误判。

2.2 网络状态事件监听机制

浏览器还提供了两个重要的事件：

• online：当网络从离线变为在线时触发
• offline：当网络从在线变为离线时触发

这些事件会冒泡到window对象，因此我们可以这样监听：

javascript复制window.addEventListener('online', handleOnline);
window.addEventListener('offline', handleOffline);

3. useOnline钩子的完整实现解析

3.1 基础实现版本

让我们先看一个最简实现：

javascript复制import { useState, useEffect } from 'react';

function useOnline() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useEffect(() => {
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  return isOnline;
}

这个版本已经可以工作，但它有几个潜在问题：

1. 服务器端渲染(SSR)时会报错，因为navigator对象不存在
2. 没有处理浏览器兼容性问题
3. 缺乏更精确的网络状态检测

3.2 增强型实现方案

下面是一个更健壮的实现：

javascript复制import { useState, useEffect } from 'react';

function useOnline() {
  const [isOnline, setIsOnline] = useState(() => {
    if (typeof window === 'undefined') return true; // SSR默认返回true
    return navigator?.onLine ?? true; // 兼容性处理
  });

  useEffect(() => {
    if (typeof window === 'undefined') return; // SSR不执行

    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);

    // 添加事件监听
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    // 可选：添加心跳检测增强准确性
    con