在 React 中建立自定義 Hook 的最佳技巧

react 的自定義 hooks 是從元件中刪除可重用功能的有效工具。它們支援程式碼中的 dry（不要重複）、可維護性和整潔性。但開發有用的自定義鉤子需要牢牢掌握 react 的基本思想和推薦程式。在這篇文章中，我們將討論在 react 中開發自定義鉤子的一些最佳策略，並舉例說明如何有效地應用它們。1。瞭解 hooks 的用途在深入建立自定義掛鉤之前，瞭解什麼是掛鉤以及它們存在的原因至關重要。 hooks 允許您在功能元件中使用狀態和其他 react 功能。自定義掛鉤使您能夠將元件邏輯提取到可重用的函式中，這些函式可以在多個元件之間共享。示例：基本自定義 hook這是管理計數器的自定義掛鉤的簡單示例：import { usestate } from 'react';function usecounter(initialvalue = 0) { const [count, setcount] = usestate(initialvalue); const increment = () => setcount(prevcount => prevcount + 1); const decrement = () => setcount(prevcount => prevcount - 1); const reset = () => setcount(initialvalue); return { count, increment, decrement, reset };}// usage in a component// const { count, increment, decrement, reset } = usecounter(10);登入後複製2。遵循命名約定react 有一個約定，自定義掛鉤應以“use”一詞開頭。這不僅僅是一種風格選擇——react 依賴於這個約定來自動應用鉤子規則（比如不有條件地呼叫它們）。提示：始終使用 use 來啟動自定義鉤子，以確保 react 知道它是一個鉤子。3。保持鉤子純淨自定義鉤子應該是純函式，這意味著它們不應該有修改全域性變數或直接與外部系統互動等副作用。如果需要副作用，例如進行 api 呼叫，則應使用內建 react 鉤子（如 useeffect）在鉤子內處理它們。示例：具有副作用的 hookimport { usestate, useeffect } from 'react';function usefetchdata(url) { const [data, setdata] = usestate(null); const [error, seterror] = usestate(null); const [loading, setloading] = usestate(true); useeffect(() => { const fetchdata = async () => { try { const response = await fetch(url); const result = await response.json(); setdata(result); } catch (err) { seterror(err); } finally { setloading(false); } }; fetchdata(); }, [url]); return { data, error, loading };}// usage in a component// const { data, error, loading } = usefetchdata('https://api.example.com/data');登入後複製4。利用現有的 hook建立自定義掛鉤時，請確保利用現有的 react 掛鉤，例如 usestate、useeffect、usecontext 等。這確保您的自定義鉤子是可組合的，並且可以與 react 的內建功能無縫協作。示例：組合 hook這是一個結合 usestate 和 useeffect 來管理本地儲存的自定義鉤子：import { usestate, useeffect } 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.error(error); return initialvalue; } }); useeffect(() => { try { window.localstorage.setitem(key, json.stringify(storedvalue)); } catch (error) { console.error(error); } }, [key, storedvalue]); return [storedvalue, setstoredvalue];}// usage in a component// const [name, setname] = uselocalstorage('name', 'john doe');登入後複製5。可重用性和組合建立自定義掛鉤的主要原因之一是提高可重用性。一個好的自定義鉤子應該能夠跨多個元件使用，而不需要進行大量修改。此外，鉤子可以組合在一起以構建更復雜的邏輯。提示：專注於提取可能在多個元件之間重用的邏輯。6。記錄你的 hook像任何程式碼一樣，您的自定義掛鉤應該有詳細的文件記錄。包括解釋該鉤子的作用、它接受什麼引數、它返回什麼以及它可能產生的任何副作用的註釋。這使其他開發人員（以及未來的您）更容易正確理解和使用您的鉤子。示例：記錄 hook/** * usecounter * * a custom hook to manage a counter. * * @param {number} initialvalue - initial value of the counter. * @returns {object} { count, increment, decrement, reset } - current count and functions to modify it. */function usecounter(initialvalue = 0) { // implementation}登入後複製7。測試你的 hook測試對於確保您的自定義掛鉤按預期執行至關重要。使用 react-hooks-testing-library 或 jest 等測試庫為您的鉤子編寫單元測試。示例：hook 的基本測試import { renderHook, act } from '@testing-library/react-hooks';import useCounter from './useCounter';test('should increment and decrement counter', () => { const { result } = renderHook(() => useCounter(0)); act(() => { result.current.increment(); }); expect(result.current.count).toBe(1); act(() => { result.current.decrement(); }); expect(result.current.count).toBe(0);});登入後複製在整個應用程式中抽象和重用功能的一種有效技術是在 react 中使用自定義掛鉤。您可以構建可靠且可維護的鉤子，透過理解鉤子的用途、遵守命名約定、保持鉤子純淨、利用現有鉤子、保證可重用性、文件化和測試來改進您的 react 開發過程。 以上就是在 React 中建立自定義 Hook 的最佳技巧的詳細內容，更多請關注我的其它相關文章！