useNetwork

跟踪浏览器网络连接状况

useNetwork 封装了 Network Information API 和 online/offline 事件，提供网络状态的全面视图。它返回一个包含 online（布尔值）、上一个在线状态、since（上次变化的时间戳）和详细连接信息的对象，连接信息包括 downlink、effectiveType（2g/3g/4g）、rtt、type（wifi/cellular/ethernet）和 saveData。值会在网络条件变化时响应式更新。

使用场景

显示在线/离线状态指示器，并在断开连接时显示备用 UI
根据连接速度调整内容质量（图片分辨率、视频码率）
实现离线优先功能，在连接恢复时排队操作并同步

注意事项

SSR 安全：在服务端渲染期间所有值返回 undefined。服务端不会访问 navigator 或 window 事件。
Network Information API：详细的连接属性（downlink、effectiveType、rtt、type）仅在基于 Chromium 的浏览器中可用。online 状态在所有浏览器中均受支持。
相关 hooks：参见 useOnline 了解围绕网络连接状态的更简单的布尔值封装。

Usage

Live Editor


function Demo() {
  const state = useNetwork();

  return <pre>{JSON.stringify(state, null, 2)}</pre>;
};

Result

API

useNetwork

Returns

IUseNetworkState

Arguments

IUseNetworkState

参数名	描述	类型	默认值
online	浏览器是否连接网络	boolean \| undefined (必填)	`-`
previous	`online` 属性的先前值。帮助识别浏览器是否刚刚连接或失去连接。	boolean \| undefined (必填)	`-`
since	{Date} 对象指向状态更改发生的时刻。	Date \| undefined (必填)	`-`
downlink	有效带宽估计（以兆位每秒为单位），四舍五入到25 kbps 的最接近倍数。	INetworkInformation['downlink'] \| undefined (必填)	`-`
downlinkMax	最大下行链路速度，以兆比特每秒 (Mbps) 为单位	INetworkInformation['downlinkMax'] \| undefined (必填)	`-`
effectiveType	连接的有效类型，表示“slow-2g”、“2g”、“3g”或“4g”之一。该值是根据最近观察到的往返时间和和下行链路值的组合确定的	INetworkInformation['effectiveType'] \| undefined (必填)	`-`
rtt	当前连接的估计有效往返时间，四舍五入精确到 25 毫秒的最接近倍数	INetworkInformation['rtt'] \| undefined (必填)	`-`
saveData	如果用户在用户代理上设置了减少数据使用选项，则为 {true}。	INetworkInformation['saveData'] \| undefined (必填)	`-`
type	设备用于与网络通信的连接类型。它将是以下值之一：- 蓝牙- 蜂窝网络- 以太网- 没有任何- 无线上网- 无线麦克斯- 其他- 未知	INetworkInformation['type'] \| undefined (必填)	`-`

INetworkInformation

export interface INetworkInformation extends EventTarget {
  readonly downlink: number;
  readonly downlinkMax: number;
  readonly effectiveType: 'slow-2g' | '2g' | '3g' | '4g';
  readonly rtt: number;
  readonly saveData: boolean;
  readonly type: 'bluetooth' | 'cellular' | 'ethernet' | 'none' | 'wifi' | 'wimax' | 'other' | 'unknown';
  onChange: (event: Event) => void;
}