Õppige, kuidas kasutada Reacti kohandatud hooke komponentide loogika eraldamiseks ja korduvkasutamiseks, parandades koodi hooldatavust, testitavust ja üldist rakenduse arhitektuuri.
Reacti kohandatud hookid: Komponentide loogika korduvkasutuseks eraldamine
Reacti hookid on muutnud viisi, kuidas me Reacti komponente kirjutame, pakkudes elegantsemat ja tõhusamat viisi oleku ja kõrvalmõjude haldamiseks. Erinevate saadaolevate hookide hulgas paistavad kohandatud hookid silma kui võimas tööriist komponentide loogika eraldamiseks ja korduvkasutamiseks. See artikkel pakub põhjalikku juhendit Reacti kohandatud hookide mõistmiseks ja rakendamiseks, võimaldades teil luua hooldatavamaid, testitavamaid ja skaleeritavamaid rakendusi.
Mis on Reacti kohandatud hookid?
Sisuliselt on kohandatud hook JavaScripti funktsioon, mille nimi algab "use" ja mis võib kutsuda teisi hooke. See võimaldab teil komponentide loogikat eraldada korduvkasutatavatesse funktsioonidesse, välistades seeläbi koodi dubleerimise ja edendades puhtamat komponentide struktuuri. Erinevalt tavalistest Reacti komponentidest ei renderda kohandatud hookid ühtegi kasutajaliidest; nad lihtsalt kapseldavad loogikat.
Mõelge neile kui korduvkasutatavatele funktsioonidele, mis pääsevad juurde Reacti oleku- ja elutsükli funktsioonidele. Need on fantastiline viis olekupõhise loogika jagamiseks erinevate komponentide vahel, ilma et peaksite kasutama kõrgema järgu komponente või renderdama atribuute, mis võivad sageli viia raskesti loetava ja hooldatava koodini.
Miks kasutada kohandatud hooke?
Kohandatud hookide kasutamise eelised on arvukad:
- Korduvkasutatavus: Kirjutage loogika üks kord ja kasutage seda mitmes komponendis. See vähendab oluliselt koodi dubleerimist ja muudab teie rakenduse hooldatavamaks.
- Parem koodikorraldus: Kompleksse loogika eraldamine kohandatud hookidesse puhastab teie komponendid, muutes need lihtsamini loetavaks ja mõistetavaks. Komponendid muutuvad rohkem keskendunuks oma peamistele renderdamiskohustustele.
- Parem testitavus: Kohandatud hooke on lihtne eraldi testida. Saate hooki loogikat testida ilma komponenti renderdamata, mis viib robustsemate ja usaldusväärsemate testideni.
- Suurem hooldatavus: Kui loogika muutub, peate seda värskendama ainult ühes kohas – kohandatud hookis – selle asemel igas komponendis, kus seda kasutatakse.
- Vähem tüüpilist koodi: Kohandatud hookid võivad kapseldada levinud mustrid ja korduvad ülesanded, vähendades teie komponentides kirjutatava tüüpilise koodi hulka.
Teie esimese kohandatud hooki loomine
Illustreerime kohandatud hooki loomist ja kasutamist praktilise näitega: andmete hankimine API-st.
Näide: useFetch
- Andmete hankimise hook
Kujutage ette, et peate oma Reacti rakenduses sageli hankima andmeid erinevatest API-dest. Selle asemel, et hankimisloogikat igas komponendis korrata, saate luua useFetch
hooki.
import { useState, useEffect } from 'react';
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const abortController = new AbortController();
const signal = abortController.signal;
const fetchData = async () => {
setLoading(true);
try {
const response = await fetch(url, { signal: signal });
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const json = await response.json();
setData(json);
setError(null); // Clear any previous errors
} catch (error) {
if (error.name === 'AbortError') {
console.log('Fetch aborted');
} else {
setError(error);
}
setData(null); // Clear any previous data
} finally {
setLoading(false);
}
};
fetchData();
return () => {
abortController.abort(); // Cleanup function to abort the fetch on unmount or URL change
};
}, [url]); // Re-run effect when the URL changes
return { data, loading, error };
}
export default useFetch;
Selgitus:
- Oleku muutujad: Hook kasutab andmete, laadimise oleku ja veao oleku haldamiseks
useState
. - useEffect:
useEffect
hook teostab andmete hankimise, kuiurl
atribuut muutub. - Veatöötlus: Hook sisaldab veatöötlust, et püüda võimalikke vigu hankimisoperatsiooni ajal. Vastuse edu tagamiseks kontrollitakse olekukoodi.
- Laadimise olek:
loading
olekut kasutatakse näitamaks, kas andmeid veel hankitakse. - AbortController: Kasutab AbortController API-t, et tühistada hankimispäring, kui komponent demonteeritakse või URL muutub. See hoiab ära mälu lekke.
- Tagastusväärtus: Hook tagastab objekti, mis sisaldab
data
,loading
jaerror
olekuid.
useFetch
hooki kasutamine komponendis
Nüüd vaatame, kuidas seda kohandatud hooki Reacti komponendis kasutada:
import React from 'react';
import useFetch from './useFetch';
function UserList() {
const { data: users, loading, error } = useFetch('https://jsonplaceholder.typicode.com/users');
if (loading) return <p>Loading users...</p>;
if (error) return <p>Error: {error.message}</p>;
if (!users) return <p>No users found.</p>;
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name} ({user.email})</li>
))}
</ul>
);
}
export default UserList;
Selgitus:
- Komponent impordib
useFetch
hooki. - See kutsub hooki koos API URL-iga.
- See dekonstrueerib tagastatud objekti, et saada juurdepääs
data
(nimeliseltusers
),loading
jaerror
olekutele. - See renderdab tinglikult erinevat sisu
loading
jaerror
olekute põhjal. - Kui andmed on saadaval, renderdab see kasutajate loendi.
Kohandatud hookide täiustatud mustrid
Lihtsast andmete hankimisest kaugemale võib kohandatud hooke kasutada keerulisema loogika kapseldamiseks. Siin on mõned täiustatud mustrid:
1. Olekuhaldus useReducer
abil
Keerukamate olekuhaldusskenaariumide jaoks saate kombineerida kohandatud hooke useReducer
iga. See võimaldab teil oleku üleminekuid hallata prognoositavamal ja organiseeritumal viisil.
import { useReducer } from 'react';
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
throw new Error();
}
}
function useCounter() {
const [state, dispatch] = useReducer(reducer, initialState);
const increment = () => dispatch({ type: 'increment' });
const decrement = () => dispatch({ type: 'decrement' });
return { count: state.count, increment, decrement };
}
export default useCounter;
Kasutamine:
import React from 'react';
import useCounter from './useCounter';
function Counter() {
const { count, increment, decrement } = useCounter();
return (
<div>
<p>Count: {count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
}
export default Counter;
2. Konteksti integreerimine useContext
abil
Kohandatud hooke saab kasutada ka React Contexti juurdepääsu lihtsustamiseks. Selle asemel, et kasutada useContext
otse oma komponentides, saate luua kohandatud hooki, mis kapseldab konteksti juurdepääsu loogika.
import { useContext } from 'react';
import { ThemeContext } from './ThemeContext'; // Assuming you have a ThemeContext
function useTheme() {
return useContext(ThemeContext);
}
export default useTheme;
Kasutamine:
import React from 'react';
import useTheme from './useTheme';
function MyComponent() {
const { theme, toggleTheme } = useTheme();
return (
<div style={{ backgroundColor: theme.background, color: theme.color }}>
<p>This is my component.</p>
<button onClick={toggleTheme}>Toggle Theme</button>
</div>
);
}
export default MyComponent;
3. Viivitus (Debouncing) ja kitsendus (Throttling)
Viivitus ja kitsendus on tehnikad, mida kasutatakse funktsiooni käivitamise kiiruse kontrollimiseks. Kohandatud hooke saab kasutada selle loogika kapseldamiseks, muutes nende tehnikate rakendamise sündmuste käsitsejatele lihtsaks.
import { useState, useEffect, useRef } 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;
}
export default useDebounce;
Kasutamine:
import React, { useState } from 'react';
import useDebounce from './useDebounce';
function SearchInput() {
const [searchValue, setSearchValue] = useState('');
const debouncedSearchValue = useDebounce(searchValue, 500); // Debounce for 500ms
useEffect(() => {
// Perform search with debouncedSearchValue
console.log('Searching for:', debouncedSearchValue);
// Replace console.log with your actual search logic
}, [debouncedSearchValue]);
const handleChange = (event) => {
setSearchValue(event.target.value);
};
return (
<input
type="text"
value={searchValue}
onChange={handleChange}
placeholder="Search..."
/>
);
}
export default SearchInput;
Parimad tavad kohandatud hookide kirjutamiseks
Selleks, et teie kohandatud hookid oleksid tõhusad ja hooldatavad, järgige neid parimaid praktikaid:
- Alustage "use"-ga: Nimetage oma kohandatud hookid alati prefiksiga "use". See konventsioon annab Reactile teada, et funktsioon järgib hookide reegleid ja seda saab kasutada funktsionaalsetes komponentides.
- Hoidke see fookustatud: Igal kohandatud hookil peaks olema selge ja konkreetne eesmärk. Vältige ülemäära keeruliste hookide loomist, mis tegelevad liiga paljude kohustustega.
- Tagastage kasulikud väärtused: Tagastage objekt, mis sisaldab kõiki väärtusi ja funktsioone, mida hooki kasutav komponent vajab. See muudab hooki paindlikumaks ja korduvkasutatavamaks.
- Töötle vigu oskuslikult: Lisage oma kohandatud hookidesse veatöötlus, et vältida komponentide ootamatut käitumist.
- Kaaluge koristamist: Kasutage
useEffect
is puhastusfunktsiooni, et vältida mälu lekkeid ja tagada nõuetekohane ressursside haldamine. See on eriti oluline, kui tegelete tellimuste, taimerite või sündmuste kuulajatega. - Kirjutage teste: Testige oma kohandatud hooke põhjalikult eraldi, et tagada nende ootuspärane käitumine.
- Dokumenteerige oma hookid: Pakkuge oma kohandatud hookidele selget dokumentatsiooni, selgitades nende eesmärki, kasutamist ja võimalikke piiranguid.
Üldised kaalutlused
Kui arendate rakendusi globaalsele publikule, pidage meeles järgmist:
- Rahvusvahelised tunnustused (i18n) ja lokaliseerimine (l10n): Kui teie kohandatud hook tegeleb kasutajale suunatud tekstide või andmetega, kaaluge, kuidas seda rahvusvaheliselt tunnustatakse ja lokaliseeritakse erinevate keelte ja piirkondade jaoks. See võib hõlmata sellise teegi kasutamist nagu
react-intl
võii18next
. - Kuupäeva ja kellaaja vorming: Olge teadlik erinevatest kuupäeva- ja kellaajavormingutest, mida kogu maailmas kasutatakse. Kasutage sobivaid vormindamisfunktsioone või teeke, et tagada kuupäevade ja kellaaegade korrektne kuvamine igale kasutajale.
- Valuuta vorming: Samamoodi töödelge valuuta vormindamist vastavalt erinevatele piirkondadele.
- Juurdepääsetavus (a11y): Veenduge, et teie kohandatud hookid ei mõjutaks negatiivselt teie rakenduse juurdepääsetavust. Kaaluge kasutajaid, kellel on puue, ja järgige juurdepääsetavuse parimaid praktikaid.
- Jõudlus: Olge teadlik oma kohandatud hookide potentsiaalsetest jõudlusmõjudest, eriti kui tegelete keeruka loogika või suurte andmekogumitega. Optimeerige oma koodi, et tagada selle hea jõudlus erinevates asukohtades erineva võrgukiirusega kasutajate jaoks.
Näide: Rahvusvaheliselt tunnustatud kuupäeva vormindamine kohandatud hookiga
import { useState, useEffect } from 'react';
import { DateTimeFormat } from 'intl';
function useFormattedDate(date, locale) {
const [formattedDate, setFormattedDate] = useState('');
useEffect(() => {
try {
const formatter = new DateTimeFormat(locale, {
year: 'numeric',
month: 'long',
day: 'numeric',
});
setFormattedDate(formatter.format(date));
} catch (error) {
console.error('Error formatting date:', error);
setFormattedDate('Invalid Date');
}
}, [date, locale]);
return formattedDate;
}
export default useFormattedDate;
Kasutamine:
import React from 'react';
import useFormattedDate from './useFormattedDate';
function MyComponent() {
const today = new Date();
const enDate = useFormattedDate(today, 'en-US');
const frDate = useFormattedDate(today, 'fr-FR');
const deDate = useFormattedDate(today, 'de-DE');
return (
<div>
<p>US Date: {enDate}</p>
<p>French Date: {frDate}</p>
<p>German Date: {deDate}</p>
</div>
);
}
export default MyComponent;
Kokkuvõte
Reacti kohandatud hookid on võimas mehhanism komponentide loogika eraldamiseks ja korduvkasutamiseks. Kohandatud hooke kasutades saate kirjutada puhtamat, hooldatavamat ja testitavamat koodi. Kui saate Reactiga üha enam tuttavaks, parandab kohandatud hookide omandamine teie võimet luua keerukaid ja skaleeritavaid rakendusi. Pidage meeles, et järgige parimaid praktikaid ja kaaluge globaalseid tegureid kohandatud hookide väljatöötamisel, et tagada nende tõhusus ja kättesaadavus mitmekesise publiku jaoks. Võtke omaks kohandatud hookide jõud ja tõstke oma Reacti arendusoskusi!