看原始貼文 https://devaradise.com/react-custom-hooks-best-practices/ 以閱讀目錄
如果您是 React 開發人員，您可能遇到過需要跨元件共用邏輯的情況。在這篇文章中，我們將探討什麼是自訂鉤子、何時使用它們、編寫它們的最佳實踐，以及一些使您的 React 應用程式更乾淨、更易於維護的常見用例。
有關 React 的相關貼文
自訂鉤子是一個可重複使用的函數，具有可在 React 元件之間共用的狀態邏輯。它們從前綴 use 開始，可以呼叫其中的其他鉤子，從而可以將複雜的狀態和效果邏輯抽象化為簡單的、可重複使用的函數。
React 自訂掛鉤非常適合需要在應用程式的不同部分之間共用邏輯而不重複程式碼的情況。這不僅可以使您的元件保持乾淨，還可以促進更模組化的程式碼庫。
請注意，自訂鉤子與常規 JavaScript 可重複使用函數不同。自訂鉤子是有狀態的，這意味著您應該將 React State 與 useState 鉤子或其他內建鉤子一起使用。
每當您需要跨元件重複使用狀態邏輯時，自訂掛鉤都是非常適合的，特別是對於資料擷取、表單處理和驗證等複雜任務。它們簡化了組件程式碼，增強了可讀性，並使測試和維護變得更加容易。
自訂掛鉤的另一個主要用例是當您發現自己在多個地方編寫相同的程式碼時。您可以將其提取到自訂掛鉤中並在需要的地方重複使用，而不是複製和貼上相同的邏輯。這提倡 DRY（不要重複自己）原則，使您的程式碼庫更有效率且不易出錯。
建立自訂掛鉤時，需要牢記一些最佳實踐，以確保它們有效且可維護。以下是一些關鍵準則：
自訂掛鉤的名稱始終以 use 開頭。這是一個約定，可以幫助其他 React 開發人員將這些函數識別為鉤子，確保正確應用鉤子規則。
確保你的鉤子是純函數。避免直接在鉤子內部產生副作用；相反，使用 useEffect 或類似的鉤子來管理它們。
副作用是渲染後元件中發生的任何操作或行為，並且不會直接影響當前元件渲染週期。
使用 useMemo 或 useCallback 等記憶技術來防止鉤子導致不必要的重新渲染，特別是在處理昂貴的計算或複雜的狀態更新時。
利用內建鉤子（例如 useState、useEffect、useReducer 和 useCallback）來管理自訂鉤子內的狀態和副作用。
從包含狀態、函數或您想要公開的任何值的鉤子中傳回具有一致值類型的陣列或物件。這清楚地表明了該鉤子提供了什麼以及如何使用它。
確保您的自訂掛鉤經過充分測試。使用 React 測試函式庫和 Jest 等工具編寫測試來驗證鉤子的行為。
為您的自訂掛鉤提供清晰的文件。解釋它們的作用、參數和返回值，以便其他人（和您自己）更容易使用和維護。
避免讓你的鉤子過於複雜。如果一個鉤子開始變得太複雜，請考慮將其分解為更小、更集中的鉤子。
確保你的鉤子只承擔單一責任。
在你的鉤子內優雅地處理錯誤。這確保使用這些鉤子的元件可以處理意外場景而不會中斷。
以下是您在 React 專案中可能會遇到的自訂鉤子的一些常見用例：
用於從 API 端點取得資料的自訂掛鉤可以在需要取得和顯示資料的不同元件之間重複使用。
import { useState, useEffect } from 'react';
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
async function fetchData() {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const result = await response.json();
setData(result);
} catch (err) {
setError(err);
} finally {
setLoading(false);
}
}
fetchData();
}, [url]);
return { data, loading, error };
}
const Component = () => {
const { data, loading, error } = useFetch('https://example.com/api/path');
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
return (
<div>
<h1>Data:</h1>
<pre class="brush:php;toolbar:false">{JSON.stringify(data)}
自訂掛鉤可以管理表單狀態、處理驗證並提供提交處理程序，讓表單管理變得輕而易舉。
import { useState } from 'react';
function useForm(initialValues) {
const [values, setValues] = useState(initialValues);
const [errors, setErrors] = useState({});
const handleChange = (event) => {
const { name, value } = event.target;
setValues({
...values,
[name]: value
});
};
const validate = (name, value) => {
if (value.trim() === '') {
setErrors((prevErrors) => ({ ...prevErrors, [name]: 'This field is required' }));
} else {
setErrors((prevErrors) => ({ ...prevErrors, [name]: '' }));
}
};
const handleSubmit = (event, callback) => {
event.preventDefault();
if (Object.values(errors).every((err) => err === '')) {
callback(values);
}
};
return { values, handleChange, handleSubmit, validate, errors };
}
const Component = () => {
const { values, errors, handleChange, handleSubmit } = useForm({ username: '', password: '' }, validate);
const submit = () => {
alert('Form submitted successfully');
};
return (
<form onSubmit={(e) => handleSubmit(e, submit)}>
<div>
<label>Username</label>
<input type='text' name='username' value={values.username} onChange={handleChange} />
{errors.username && <p>{errors.username}</p>}
</div>
<button type='submit'>Submit</button>
</form>
);
};
管理使用者驗證狀態，包括登入、登出、檢查使用者是否通過身份驗證。
import { useState, useEffect } from 'react';
function useAuth() {
const [user, setUser] = useState(null);
useEffect(() => {
const loggedUser = localStorage.getItem('user');
if (loggedUser) {
setUser(JSON.parse(loggedUser));
}
}, []);
const login = (userData) => {
setUser(userData);
// call login api here
localStorage.setItem('user', JSON.stringify(userData));
};
const logout = () => {
setUser(null);
localStorage.removeItem('user');
};
return { user, login, logout };
}
用於追蹤視窗大小變化的自訂掛鉤，這對於響應式設計非常有用。
import { useState, useEffect } from 'react';
function useWindowSize() {
const [size, setSize] = useState({
width: window.innerWidth,
height: window.innerHeight
});
useEffect(() => {
const handleResize = () => {
setSize({
width: window.innerWidth,
height: window.innerHeight
});
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return size;
}
用於消除輸入更改抖動的自訂掛鉤，這對於搜尋輸入或您想要延遲函數呼叫的其他場景很有用。
import { useState, useEffect } from 'react';
function useDebounce(value, delay) {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(handler);
};
}, [value, delay]);
return debouncedValue;
}
自訂鉤子可以大大簡化您的 React 程式碼，使其更具可重複使用性和可維護性。透過遵循最佳實踐，例如避免直接在鉤子內部產生副作用並確保不會直接改變數組或對象，您可以創建可預測且易於測試的鉤子。
如果您覺得這篇文章有用，請考慮按讚並分享。如果您對自訂鉤子有意見或更多建議，請隨時在評論中發表。
謝謝您，編碼愉快！
以上是React 自訂 Hook 最佳實務：範例用例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
