React est devenue l'une des bibliothèques JavaScript les plus populaires pour créer des interfaces utilisateur dynamiques. L'un des hooks les plus cruciaux de React est useEffect, qui permet aux développeurs de gérer les effets secondaires dans les composants fonctionnels. Les effets secondaires incluent des opérations telles que la récupération de données, la configuration d'abonnements ou la manipulation manuelle du DOM. Dans ce blog, nous approfondirons ce qu'est useEffect, comment il fonctionne et fournirons des exemples étape par étape pour une meilleure compréhension.
Dans React, useEffect est un hook intégré qui vous permet d'effectuer des effets secondaires dans les composants de fonction. Les effets secondaires, comme leur nom l'indique, sont des opérations qui affectent quelque chose en dehors de la fonction, comme les appels d'API, les minuteries, la journalisation ou la mise à jour du DOM.
Avant l'introduction des hooks dans React 16.8, vous deviez utiliser des composants de classe et des méthodes de cycle de vie telles que composantDidMount, composantDidUpdate et composantWillUnmount pour gérer les effets secondaires. Désormais, avec useEffect, ces événements du cycle de vie sont combinés en une seule fonction pour les composants fonctionnels.
useEffect est un hook puissant pour gérer les effets secondaires dans React pour plusieurs raisons :
Le hook useEffect accepte deux arguments :
Voici une structure de base :
useEffect(() => {
// Side effect logic goes here
return () => {
// Optional cleanup function
};
}, [/* Dependencies go here */]);
import React, { useState, useEffect } from 'react';
function ExampleComponent() {
const [data, setData] = useState(null);
useEffect(() => {
// Fetching data when the component mounts
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then((response) => response.json())
.then((json) => setData(json));
// Optional cleanup (in this case, not needed)
return () => {
// Cleanup logic if necessary
};
}, []); // Empty array means this effect will only run once when the component mounts
return <div>{data ? data.title : 'Loading...'}</div>;
}
Dans cet exemple, les données sont récupérées à partir d'une API lors du premier rendu du composant et le résultat est affiché dans l'interface utilisateur. Puisque nous transmettons un tableau de dépendances vide, cet effet ne s'exécute qu'une seule fois après le premier rendu.
En contrôlant le moment où useEffect s'exécute, nous pouvons optimiser les performances et garantir que les effets secondaires se produisent au bon moment.
Tous les effets ne nécessitent pas de nettoyage. Le nettoyage n'est nécessaire que lorsque vous devez supprimer ou réinitialiser quelque chose après l'exécution de l'effet, comme effacer les minuteries ou vous désabonner des flux de données.
Par exemple, voici un scénario dans lequel aucun nettoyage n'est nécessaire :
import React, { useState, useEffect } from 'react';
function NoCleanupEffect() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('Effect without cleanup runs every time the count changes');
}, [count]); // Runs every time `count` changes
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
Dans ce cas, l'effet s'exécute à chaque fois que l'état du comptage change. Puisque nous ne configurons pas d’abonnements ni ne gérons de ressources externes, aucun nettoyage n’est nécessaire.
Si votre effet implique la configuration d'abonnements ou de minuteries, vous devrez probablement nettoyer après l'effet. Par exemple, imaginez un scénario dans lequel nous souhaitons configurer une minuterie :
import React, { useState, useEffect } from 'react';
function TimerComponent() {
const [time, setTime] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setTime((prevTime) => prevTime + 1);
}, 1000);
// Cleanup function to clear the timer
return () => {
clearInterval(interval);
};
}, []); // Empty dependency array: effect runs once, and cleanup occurs when the component unmounts
return <div>{time} seconds have passed</div>;
}
Voici ce qui se passe :
Explorons quelques scénarios courants dans lesquels useEffect est particulièrement utile.
La récupération de données lors du montage du composant est l'un des cas d'utilisation les plus courants de useEffect.
useEffect(() => {
fetchData();
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const result = await response.json();
setData(result);
}
}, []); // Empty dependency array means it runs once when the component mounts
Vous pouvez utiliser useEffect pour manipuler manuellement le DOM après le rendu, même si cela doit être fait avec parcimonie puisque React gère le DOM efficacement.
useEffect(() => {
document.title = `You clicked ${count} times`;
}, [count]); // Updates the document title whenever `count` changes
Si vous disposez de ressources telles que des abonnements ou des écouteurs d'événements qui doivent être nettoyées, vous pouvez utiliser la fonction de retour dans useEffect pour gérer cela.
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, []); // Cleanup listener when the component unmounts
1. What happens if I omit the dependency array in useEffect?
If you omit the dependency array, useEffect will run after every render, which can cause performance issues for expensive side effects like API calls.
2. Can I run useEffect only once?
Yes, passing an empty dependency array [] ensures that the effect runs only once after the component mounts.
3. What is the cleanup function in useEffect?
The cleanup function is a way to undo the effect when the component unmounts or before the effect runs again. It’s useful for cleaning up timers, event listeners, or subscriptions.
In conclusion, useEffect is a powerful and flexible hook that simplifies managing side effects in React. By controlling when side effects run and cleaning up when necessary, you can optimize your components and avoid unnecessary re-renders or memory leaks. Experiment with the examples above to master the art of side effect management!
以上がReact の useEffect フックの簡素化: プロのようにサイドエフェクトを管理の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
