Maison >interface Web >js tutoriel >Niveau interne : méthodes de cycle de vie et hooks dans React
Niveau interne : méthodes de cycle de vie et hooks dans React
- PHPzoriginal
- 2024-07-18 04:24:30921parcourir
Introduction aux crochets React
Les React Hooks sont des fonctions qui vous permettent d'utiliser l'état et d'autres fonctionnalités de React dans des composants fonctionnels. Avant les hooks, la logique avec état n'était disponible que dans les composants de classe. Les hooks fournissent une API plus directe aux concepts React que vous connaissez déjà, tels que l'état, les méthodes de cycle de vie et le contexte.
Crochets clés dans React
utiliserÉtat
useState est un hook qui vous permet d'ajouter un état aux composants fonctionnels.
Exemple :
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
};
export default Counter;
Dans cet exemple, useState initialise la variable d'état count à 0. La fonction setCount est utilisée pour mettre à jour l'état lorsque l'on clique sur le bouton.
utiliserEffet
useEffect est un hook qui vous permet d'effectuer des effets secondaires dans des composants fonctionnels, tels que la récupération de données, l'interaction directe avec le DOM et la configuration d'abonnements. Il combine les fonctionnalités de plusieurs méthodes de cycle de vie dans les composants de classe (componentDidMount, composantDidUpdate et composantWillUnmount).
Exemple :
import React, { useState, useEffect } from 'react';
const DataFetcher = () => {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []);
return (
<div>
{data ? <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)} : 'Loading...'}
Dans cet exemple, useEffect récupère les données d'une API lors du montage du composant.
utiliserContext
useContext est un hook qui vous permet d'accéder à la valeur du contexte pour un contexte donné.
Exemple :
import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');
const ThemedComponent = () => {
const theme = useContext(ThemeContext);
return <div>The current theme is {theme}</div>;
};
export default ThemedComponent;
Dans cet exemple, useContext accède à la valeur actuelle de ThemeContext.
utiliserRéducteur
useReducer est un hook qui vous permet de gérer une logique d'état complexe dans un composant fonctionnel. C'est une alternative à useState.
Exemple :
import React, { useReducer } from 'react';
const initialState = { count: 0 };
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
return state;
}
};
const Counter = () => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
};
export default Counter;
Dans cet exemple, useReducer gère l'état du comptage avec une fonction de réduction.
Crochets personnalisés
Les hooks personnalisés vous permettent de réutiliser la logique avec état sur plusieurs composants. Un hook personnalisé est une fonction qui utilise des hooks intégrés.
Exemple :
import { useState, useEffect } from 'react';
const useFetch = (url) => {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url)
.then(response => response.json())
.then(data => setData(data));
}, [url]);
return data;
};
const DataFetcher = ({ url }) => {
const data = useFetch(url);
return (
<div>
{data ? <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)} : 'Loading...'}
Dans cet exemple, useFetch est un hook personnalisé qui récupère les données d'une URL donnée.
Modèles de crochets avancés
Gestion de l'état complexe avec useReducer
Lorsqu'il s'agit d'une logique d'état complexe impliquant plusieurs sous-valeurs ou lorsque l'état suivant dépend du précédent, useReducer peut être plus approprié que useState.
Exemple :
import React, { useReducer } from 'react';
const initialState = { count: 0 };
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
return state;
}
};
const Counter = () => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
};
export default Counter;
Dans cet exemple, useReducer gère l'état du comptage avec une fonction de réduction.
Optimiser les performances avec useMemo et useCallback
utiliserMémo
useMemo est un hook qui mémorise une valeur calculée, la recalculant uniquement lorsque l'une des dépendances change. Il permet d'optimiser les performances en évitant des calculs coûteux à chaque rendu.
Exemple :
import React, { useState, useMemo } from 'react';
const ExpensiveCalculation = ({ number }) => {
const computeFactorial = (n) => {
console.log('Computing factorial...');
return n <= 1 ? 1 : n * computeFactorial(n - 1);
};
const factorial = useMemo(() => computeFactorial(number), [number]);
return <div>Factorial of {number} is {factorial}</div>;
};
const App = () => {
const [number, setNumber] = useState(5);
return (
<div>
<input
type="number"
value={number}
onChange={(e) => setNumber(parseInt(e.target.value, 10))}
/>
<ExpensiveCalculation number={number} />
</div>
);
};
export default App;
Dans cet exemple, useMemo garantit que le calcul factoriel n'est recalculé que lorsque le nombre change.
utiliserCallback
useCallback est un hook qui mémorise une fonction, empêchant sa recréation à chaque rendu à moins que l'une de ses dépendances ne change. Il est utile pour transmettre des fonctions stables aux composants enfants qui reposent sur l'égalité de référence.
Exemple :
import React, { useState, useCallback } from 'react';
const Button = React.memo(({ onClick, children }) => {
console.log(`Rendering button - ${children}`);
return <button onClick={onClick}>{children}</button>;
});
const App = () => {
const [count, setCount] = useState(0);
const increment = useCallback(() => setCount((c) => c + 1), []);
return (
<div>
<Button onClick={increment}>Increment</Button>
<p>Count: {count}</p>
</div>
);
};
export default App;
Dans cet exemple, useCallback garantit que la fonction d'incrémentation n'est recréée que si ses dépendances changent, évitant ainsi les nouveaux rendus inutiles du composant Button.
Conclusion
Comprendre React Hooks est essentiel pour le développement React moderne. Ils vous permettent d'écrire du code plus propre et plus maintenable dans des composants fonctionnels. En maîtrisant les hooks tels que useState, useEffect, useContext et useReducer, ainsi que les modèles avancés tels que les hooks personnalisés et les optimisations de performances avec useMemo et useCallback, vous pouvez créer des applications React robustes et efficaces. En tant que stagiaire, acquérir une solide compréhension de ces concepts établira une base solide pour votre parcours dans le développement de React.
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!