Consultez le message original https://devaradise.com/react-custom-hooks-best-practices/ pour le lire avec la table des matières
Si vous êtes un développeur React, vous avez probablement rencontré une situation dans laquelle vous devez partager la logique entre les composants. Dans cet article, nous explorerons ce que sont les hooks personnalisés, quand les utiliser, les meilleures pratiques pour les écrire et quelques cas d'utilisation courants qui rendront vos applications React plus propres et plus maintenables.
Articles connexes sur React
Un hook personnalisé est une fonction réutilisable avec une logique avec état qui peut être partagée entre les composants React. Ils commencent par l'utilisation du préfixe et peuvent appeler d'autres hooks à l'intérieur d'eux, ce qui permet d'abstraire la logique complexe des états et des effets en fonctions simples et réutilisables.
Les hooks personnalisés React sont parfaits pour les situations où vous devez partager la logique entre différentes parties de votre application sans dupliquer le code. Cela permet non seulement de garder vos composants plus propres, mais favorise également une base de code plus modulaire.
Notez qu'un hook personnalisé est différent d'une fonction réutilisable javascript standard. Le hook personnalisé est avec état, ce qui signifie que vous devez utiliser l'état de réaction avec le hook useState ou d'autres hooks intégrés.
Les hooks personnalisés conviennent parfaitement chaque fois que vous avez besoin de réutiliser une logique avec état entre des composants, en particulier pour des tâches complexes telles que la récupération de données, la gestion de formulaires et l'authentification. Ils simplifient le code de vos composants, améliorent la lisibilité et facilitent les tests et la maintenance.
Un autre cas d’utilisation privilégié des hooks personnalisés est lorsque vous vous retrouvez à écrire le même code à plusieurs endroits. Au lieu de copier et coller la même logique, vous pouvez l'extraire dans un hook personnalisé et la réutiliser partout où vous en avez besoin. Cela favorise le principe DRY (Don't Repeat Yourself), rendant votre base de code plus efficace et moins sujette aux erreurs.
Lors de la création de hooks personnalisés, il existe plusieurs bonnes pratiques à garder à l'esprit pour garantir qu'ils sont efficaces et maintenables. Voici quelques directives clés :
Commencez toujours le nom de votre hook personnalisé par use. Il s'agit d'une convention qui aide les autres développeurs React à identifier ces fonctions comme des hooks, garantissant ainsi que les règles des hooks sont appliquées correctement.
Assurez-vous que vos hooks sont de pures fonctions. Évitez les effets secondaires directement à l’intérieur de vos crochets ; à la place, gérez-les à l’aide de useEffect ou de hooks similaires.
Les effets secondaires sont toutes les opérations ou comportements qui se produisent dans un composant après le rendu et qui n'ont pas d'impact direct sur le cycle de rendu du composant actuel.
Utilisez des techniques de mémorisation telles que useMemo ou useCallback pour éviter que vos hooks ne provoquent des rendus inutiles, en particulier lorsqu'il s'agit de calculs coûteux ou de mises à jour d'état complexes.
Exploitez les hooks intégrés tels que useState, useEffect, useReducer et useCallback pour gérer l'état et les effets secondaires dans vos hooks personnalisés.
Renvoyer un tableau ou un objet avec des types de valeurs cohérents à partir de vos hooks contenant les états, les fonctions ou toute valeur que vous souhaitez exposer. Cela montre clairement ce que fournit le crochet et comment l'utiliser.
Assurez-vous que vos crochets personnalisés sont bien testés. Utilisez des outils tels que React Testing Library et Jest pour écrire des tests qui valident le comportement de vos hooks.
Fournissez une documentation claire pour vos hooks personnalisés. Expliquez ce qu'ils font, leurs paramètres et leurs valeurs de retour pour les rendre plus faciles à utiliser et à maintenir pour les autres (et pour vous-même).
Évitez de rendre vos crochets trop complexes. Si un crochet commence à devenir trop compliqué, envisagez de le diviser en crochets plus petits et plus ciblés.
Assurez-vous que vos crochets n'ont qu'une seule responsabilité.
Gérez les erreurs avec élégance dans vos hooks. Cela garantit que vos composants utilisant ces hooks peuvent gérer des scénarios inattendus sans se casser.
Voici quelques cas d'utilisation courants de hooks personnalisés que vous pourriez rencontrer dans vos projets React :
Un hook personnalisé pour récupérer des données à partir d'un point de terminaison d'API peut être réutilisé sur différents composants qui doivent récupérer et afficher des données.
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)}
Les hooks personnalisés peuvent gérer l'état du formulaire, gérer la validation et fournir des gestionnaires de soumission, ce qui rend la gestion des formulaires un jeu d'enfant.
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>
);
};
Gérer l'état d'authentification des utilisateurs, y compris la connexion, la déconnexion et la vérification si un utilisateur est authentifié.
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 };
}
Un hook personnalisé pour suivre les changements de taille de fenêtre, ce qui peut être utile pour une conception réactive.
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;
}
Un hook personnalisé pour anti-rebond des modifications d'entrée, ce qui est utile pour les entrées de recherche ou d'autres scénarios dans lesquels vous souhaitez retarder un appel de fonction.
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;
}
Les hooks personnalisés peuvent grandement simplifier votre code React en le rendant plus réutilisable et maintenable. En adhérant aux meilleures pratiques, comme éviter les effets secondaires directement à l'intérieur des hooks et en vous assurant de ne pas muter directement des tableaux ou des objets, vous pouvez créer des hooks prévisibles et faciles à tester.
Si vous avez trouvé cet article utile, pensez à l'aimer et à le partager. Si vous avez un avis ou d'autres suggestions sur les crochets personnalisés, n'hésitez pas à le poster dans les commentaires.
Merci, bon codage !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
