Composant fonctionnel et à état en React

Types de composant

En React, il est possible d’implémenter deux types de composants, à utiliser en fonction du besoin:

• Composant fonctionnel : une fonction permettant de retourner du JSX en fonction des propriétés d’entrée (que l’on appelle des props)
• Composant à état : une class qui va permettre de gérer l’état interne du composant et de renvoyer du JSX via une fonction Render()

Composant fonctionnel

C’est le plus simple, celui que nous utilisons depuis le début, il permet de retourner du JSX en fonction des props. Voici un nouvel exemple de composant fonctionnel très simple où il s’agit de gérer les titres via un composant Title.

Composant à état

Passons maintenant à l’autre type de composant en React, en introduisant la notion de State (état), il sera toujours possible de récupérer des props depuis votre composant mais également d’avoir un état propre au composant avec des variables propres à cette instance et à ce composant.

Dans cet exemple nous allons mettre en place deux boutons et essayer de savoir combien de fois j’ai cliqué sur chaque bouton, pour cela je vais créer un composant à état et utiliser ce même composant deux fois dans mon application pour bien mettre en avant qu’un composant peut être utilisé plusieurs fois au sein de vos pages en toute indépendance.

Créer un composant à l’aide d’une class

Toujours dans notre dossier components je vais créer un dossier Button avec un fichier index.js exactement comme dans le premier exemple, je vais ensuite implémenter une class du même nom.

Avant de rentrer dans les détails du composant il faut bien comprendre que ce composant Button va être indépendant. Pour le faire fonctionner il est impératif d’avoir une fonction render() . Cette fonction va s’occuper du rendu de notre composant à chaque fois que nous allons lui demander de se mettre à jour, soit via une fonction qui se nomme setState() ou si les Props viennent à s’actualiser et changer de valeur.

Dans un composant à état, il est possible de récupérer les Props; elles sont disponibles via this.props. Le seul Props dans cet exemple est name qui est déclaré à ce niveau <Button name="Bouton 1" /> dans le fichier src/index.js .

State

La premier objet que l’on identifie dans la class est state, une composante essentielle à notre composant, il va contenir les variables que l’on va pouvoir faire évoluer tout au long de la vie du composant Button.

Pour modifier cet objet il est impératif de passer par la fonction setState() nous verrons plus tard pourquoi c’est important de passer par cette fonction et pas directement via un accesseur de l’objet.

Immutabilité

L’immutabilité fait partie des concepts de programmation fonctionnelle, elle indique que la structure des données ne peut pas être modifiée directement. C’est un principe qui n’est pas propre à React mais répendu dans d’autres frameworks ou langages.

Concrètement avec ce principe si vous souhaitez modifier un objet, il faudra toujours retourner un nouvel objet et ne pas altérer l’existant. Le nouvel objet possédera sa propre instance et l’ancien gardera la sienne également.

Render

Le render est la fonction qui va rendre le JSX de notre composant en fonction de nos variables dans le state et les props. Le fait d’utiliser setState va permettre de rejouer la fonction render() juste après avoir fait la mise à jour du state.

Pour faire simple vous allez demander à modifier le state via setState , React va faire cette mise à jour et relancer la fonction render() pour actualiser le rendu.