useNetWork

一个实用的 React Hook，提供 NetWork 相关功能。

功能特性

• ✅ 核心功能: 提供 NetWork 的核心功能
• ✅ 类型安全: 完整的 TypeScript 类型支持
• ✅ 易于使用: 简洁的 API 设计
• ✅ 性能优化: 高效的实现方式
• ✅ 自动清理: 组件卸载时自动清理资源

基本用法

import useNetWork from "./useNetWork";

function Component() {
  const result = useNetWork();
  
  return <div>使用 useNetWork</div>;
}

高级用法

实际应用场景

function AdvancedComponent() {
  const hookResult = useNetWork(/* 参数 */);
  
  // 根据具体 hook 的功能进行使用
  
  return (
    <div>
      {/* 渲染内容 */}
    </div>
  );
}

API 参考

useNetWork(params?)

参数

根据具体 hook 的功能确定参数类型和说明。

返回值

根据具体 hook 的功能确定返回值类型和说明。

使用场景

1. 场景一: 描述具体的使用场景
2. 场景二: 描述另一个使用场景
3. 场景三: 描述更多使用场景

注意事项

1. 性能: 注意性能相关的使用建议
2. 兼容性: 浏览器兼容性说明
3. 最佳实践: 推荐的使用方式

兼容性

• ✅ React 16.8+
• ✅ TypeScript 4.0+
• ✅ 现代浏览器
• ✅ 服务端渲染 (SSR)

实现源码

查看 useNetWork 的实现

import { useEventListener, useSafeState } from "ahooks";

interface NetWorkStates {
  online?: boolean; // 网络是否为在线
  rtt?: number; // 当前连接下评估的往返时延
  type?:
    | "bluetooth"
    | "cellular"
    | "ethernet"
    | "none"
    | "wifi"
    | "wimax"
    | "other"
    | "unknown"; // 设备使用与所述网络进行通信的连接的类型
  saveData?: boolean; // 用户代理是否设置了减少数据使用的选项
  downlink?: number; // 最大下行速度（单位：兆比特/秒）
  effectiveType?: "slow-2g" | "2g" | "3g" | "4g"; // 网络连接的类型
}

const getConnection = (): NetWorkStates | undefined => {
  if (navigator && typeof navigator === "object") {
    const nav = navigator as any;
    return {
      rtt: nav.connection?.rtt,
      type: nav.connection?.type,
      saveData: nav.connection?.saveData,
      downlink: nav.connection?.downlink,
      effectiveType: nav.connection?.effectiveType
    };
  }
};

const useNetWork = (): NetWorkStates => {
  const [netStatus, setNetStatus] = useSafeState(() => ({
    online: navigator?.onLine,
    ...getConnection()
  }));

  useEventListener("online", () => {
    setNetStatus((s) => ({
      ...s,
      online: true
    }));
  });

  useEventListener("offline", () => {
    setNetStatus((s) => ({
      ...s,
      online: false
    }));
  });

  return netStatus;
};

export default useNetWork;