最近使用hook写了一个小练习,作用就是判断网络的连接情况,并在连接情况变化的时候可以作出一系列的操作,话不多说,上代码。
function useCheckOnline() {
// navigator.onLine代表当前的网络连接情况
const [online, setOnline] = useState(navigator.onLine)
const handleOnline = () => setOnline(true)
const handleOffline = () => setOnline(false)
useEffect(() => {
window.addEventListener('online', handleOnline, false)
window.addEventListener('offline', handleOffline, false)
return () => {
window.removeEventListener('online', handleOffline)
window.removeEventListener('offline', handleOffline)
}
})
return online
}
function App() {
const online = useCheckOnline()
return (
<div className="App">
{online ? '已连接' : '连接中断'}
</div>
);
}
这样,我们就可以轻松应对网络变化,以及友好地提示用户