Assurez-vous d'avoir les connaissances de base nécessaires dans les domaines suivants :
Connaissance de base de React
Node.js et npm
Pour démarrer un nouveau projet React à l'aide de Vite, suivez ces étapes :
je. Ouvrez votre terminal et exécutez la commande suivante pour créer un nouveau projet :
npm create vite@latest my-react-app --template react
ii. Accédez au répertoire de votre projet :
cd my-react-app
iii. Installer les dépendances : Installez les packages nécessaires à votre projet :
npm install
iv. Démarrez le serveur de développement : Exécutez le serveur de développement :
npm run dev
Votre application React sera maintenant en cours d'exécution et vous pourrez la visualiser dans votre navigateur à l'adresse http://localhost:5173.
Les hooks React sont des fonctions spéciales qui vous permettent d'utiliser l'état et d'autres fonctionnalités React dans des composants fonctionnels. Des hooks comme useState et useEffect sont essentiels pour gérer l’état et les effets secondaires.
les hooks personnalisés peuvent être décrits comme un moyen de réutiliser la logique sur plusieurs composants. Au lieu de répéter le code, vous pouvez l'encapsuler dans un hook personnalisé, ce qui rend vos composants plus propres et votre code plus facile à gérer. tout comme les hooks React, lorsque vous utilisez des hooks personnalisés, assurez-vous de commencer le nom de votre composant (utilisez suivi du nom que vous souhaitez donner au composant, par exemple useFetchData).useFetchData peut être un Hook personnalisé qui récupère les données d'une API et les renvoie à votre composant.
Comprendre les crochets :
Des hooks comme useState, useEffect et useContext vous permettent d'utiliser l'état et d'autres fonctionnalités de React sans écrire de classe. Ce sont des éléments de base qui vous permettent de gérer la logique des composants de manière modulaire.
Les hooks personnalisés vous permettent de réutiliser la logique avec état sur différents composants. Un exemple simple est un composant de compteur doté de fonctionnalités d'incrémentation, de décrémentation et de réinitialisation. Si vous avez besoin de la même logique dans plusieurs composants, la logique peut être déplacée vers un hook personnalisé. Un autre exemple couramment utilisé est un composant qui récupère des données à partir d'une API, et si vous avez besoin de la même logique dans plusieurs composants, vous pouvez déplacer cette logique vers un hook personnalisé.
Exemple : créons une application de compteur simple avec React hook(useState).in app.jsx
import React, { useState } from "react"; import "./App.css"; function App() { // usestate hooks const [counterstate, setCounterstate] = useState(0); // function for increment,decrement and reset const increment = () => { setCounterstate((prev) => prev + 1); }; const decrement = () => { setCounterstate((prev) => prev - 1); }; const reset = () => { setCounterstate(0); }; return ( <div className="container"> <div> <h1>Counter App </h1> <h2>{counterstate}</h2> <div> <button onClick={increment}>increment</button> <button onClick={decrement}>decrement</button> <button onClick={reset}>Reset</button> </div> </div> </div> ); } export default App;
dans le code ci-dessus, la logique réutilisable comprend le contre-état, l'état initial (o), l'incrémentation, la décrémentation et la fonction de réinitialisation. l'incrément ajoute 1 à l'état initial tandis que la décrémentation soustrait 1 de l'état initial, tandis que la réinitialisation réinitialise le premier état initial.
nous pouvons créer un dossier dans le dossier src nommé Hooks, puis un fichier appelé useCouter.jsx pour le hook personnalisé comme indiqué ci-dessous.
import React, { useState } from "react"; const useCounter = (initialvalue) => { const [value, setValue] = useState(initialvalue); const increment = () => { setValue((prev) => prev + 1); }; const decrement = () => { setValue((prev) => prev - 1); }; const reset = () => { setValue(initialvalue); }; return { value, increment, decrement, reset }; }; export default useCounter;
Maintenant, utilisons notre hook personnalisé dans App.jsx.
import React, { useState } from "react"; import "./App.css"; import useCounter from "./Hooks/useCounter"; function App() { const { value, increment, decrement, reset } = useCounter(0); return ( <div className="container"> <div> <h1>Counter App </h1> <h2>{value}</h2> <div> <button onClick={increment}>increment</button> <button onClick={decrement}>decrement</button> <button onClick={reset}>Reset</button> </div> </div> </div> ); } export default App;
Créons un hook personnalisé useFetch pour tous les appels d'API.
import React, { useState, useEffect } from "react"; const useFetch = (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 jsonData = await response.json(); setData(jsonData); } catch (error) { setError(error); } finally { setLoading(false); } }; fetchData(); }, [url]); return { data, error, loading }; }; export default useFetch;
dans App.jsx, nous pouvons utiliser ce hook personnalisé pour récupérer un nom d'utilisateur à partir de l'espace réservé JSON, comme indiqué ci-dessous ;
import React, { useState } from "react"; import "./App.css"; import useCounter from "./Hooks/useCounter"; import useFetch from "./Hooks/useFetch"; function App() { const { value, increment, decrement, reset } = useCounter(0); const { data, error, loading } = useFetch( "https://jsonplaceholder.typicode.com/users" ); return ( <div className="container"> <div> <h1>Counter Appp </h1> <h2>{value}</h2> {loading && <div>Loading....</div>} {error && <div>Error: {error.message}</div>} {data && data.length > 0 && ( <div> <h2>Username: {data[0].username}</h2> </div> )} <div> <button onClick={increment}>increment</button> <button onClick={decrement}>decrement</button> <button onClick={reset}>Reset</button> </div> </div> </div> ); } export default App;
L'un des principaux avantages est la réutilisabilité. Vous pouvez utiliser le même hook personnalisé dans plusieurs composants, réduisant ainsi la duplication de code.
Les hooks personnalisés vous aident à séparer la logique de l'interface utilisateur. Vos composants se concentrent sur le rendu, tandis que les hooks personnalisés gèrent la logique.
En déplaçant la logique complexe vers des hooks personnalisés, vos composants deviennent plus simples et plus faciles à comprendre.
Les hooks personnalisés doivent commencer par le mot « utiliser » pour suivre la convention de dénomination React. Cela aide également à identifier rapidement les hooks dans votre code.
Exemple : useFetch, useForm, useAuth.
Lorsque vous utilisez des hooks comme useEffect dans un hook personnalisé, assurez-vous de gérer correctement les dépendances pour éviter les bugs ou les rendus inutiles.
Optimisez vos hooks personnalisés en mémorisant des valeurs ou en utilisant des hooks comme useCallback et useMemo pour éviter de réexécuter des calculs coûteux ou de récupérer des données.
nous avons exploré le concept des hooks personnalisés et leur rôle dans la simplification et l'amélioration du développement d'applications React. En créant des hooks personnalisés, vous pouvez encapsuler et réutiliser une logique avec état, ce qui aide à garder vos composants propres et maintenables.
Découvrez le projet sur GitHub : Mon référentiel GitHub
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!