文章预览
在现代 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);
………………………………
