下载掌阅APP，畅读海量书库
立即打开
问题
假设用户正在手机上使用你的应用程序，当他进入没有网络的地铁时，你该如何检查对方的网络连接是否断开呢？有没有一种对React友好的更新界面的方式可用来通知用户网络连接不畅，或者禁用一些需要网络的功能？
解决方案
我们将创建一个名为useOnline的Hook，用以判断网络的连接状态。我们需要编写在浏览器失去或恢复到网络连接时运行的代码。刚好，浏览器提供的online和offline的window/body级别的事件正是用来响应网络状态变化的。当online和offline事件被触发时，当前网络连接状态将可以通过navigator.onLine来获取，它会被相应地设置为true或false：
上述Hook通过online变量来管理网络连接状态。当Hook第一次运行时（注意空的dependency数组），我们给浏览器online/offline事件注册相应的监听器。当这两个事件中任意一个发生时，我们将online的值设置为true或false。如果更改后的值和当前online的值不一样，那么任何使用该Hook的组件都将重新渲染。
下面是一个使用该Hook的示例：
如果你运行应用程序，页面上会显示当前在线状态为ONLINE，如果断开网络连接则会显示在线状态为OFFLINE，重新连接网络后则会重新切换到ONLINE（如图3-15所示）。
图3-15：当网络关闭并重新打开时，页面将重新渲染
讨论
需要注意的是，这个Hook检查的是浏览器与网络的连接，并不检查它是否正常连接到服务器。如果你想要检查服务器是否正在正常运行，那么你需要编写额外的代码。
你可以从GitHub网站（ https://oreil.ly/9hkSA ）下载本解决方案的源代码。