日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

文本已經(jīng)過原作者 Grégory D'Angelo 授權(quán)翻譯。

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供猇亭網(wǎng)站建設(shè)、猇亭做網(wǎng)站、猇亭網(wǎng)站設(shè)計(jì)、猇亭網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、猇亭企業(yè)網(wǎng)站模板建站服務(wù)，十年猇亭做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

React hooks

React hooks 已經(jīng)在16.8版本引入到庫中。它允許我們在函數(shù)組件中使用狀態(tài)和其他React特性，這樣我們甚至不需要再編寫類組件。

實(shí)際上，Hooks 遠(yuǎn)不止于此。

Hooks 可以將組件內(nèi)的邏輯組織成可重用的獨(dú)立單元。

Hooks 非常適合 React 組件模型和構(gòu)建應(yīng)用程序的新方法。Hooks 可以覆蓋類的所有用例，同時(shí)在整個(gè)應(yīng)用程序中提供更多的提取、測試和重用代碼的靈活性。

構(gòu)建自己的自定義React鉤子，可以輕松地在應(yīng)用程序的所有組件甚至不同應(yīng)用程序之間共享特性，這樣我們就不必重復(fù)自己的工作，從而提高構(gòu)建React應(yīng)用程序的效率。

現(xiàn)在，來看看我在開發(fā)中最常用的5個(gè)自定義鉤子，并頭開始重新創(chuàng)建它們，這樣你就能夠真正理解它們的工作方式，并確切地了解如何使用它們來提高生產(chǎn)率和加快開發(fā)過程。

我們直接開始創(chuàng)建我們的第一個(gè)自定義React Hooks。

useFetch

獲取數(shù)據(jù)是我每次創(chuàng)建React應(yīng)用時(shí)都會(huì)做的事情。我甚至在一個(gè)應(yīng)用程序中進(jìn)行了好多個(gè)這樣的重復(fù)獲取。

不管我們選擇哪種方式來獲取數(shù)據(jù)，Axios、Fetch API，還是其他，我們很有可能在React組件序中一次又一次地編寫相同的代碼。

因此，我們看看如何構(gòu)建一個(gè)簡單但有用的自定義 Hook，以便在需要在應(yīng)用程序內(nèi)部獲取數(shù)據(jù)時(shí)調(diào)用該 Hook。

okk,這個(gè) Hook 我們叫它 useFetch。

這個(gè) Hook 接受兩個(gè)參數(shù)，一個(gè)是獲取數(shù)據(jù)所需查詢的URL，另一個(gè)是表示要應(yīng)用于請(qǐng)求的選項(xiàng)的對(duì)象。

 
 
 
 

  
  
  
  
import { useState, useEffect } from 'react'; 
  
  
  
  
 
  
  
  
  
const useFetch = (url = '', options = null) => {}; 
  
  
  
  
 
  
  
  
  
export default useFetch; 
 
 
 
 

獲取數(shù)據(jù)是一個(gè)副作用。因此，我們應(yīng)該使用useEffect Hook 來執(zhí)行查詢。

在本例中，我們使用 Fetch API來發(fā)出請(qǐng)求。我們會(huì)傳遞URL和 options。一旦 Promise 被解決，我們就通過解析響應(yīng)體來檢索數(shù)據(jù)。為此，我們使用json()方法。

然后，我們只需要將它存儲(chǔ)在一個(gè)React state 變量中。

 
 
 
 

  
  
  
  
import { useState, useEffect } from 'react'; 
  
  
  
  
 
  
  
  
  
const useFetch = (url = '', options = null) => { 
  
  
  
  
  const [data, setData] = useState(null); 
  
  
  
  
 
  
  
  
  
  useEffect(() => { 
  
  
  
  
    fetch(url, options) 
  
  
  
  
      .then(res => res.json()) 
  
  
  
  
      .then(data => setData(data)); 
  
  
  
  
  }, [url, options]); 
  
  
  
  
}; 
  
  
  
  
 
  
  
  
  
export default useFetch; 
 
 
 
 

這里，我們還需要處理網(wǎng)絡(luò)錯(cuò)誤，以防我們的請(qǐng)求出錯(cuò)。所以我們要用另一個(gè) state 變量來存儲(chǔ)錯(cuò)誤。這樣我們就能從 Hook 中返回它并能夠判斷是否發(fā)生了錯(cuò)誤。

 
 
 
 

  
  
  
  
import { useState, useEffect } from 'react'; 
  
  
  
  
 
  
  
  
  
const useFetch = (url = '', options = null) => { 
  
  
  
  
  const [data, setData] = useState(null); 
  
  
  
  
  const [error, setError] = useState(null); 
  
  
  
  
 
  
  
  
  
  useEffect(() => { 
  
  
  
  
    fetch(url, options) 
  
  
  
  
      .then(res => res.json()) 
  
  
  
  
      .then(data => { 
  
  
  
  
        if (isMounted) { 
  
  
  
  
          setData(data); 
  
  
  
  
          setError(null); 
  
  
  
  
        } 
  
  
  
  
      }) 
  
  
  
  
      .catch(error => { 
  
  
  
  
        if (isMounted) { 
  
  
  
  
          setError(error); 
  
  
  
  
          setData(null); 
  
  
  
  
        } 
  
  
  
  
      }); 
  
  
  
  
  }, [url, options]); 
  
  
  
  
}; 
  
  
  
  
 
  
  
  
  
export default useFetch; 
 
 
 
 

useFetch返回一個(gè)對(duì)象，其中包含從URL中獲取的數(shù)據(jù)，如果發(fā)生了任何錯(cuò)誤，則返回錯(cuò)誤。

 
 
 
 

  
  
  
  
return { error, data }; 
 
 
 
 

最后，向用戶表明異步請(qǐng)求的狀態(tài)通常是一個(gè)好做法，比如在呈現(xiàn)結(jié)果之前顯示 loading。

因此，我們添加第三個(gè) state 變量來跟蹤請(qǐng)求的狀態(tài)。在請(qǐng)求之前，將loading設(shè)置為true，并在請(qǐng)求之后完成后設(shè)置為false。

 
 
 
 

  
  
  
  
const useFetch = (url = '', options = null) => { 
  
  
  
  
  const [data, setData] = useState(null); 
  
  
  
  
  const [error, setError] = useState(null); 
  
  
  
  
  const [loading, setLoading] = useState(false); 
  
  
  
  
 
  
  
  
  
  useEffect(() => { 
  
  
  
  
    setLoading(true); 
  
  
  
  
 
  
  
  
  
    fetch(url, options) 
  
  
  
  
      .then(res => res.json()) 
  
  
  
  
      .then(data => { 
  
  
  
  
        setData(data); 
  
  
  
  
        setError(null); 
  
  
  
  
      }) 
  
  
  
  
      .catch(error => { 
  
  
  
  
        setError(error); 
  
  
  
  
        setData(null); 
  
  
  
  
      }) 
  
  
  
  
      .finally(() => setLoading(false)); 
  
  
  
  
  }, [url, options]); 
  
  
  
  
 
  
  
  
  
  return { error, data }; 
  
  
  
  
}; 
 
 
 
 

現(xiàn)在，我們可以返回 loading 變量，以便在請(qǐng)求運(yùn)行時(shí)在組件中使用它來呈現(xiàn)一個(gè) loading，方便用戶知道我們正在獲取他們所請(qǐng)求的數(shù)據(jù)。

 
 
 
 

  
  
  
  
return { loading, error, data }; 
 
 
 
 

在使用 userFetch 之前，我們還有一件事。

我們需要檢查使用我們 Hook 的組件是否仍然被掛載，以更新我們的狀態(tài)變量。否則，會(huì)有內(nèi)存泄漏。

 
 
 
 

  
  
  
  
import { useState, useEffect } from 'react'; 
  
  
  
  
 
  
  
  
  
const useFetch = (url = '', options = null) => { 
  
  
  
  
  const [data, setData] = useState(null); 
  
  
  
  
  const [error, setError] = useState(null); 
  
  
  
  
  const [loading, setLoading] = useState(false); 
  
  
  
  
 
  
  
  
  
  useEffect(() => { 
  
  
  
  
    let isMounted = true; 
  
  
  
  
 
  
  
  
  
    setLoading(true); 
  
  
  
  
 
  
  
  
  
    fetch(url, options) 
  
  
  
  
      .then(res => res.json()) 
  
  
  
  
      .then(data => { 
  
  
  
  
        if (isMounted) { 
  
  
  
  
          setData(data); 
  
  
  
  
          setError(null); 
  
  
  
  
        } 
  
  
  
  
      }) 
  
  
  
  
      .catch(error => { 
  
  
  
  
        if (isMounted) { 
  
  
  
  
          setError(error); 
  
  
  
  
          setData(null); 
  
  
  
  
        } 
  
  
  
  
      }) 
  
  
  
  
      .finally(() => isMounted && setLoading(false)); 
  
  
  
  
 
  
  
  
  
    return () => (isMounted = false); 
  
  
  
  
  }, [url, options]); 
  
  
  
  
 
  
  
  
  
  return { loading, error, data }; 
  
  
  
  
}; 
  
  
  
  
 
  
  
  
  
export default useFetch; 
 
 
 
 

接下就是怎么用了?

我們只需要傳遞我們想要檢索的資源的URL。從那里，我們得到一個(gè)對(duì)象，我們可以使用它來渲染我們的應(yīng)用程序。

 
 
 
 

  
  
  
  
import useFetch from './useFetch'; 
  
  
  
  
 
  
  
  
  
const App = () => { 
  
  
  
  
  const { loading, error, data = [] } = useFetch( 
  
  
  
  
    'https://hn.algolia.com/api/v1/search?query=react' 
  
  
  
  
  ); 
  
  
  
  
 
  
  
  
  
  if (error) return 
Error!
; 
  
  
  
  
  if (loading) return 
Loading...
; 
  
  
  
  
 
  
  
  
  
  return ( 
  
  
  
  
    
 
  
  
  
  
      
 
  
  
  
  
        {data?.hits?.map(item => ( 
  
  
  
  
           
  
  
  
  
            {item.title} 
  
  
  
  
          
 
  
  
  
  
        ))}