React:創建用於獲取數據的自定義Hook

Hook 是 React 16.8 的新增特性。它可以讓你在不編寫 class 的情況下使用 state 以及其他的 React 特性。

通過自定義 Hook，可以將組件邏輯提取到可重用的函數中。自定義 Hook 是一個函數，其名稱以 “use” 開頭，函數內部可以調用其他的 Hook。

我們要寫一個Hook，先要思考它應該具備哪些功能。獲取接口數據需要一個超時時間跟蹤加載的狀態，接口可能本身報錯，我們需要進行錯誤處理。然後編寫函數確定輸入的參數和輸出的結果。

import React, { useState } from 'react';


function useFetchData(utl, timeout) {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(false)
  return [data, loading, error]
}

1.我們定義了useFetchData函數，該函數根據自定義Hook命名，並接收url和timeout值2.使用useState定義了請求數據，加載狀態和錯誤狀態3.最後返回所有狀態變量

接下來開始發送請求

function useFetchData(url, timeout) {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(false)
  async function load() {
    setLoading(true);
    try {
      const instance = axios.create();
      const result = await instance.get(url, { timeout });
      setData(result)
    } catch (error) {
      setError(true)
    }
    setLoading(false)
  }
  return [data, loading, error, load]
}

1.我們將loading設置爲true，並且僅在此函數的最後將其設置爲false2.我們在實際API調用周圍使用了一個try…catch塊來捕獲所有錯誤3.我們使用axios庫向URL發出實際請求，並提供超時值4.如果獲取數據成功，則將數據設置爲結果，如果數據獲取失敗，則將error設置爲true

如果僅在函數組件聲明中調用load函數會發生什麼？該函數將更改組件的狀態，從而觸發重新渲染，這將再次執行加載，並…

因此，需要從外部調用該函數-我們需要將其導出到使用此鉤子的組件。

每當調用該組件時，都應將其狀態重置爲初始值。

function useFetchData(url, timeout) {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(false)
  function init() {
    setData([])
    setLoading(false)
    setError(false)
  }
  async function load() {
    init()
    setLoading(true);
    try {
      const instance = axios.create();
      const result = await instance.get(url, { timeout });
      setData(result)
    } catch (error) {
      setError(true)
    }
    setLoading(false)
  }
  return [data, loading, error, load]
}

目前爲止，在 React 中有兩種流行的方式來共享組件之間的狀態邏輯: render props 和高階組件，現在 Hook 也可以讓你不增加組件的情況下解決相同問題的。