Définition et appel de composants React
Rappels
Fonctions vs. classes
Bien qu'il soit toujours possible d'écrire des composants React sous forme de classes, Meta (Facebook) recommande maintenant de ne plus utiliser cette syntaxe, pour des raisons de clarté et d'optimisation interne. Les composants devraient être écrits sous forme de fonctions, et les fonctionnalités manquantes (accès aux attributs et méthodes spéciaux) peuvent être retrouvées à l'aide de fonctions spéciales, les hooks.
Pour que React reconnaisse qu'une fonction implémente un composant, il faut que son nom commence par une majuscule.
Note : Les hooks sont apparus officiellement dans React 16.8, la version actuelle est 18.2. C'est donc une nouveauté récente à l'échelle de l'évolution de cette bibliothèque.
Les hooks sont régis par des règles :
- ils peuvent être utilisés uniquement au niveau supérieur d'un composant (pas à l'intérieur d'un test ou d'une boucle)
- ils peuvent être utilisés uniquement dans un composant React (pas dans une fonction ordinaire)
Il est possible de définir ses propres hooks. Par convention, leur nom commence par use
.
DOM virtuel
La rapidité de React provient de ce qu'il gère un DOM virtuel, qui n'est synchronisé avec le DOM physique qu'à certains moments bien définis (le composant est alors réaffiché). Le DOM virtuel permet des modifications asynchrones, contrairement au DOM physique.
État : le hook useState
Un composant a un état interne. Quand l'état change, le composant est réaffiché, c'est React qui décide quand cela doit avoir lieu. Dans un composant fonctionnel, l'état n'est pas accessible directement, c'est pourquoi on passe par le hook useState. Le hook renvoie un tableau de deux constantes : * la valeur courante d'une variable d'état * la fonction de mise à jour de cette variable (qui signale également le changement d'état à React).
Il est impossible de modifier directement la valeur, c'est délibéré.
Effets de bord : le hook useEffect
Si un composant doit, par exemple, charger des données externes lors de son initialisation et les stocker dans son état, il n'est pas possible de le faire directement, car cela créerait une boucle infinie (le composant charge les données -> l'état est modifié -> le composant est réaffiché - > il recharge les (mêmes) données -> l'état est modifié -> ...).
On doit utiliser le hook useEffect
. Il possède 3 variantes d'utilisation :
- Exécution avant chaque réaffichage du composant :
L'argument est une fonction () => {...}
. Le contenu de la fonction doit être synchrone.
Si nécessaire, il peut mettre à jour l'état du composant sans déclencher de boucle infinie.
- Exécution au montage du composant
On ajoute un second argument qui est un tableau vide :
- Exécution quand des variables (variables d'état, typiquement) changent
Le second argument qui est un tableau qui contient la liste des variables à surveiller :
Propriétés d'un composant : props
Lors de son appel, un composant peut recevoir des paramètres, qui sont regroupés sous la forme d'un objet unique, généralement appelé props. Cet objet est en lecture seule.
Par exemple, l'appel :
initialise props
avec la valeur :
Children
Si un composant est appelé sous la forme d'une paire de balises (ouvrante + fermante), alors le contenu des balises
est accessible sous l'attribut children
:
Note : la nature exacte des données retournées par children
(tableau, objet unique, ...) dépend de la façon
dont le composant a été appelé (nombre de sous-composants).
Syntaxes utiles
Les possibilités combinées de Javascript et de React permettent une grande variétés de syntaxes,
notamment à l'aide de l'opérateur de décomposition (...
).
Définition des propriétés d'un composant
- Pas de propriétés :
- Objet props :
- Arguments explicites :
- Une partie des arguments explicites :
export function MonComposant({title, subtitle, ...others}) {
return <>
<h1>{title}</h1>
<h2>{subtitle}</h2>
{others.children}
</>
}
Appel d'un composant
Voici quelques syntaxes d'appel disponibles :
- Passage des paramètres sous forme de "pseudo-attributs" HTML :
- Passage des paramètres sous forme d'un objet :
- Passage au sous-composant de l'ensemble des propriétés parentes :