[译]使用 React Hook 检查网络链接状态

• 原文地址：使用 React Hook 检查网络链接状态
• 原文做者：Justin Travis Waith-Mair
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：Jerry-FD
• 校对者：TiaossuP、Stevens1995

使用 React Hook 检查网络链接状态

前端开发是一项包含诸多挑战的工做。这项有趣的工做诞生于这个充满设计、用户体验和工程学的世界。咱们做为前端开发者的工做是要运用设计、UX 和 UI 逻辑来给用户“打造”一个温馨的体验。

随着高速专用网络变得愈来愈普及，网络的正常链接已经习觉得常了，可是有一个常常被忽视的问题，当你的用户失去网络链接的时候，你会怎么作，你会给用户什么样的体验。许多时候，咱们认为保证网络链接是理所固然的，但现实却并不老是这样。愈来愈多的页面是由移动设备所展现的，这种网络可不能说是稳定的。Wifi 确实越来普及了，可是 Wifi 的死区也的确存在。就算是物理链接的网线也有可能会被踢掉而失去链接。

这篇文章的重点不是要深刻到 UI/UX 中去讨论当用户丢失链接时怎么作才是最佳实践，相反，我是要帮你越过最大的障碍：在 React Component 的环境里，准确地判断你是否处于网络链接状态。

Navigator 对象

我认为在咱们深刻了解怎么使用 hook 来实现这个具体功能以前，先来了解 JavaScript 是如何断定当前是否处于有网络的状态很是有意义。这个信息能够经过 Navigator 对象找到。那么什么是 Navigator 对象？能够简单的把它当作是一个只可读取的数据，它根据你的数据，包含当前浏览器的状态和特性。它有定位、userAgent 和一些其余的属性，其中就包括你当前是否处于网络链接状态。和往常同样，我建议你在 MDN 上查阅关于 Navigator 对象的文档。

你能够从全局的 window 对象上获取 Navigator 对象：window.navigator 从这里你能够随之得到其中存在的一项或多项属性。咱们想要获取的是 onLine 这个属性。这里我特别强调一下。它不是 online，它是驼峰命名的，onLine。

在 Hook 中使用

显然咱们的首要任务是须要一些状态来跟踪记录咱们是否在线的状态以及把它从咱们的自定义 hook 中 return 出来：

import {useState} from 'react';

function useNetwork(){
    const [isOnline, setOnline] = useState(window.navigator.onLine);
 
    return isOnline;
}
复制代码

当组件正常挂载时这样作没有问题，可是若是当用户在渲染完成以后掉线咱们该怎么作呢？幸运的是，咱们能够监听两个事件，触发时以更新状态。为了达到这个效果咱们须要使用 useEffect hook：

function useNetwork(){

const [isOnline, setNetwork] = useState(window.navigator.onLine);

useEffect(() => {

window.addEventListener("offline", 
    () => setNetwork(window.navigator.onLine)
);

window.addEventListener("online", 
    () => setNetwork(window.navigator.onLine)
);

});

return isOnline;

};
复制代码

如你所见咱们监听了两个事件，offline 和 online ，当事件触发的时候随之更新状态。处理过 hooks 和事件监听的同窗会马上注意到两个问题。首先是咱们须要从这个 useEffect 回调函数中 return 一个清理函数，这样的话 React 能够帮助咱们移除事件的监听。

其次是想要依次移除事件的监听，你须要提供同一个函数，这样它才能明确哪个监听器应该被移除。传入另外一个看起来同样的箭头函数不会如期移除事件监听，就算这些监听函数‘长得同样’、‘功能同样‘也不行。因此下面是咱们更新后的 hook：

function useNetwork(){

   const [isOnline, setNetwork] = useState(window.navigator.onLine);

   const updateNetwork = () => {

      setNetwork(window.navigator.onLine);

   };

   useEffect(() => {

      window.addEventListener("offline", updateNetwork);

      window.addEventListener("online", updateNetwork);

      return () => {

         window.removeEventListener("offline", updateNetwork);

         window.removeEventListener("online", updateNetwork);

      };

   });

   return isOnline;

};
复制代码

咱们如今把函数保存在了变量里面，以此咱们能够深刻监听和解绑。如今咱们已经准备好根据用户是否在线的状态来为用户打造一个独特的体验了。

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。