[譯]使用 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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。