在现代 Web 应用中，实时监测用户的在线状态对于提供良好的用户体验至关重要。无论是离线功能还是网络状态提示，都需要准确地知道用户的连接状态。useNavigatorOnLine 钩子提供了一种简单而有效的方式来在 React 组件中监测和响应网络状态的变化。这个自定义钩子不仅封装了浏览器的在线/离线 API，还能够实时更新组件状态。以下是如何实现和使用这个自定义钩子：
const getOnLineStatus = () =>
typeof navigator !== 'undefined' && typeof navigator.onLine === 'boolean'
? navigator.onLine
: true;
const useNavigatorOnLine = () => {
const [status, setStatus] = React.useState(getOnLineStatus());
const setOnline = () => setStatus(true);
const setOffline = () => setStatus(false);
React.useEffect(() => {
window.addEventListener('online', setOnline);
window.addEventListener('offline', setOffline);
return () => {
window.removeEventListener('online', setOnline);
window.removeEventListener('offline', setOffline);
};
}, []);
return status;
};
const StatusIndicator = () => {
const isOnline = useNavigatorOnLine();
return <span>You are {isOnline ? 'online' : 'offline'}.</span>;
};
ReactDOM.createRoot(document.getElementById('root')).render(
<StatusIndicator />
);
这个技巧的关键点包括：
使用 navigator.onLine来初始化和检查在线状态。创建一个状态变量来存储当前的在线状态。 使用 useEffect来添加 'online' 和 'offline' 事件监听器。在组件卸载时清理事件监听器。
使用这个钩子时，需要注意以下几点：
它返回一个布尔值，表示当前的在线状态。 这个钩子会实时响应网络状态的变化。 在服务器端渲染环境中，默认返回 true。
