Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:framework:react [2024/04/10 09:40] – jcheron
+++ web:framework:react [2025/08/12 02:35] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 205: / Ligne 205: @@
 </sxh>
+===== Hooks React =====
+Les hooks React sont des fonctions introduites à partir de React 16.8 permettant d'utiliser l'état et d'autres fonctionnalités de React dans les composants fonctionnels (basés sur une fonction et non une classe).
+==== Hooks de base ====
+===== useState =====
+Permet de gérer un état local dans un composant fonctionnel.
+<sxh js>
+import { useState } from "react";
+function Counter() {
+  const [count, setCount] = useState(0); // Déclare un état `count`
+  return (
+    <button onClick={() => setCount(count + 1)}>Compteur : {count}</button>
+  );
+}
+</sxh>
+===== useEffect =====
+Permet d'exécuter des effets secondaires dans un composant.
+Exemples :
+  *  appels API,
+  * écouteurs d’événements,
+  * manipulation du DOM...
+<sxh js>
+import { useState, useEffect } from "react";
+function Timer() {
+  const [seconds, setSeconds] = useState(0);
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setSeconds(s => s + 1);
+    }, 1000);
+    return () => clearInterval(interval); // Nettoyage de l'effet
+  }, []); // Dépendances vides = effet exécuté une seule fois au montage
+  return <p>Temps écoulé : {seconds} sec</p>;
+}
+</sxh>
+===== useContext =====
+Permet d'utiliser un contexte global sans avoir à passer des props manuellement à chaque niveau.
+<sxh js>
+import { useContext, createContext } from "react";
+const ThemeContext = createContext("light");
+function ThemedButton() {
+  const theme = useContext(ThemeContext); // Récupère la valeur du contexte
+  return <button style={{ background: theme === "dark" ? "#333" : "#ddd" }}>
+    Thème : {theme}
+  </button>;
+}
+</sxh>
 ===== Composants =====
   * [[https://react-hook-form.com/|React-hook-form]]