Guide du crochet useEffect
Découvrez comment utiliser le hook useEffect pour exécuter du code lorsqu’un état ou une valeur d’accessoire change dans notre application React.
React est livré avec quelques hooks de base pour nous permettre de créer des composants qui fonctionnent de manière dynamique. Les hooks sont des fonctions qui renvoient des valeurs et peuvent être utilisées dans des composants pour renvoyer différentes choses lorsque les valeurs réactives changent.
Dans cet article, nous verrons comment utiliser le useEffect
crochet.
Le crochet useEffect
Nous utilisons le useEffect
hook pour faire des choses lorsque des valeurs réactives changent. Les valeurs réactives incluent les valeurs d’état et d’accessoires.
On peut utiliser useEffect
pour exécuter du code lorsqu’un état ou une valeur d’accessoire change.
Par exemple, nous écrivons :
import { useEffect, useState } from "react";
export default function App() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log(count);
}, [count]);
return (
<div>
<button onClick={() => setCount((c) => c + 1)}>increment</button>
</div>
);
}
pour créer le count
état avec le useState
crochet.
Et puis nous appelons le useEffect
hook pour enregistrer la valeur de count
quand count
changements. Ensuite, nous ajoutons un bouton qui incrémente la valeur de count
par 1 quand on clique dessus. Le rappel sera appelé à chaque fois count
changements depuis que nous avons mis count
dans le tableau dans le deuxième argument de useEffect
.
Quel que soit l’état et la valeur de l’accessoire que nous y mettrons, ils seront surveillés par useEffect
et le rappel dans le premier argument sera appelé chaque fois que ces valeurs changent.
Dans le rappel, nous appelons useState
avec une fonction qui reprend le précédent count
value comme argument et renvoie la nouvelle valeur de count
dérivé de cela.
En appelant setCount
avec une fonction qui renvoie la nouvelle valeur d’état basée sur l’état précédent, nous pouvons nous assurer que nous obtenons toujours la dernière valeur d’état basée sur la valeur précédente.
Nous pouvons faire le useEffect
le rappel ne s’exécute que lorsque le composant est monté en appelant le useEffect
rappel avec un tableau vide.
Et nous pouvons faire le useEffect
le rappel du hook est exécuté chaque fois que le composant est restitué en omettant le deuxième argument lors de l’appel useEffect
.
Exécution du code de nettoyage lorsque le composant est démonté
Nous pouvons exécuter du code de nettoyage dans le useEffect
lorsque le composant se démonte. Pour ce faire, nous renvoyons une fonction qui exécute le code de nettoyage lors du démontage du composant.
Par exemple, nous écrivons :
import { useEffect, useState } from "react";
export default function App() {
const [screenSize, setScreenSize] = useState({
width: window.innerWidth,
height: window.innerHeight
});
const { width, height } = screenSize;
const onResize = () => {
setScreenSize({
width: window.innerWidth,
height: window.innerHeight
});
};
useEffect(() => {
window.addEventListener("resize", onResize);
return () => {
window.removeEventListener("resize", onResize);
};
}, []);
return (
<div>
{width}x{height}
</div>
);
}
appeler useEffect
avec une fonction qui appelle window.addEventListener
pour ajouter le onResize
fonctionner comme le resize
fonction d’écoute d’événements.
onResize
sera ensuite appelé lorsque nous redimensionnerons l’écran.
Et pour supprimer l’écouteur d’événements lors du démontage du composant, nous appelons window.removeEventListener
pour supprimer le resize
écouteur d’événement lorsque le App
le composant se démonte.
La fonction renvoyée dans le useEffect
le rappel est exécuté lorsque nous démontons le composant.
Dans onResize
nous appelons setScreenSize
mettre en place screenSize
à la largeur et à la hauteur de l’écran, nous voyons donc le width
et height
change lorsque nous redimensionnons l’écran.
Pouvoir appeler du code d’exécution lorsque le composant se monte et se démonte avec le useEffect
le rend pratique pour la synchronisation avec des systèmes externes.
Nous pouvons également manipuler des systèmes externes lorsqu’une valeur réactive change avec le useEffect
crochet.
Par exemple, nous écrivons :
import { useEffect, useRef, useState } from "react";
const ModalDialog = ({ open, children }) => {
const ref = useRef();
useEffect(() => {
const dialog = ref.current;
if (open) {
dialog.showModal();
}
return () => {
dialog.close();
};
}, [open]);
return <dialog ref={ref}>{children}</dialog>;
};
export default function App() {
const [open, setOpen] = useState(false);
return (
<div>
<button onClick={() => setOpen(true)}>Open Dialog</button>
<ModalDialog open={open}>
<p>hello world</p>
<button onClick={() => setOpen(false)}>Close Dialog</button>
</ModalDialog>
</div>
);
}
pour créer le ModalDialog
composant.
Il faut le open
accessoire et appels useEffect
qui appelle dialog.showModal
pour ouvrir la boîte de dialogue lorsque le open
l’état est vrai.
Et lorsque le composant se démonte, nous appelons dialog.close
pour fermer la boîte de dialogue.
Le ref
est attribué comme élément de dialogue ref
valeur de l’accessoire, donc ref.current
est l’élément de dialogue.
Créez des hooks personnalisés avec le hook useEffect
Le useEffect
hook est l’un des hooks de base fournis avec React. Par conséquent, nous pouvons l’utiliser pour créer nos propres hooks React personnalisés afin d’encapsuler la logique que nous réutiliserons.
Pour ce faire, il suffit de renvoyer les valeurs réactives que nous souhaitons renvoyer afin qu’elles puissent être utilisées dans les composants. Et le hook personnalisé appellera simplement d’autres hooks pour obtenir les valeurs que nous souhaitons renvoyer.
Par exemple, nous pouvons nettoyer l’exemple précédent en déplaçant le code de l’écouteur de redimensionnement dans son propre hook.
Pour ce faire, nous écrivons :
import { useEffect, useState } from "react";
const useScreenSize = () => {
const [screenSize, setScreenSize] = useState({
width: window.innerWidth,
height: window.innerHeight
});
const onResize = () => {
setScreenSize({
width: window.innerWidth,
height: window.innerHeight
});
};
useEffect(() => {
window.addEventListener("resize", onResize);
return () => {
window.removeEventListener("resize", onResize);
};
}, []);
return screenSize;
};
export default function App() {
const { width, height } = useScreenSize();
return (
<div>
{width}x{height}
</div>
);
}
Nous créons le useScreenSize
hook qui a la logique que nous avions précédemment dans le App
composant. Le useState
et useEffect
les appels sont déplacés vers useScreenSize
et ils font tous la même chose.
Et nous revenons screenSize
nous pouvons donc utiliser la valeur renvoyée dans n’importe quel composant ou un autre hook personnalisé.
Puis dans App
nous appelons useScreenSize
pour restituer l’objet avec le width
et height
. Et nous rendons ces valeurs dans le div.
Conclusion
Le useEffect
hook nous permet d’exécuter du code qui réagit aux valeurs de propriétés réactives. Il est principalement utilisé pour exécuter du code qui interagit avec des systèmes externes avec des valeurs réactives dans les modifications des composants.
Nous pouvons faire le useEffect
le rappel est exécuté lorsque la valeur réactive change ou lorsque le composant se monte ou s’exécute à chaque fois que le composant est restitué.
De plus, nous pouvons renvoyer une fonction dans le useEffect
pour exécuter n’importe quel code que nous souhaitons exécuter lors du démontage du composant. Ceci est pratique pour exécuter n’importe quel code de nettoyage lorsqu’un composant est démonté.
Source link