在 React 專案中,我們經常會使用到 React 自帶的幾個內建 Hooks，如 useState，useContext 和useEffect。但有時，我們可能希望有一個特定目的的 Hook ：例如取得資料 useData，取得連接 useConnect 等。雖然在 React 中找不到這些 Hooks，但 React 提供了非常靈活的方式讓你為自己的需求來創(chuàng)建自己的自訂 Hooks。

如何自訂Hooks

在React 中你必須遵循以下命名約定:

• React Component: React 元件名稱必須以大寫字母開頭，如StatusBar 和SaveButton。 React元件也需要 回傳 一些React知道如何渲染的東西，像是 JSX 。

• React Hook: Hook 名必須以use 開頭，後面跟著一個大寫字母，例如useState (內建)或useStatus (自訂)。與 React 元件不同的是自訂 Hook 可以傳回任意值。

這個命名約定確保你始終可以查看元件，並了解其狀態(tài)、效果以及其他React 特性可能「隱藏」的位置。例如，如果你在元件中看到 getColor() 函數調用，你可以確定它不可能包含 React state，因為其名稱不以use開頭。但是，像 useStatus() 這樣的函數呼叫很可能包含對其他 Hooks 的呼叫！

元件之間共享邏輯

The code inside them describes what they want to do rather than how to do it .

自訂Hooks 的核心是共享元件之間的邏輯。使用自訂 Hooks 能夠減少重複的邏輯，更重要的是，自訂 Hooks 內部的程式碼描述了它們想做什麼，而不是如何做。當你將邏輯提取到自訂Hooks 中時，你可以隱藏如何處理某些"外部系統"或瀏覽器API 的呼叫的細節(jié),元件的程式碼表達的是你的意圖，而不是實作細節(jié)。 下面是一個簡單的範例：

import { useState } from 'react';
function useCounter(initialValue) {
  const [count, setCount] = useState(initialValue);
  function increment() {
    setCount(count + 1);
  }
  return [count, increment];
}

這個自訂Hook 叫做?useCounter，它接受一個初始值作為參數，並且傳回一個數組，包含目前的計數值和一個增加計數的函數。 使用自訂 Hook 非常簡單，只需要在函數元件中呼叫它。以下是使用?useCounter?的範例：

import React from 'react';
import useCounter from './useCounter';

function Counter() {
  const [count, increment] = useCounter(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

在這個範例中，我們匯入了?useCounter，並在元件中呼叫它。我們將傳回的陣列解構為?count?和?increment，然後在元件中使用它們。

自訂 Hooks 允許你共享有狀態(tài)邏輯，而不是狀態(tài)本身

自訂 Hooks 允許共享有狀態(tài)邏輯，但不能共享狀態(tài)本身。每個對 Hook 的呼叫都完全獨立於對同一個 Hook 的其他呼叫。 以上面的useCounter 為例:

import useCounter from './useCounter';
function Counter() {
	const [count1, increment1] = useCounter(0);
	const [count2, increment2] = useCounter(100);
  return (
    <div>
      <p>Count1: {count1}</p>
      <button onClick={increment1}>Increment1</button>
       <p>Count2: {count2}</p>
      <button onClick={increment2}>Increment2</button>
    </div>
  );
}

當我們點擊Increment2 時，並不會影響count1 ,因為每一個 useCounter 的呼叫都是獨立的，其內部狀態(tài)也是獨立的。

分類

功能型Hooks

以實現特定功能或目的,與具體業(yè)務無關:

useWindowWidth

該hook 返回視窗寬度的值。

import { useState, useEffect } from 'react';
function useWindowWidth() {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
  useEffect(() => {
    const handleResize = () => setWindowWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  return windowWidth;
}

useLocalStorage

該 hook 允許你在本機儲存中儲存和檢索值。

import { useState } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.log(error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      setStoredValue(value);
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.log(error);
    }
  };

  return [storedValue, setValue];
}

業(yè)務型 Hooks

useFetch

該 hook 允許你從 API 取得資料。

import { useState, useEffect } from 'react';
function useFetch(url) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
      } catch (error) {
        setError(error);
      } finally {
        setIsLoading(false);
      }
    };
    fetchData();
  }, [url]);
  return { data, error, isLoading };
}

useModal

該 hook 允許你管理模態(tài)對話方塊的狀態(tài)。

//useFetch.js
import {useState, useEffect} from 'react'
//don't forget to give a url parameter for the function.
const useFetch = (url)=>{
  const [data, setData] = useState([])
  const getData = async ()=>{
    const response = await fetch(url)
    const userdata = await response.json()
    setData(userdata)
  }
 useEffect(()=>{
    getData()
  },[url])
  //return data that we will need in other components.
  return {data};
}
export default useFetch;

在多個 Hook 之間傳遞訊息

由於 Hook 本身就是函數，因此我們可以在它們之間傳遞訊息。下面我們以useUserInfo 取得使用者資訊為例：

//useUserInfo.jsx
import { useEffect,useState } from 'react'
const useUserInfo = (userId) => {
  const [userInfo, setUserInfo] = useState({})
  useEffect(() => {
    fetch('/user')
      .then(res => res.json())
      .then(data => setUserInfo(data))
  }, [userId])
  return userInfo
}
//Home.jsx
...
const Home = ()=>{
	const [userId,setUserId] = useState('103')
	const useInfo = useUserInfo(userId)
	return (
	  <>
	     <div>name:{userInfo.name}</div>
	     <div>age:{userInfo.age}</div>
	     ...
	  </> 
	)
}

我們將使用者id 保存在userId 狀態(tài)變數中，當使用者進行某一動作#setUserId 時，由於?useState?為我們提供了?userId?狀態(tài)變數的最新值，因此我們可以將它傳遞給自訂的?useUserInfo?Hook ：

const [userId,setUserId] = useState('103')
const userInfo = useUserInfo(userId)

此時，我們的userInfo 會隨著userId ?的改變而更新。

將 event handlers 傳遞給自訂 Hooks

This section describes an experimental API that has not yet been released ?in a stable version of React. 本節(jié)描述了一個尚未在 React 穩(wěn)定版本中發(fā)布的 實驗性 API。

你可能希望讓組件自定義其行為,而不是完全地將邏輯封裝 Hooks 中，我們可以通過將 event handlers 作為參數傳遞給 Hooks,下面是一個聊天室的例子：useChatRoom 接受一個服務端 url 和 roomId,當調用這個 Hook 的時候，會進行連接，

export function useChatRoom({ serverUrl, roomId }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      showNotification('New message: ' + msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl]);
}

假設當連接成功時，你想將此邏輯移回你的組件：

export default function ChatRoom({ roomId }) {
  const [serverUrl, setServerUrl] = useState('https://localhost:1234');
  useChatRoom({
    roomId: roomId,
    serverUrl: serverUrl,
    onReceiveMessage(msg) {
      showNotification('New message: ' + msg);
    }
  });
  // ...

要做到這一點，改變你的自定義 Hook ，把 onReceiveMessage 作為它的命名選項之一:

export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      onReceiveMessage(msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl, onReceiveMessage]); // ? All dependencies declared
}

這可以工作，但是當你的自定義 Hook 接受事件處理程序時，你還可以做一個改進。 在 onReceiveMessage 上添加依賴并不理想，因為它會導致每次組件重新渲染時聊天都重新連接。將此事件處理程序包裝到 EffectEvent 中以將其從依賴項中移除:

import { useEffect, useEffectEvent } from 'react';  
// ...
export function useChatRoom({ serverUrl, roomId, onReceiveMessage }) {
  const onMessage = useEffectEvent(onReceiveMessage);
  useEffect(() => {
    const options = {
      serverUrl: serverUrl,
      roomId: roomId
    };
    const connection = createConnection(options);
    connection.connect();
    connection.on('message', (msg) => {
      onMessage(msg);
    });
    return () => connection.disconnect();
  }, [roomId, serverUrl]); // ? All dependencies declared
}

現在不會在每次重新渲染聊天室組件時進行重新連接。

開源 React Hooks 庫

• ahooks 一套由阿里巴巴開源的 React Hooks 庫，封裝了大量好用的 Hooks。
• react-use 一個必不可少的 React Hooks 集合。其包含了傳感器、用戶界面、動畫效果、副作用、生命周期、狀態(tài)這六大類的Hooks。
• useHooks 一組易于理解的 React Hook集合。
• react-recipes 一個包含流行的自定義 Hook 的 React Hooks 實用程序庫。
• Rhooks ?一組基本的 React 自定義Hooks。
• react-hanger 一組有用的 hooks，用于特定于某些基本類型的狀態(tài)更改輔助函數。
• Beautiful React Hook 一組漂亮的（希望有用的）React hooks 來加速你的組件和 hooks 開發(fā)。
• Awesome React Hooks 一個很棒的 React Hooks 資源集合，該集合包含React Hooks教程、視頻、工具，Hooks列表。其中Hooks列表中包含了眾多實用的自定義Hooks。
• SWR 一個用于獲取數據的 React Hooks 庫。只需一個Hook，就可以顯著簡化項目中的數據獲取邏輯。
• React Hook Form 一個用于表單狀態(tài)管理和驗證的 React Hooks (Web + React Native)。

總結

自定義 Hooks 可以幫助你遷移到更好的開發(fā)范式。通過將一些通用邏輯封裝在自定義 Hooks 中，你可以使組件代碼保持簡潔并專注于核心意圖,這有助于減少重復性的代碼，并使你的代碼更易于維護和更新，從而使你能夠更快速地開發(fā)新功能。

對于 Effect 而言,這樣可以使數據在 Effects 中流動的過程變得非常明確。這讓你的組件能夠專注于意圖，而不是 Effects 的具體實現。當 React 添加新功能時，你可以刪除那些 Effects 而不影響任何組件。就像設計系統一樣，你可能會發(fā)現從應用程序組件中提取常見習慣用法到自定義 Hooks 中是有非常幫助的。這將使你的組件代碼專注于意圖，并允許你避免頻繁編寫原始 Effects，這也是 React 開發(fā)者所推崇的。

（學習影片分享：程式設計基礎影片）

以上是深入理解React的自訂Hook的詳細內容。更多資訊請關注PHP中文網其他相關文章！