Accueil/Notions/Composants fonctionnels (React)

Composants fonctionnels (React)

Les composants fonctionnels en React sont une façon de construire des composants (components, React) sans avoir besoin de définir une classes (programmation). Avant l'introduction des Hooks (React) dans React 16.8, les composants fonctionnels étaient principalement utilisés pour des composants simples sans état interne ou méthodes de cycle de vie (Lifecycle). Avec les Hooks, tu peux maintenant utiliser l'état et d'autres fonctionnalités de React dans les composants fonctionnels.

Pourquoi utiliser les composants fonctionnels?

  1. Simplicité: Moins de code, plus simple à comprendre et à tester.
  2. Hooks: Permet l'utilisation de l'état et d'autres fonctionnalités sans écrire une classe.
  3. Performance: Moindre surcharge par rapport aux composants de classe, bien que cette différence soit souvent négligeable dans les applications du monde réel.

Exemple simple

Voici un exemple basique de composant fonctionnel en TypeScript qui affiche un bouton et compte le nombre de clics:

import React, { useState } from 'react';

const Counter: React.FC = () => {
  // Utilise le Hook useState pour ajouter un état local au composant
  const [count, setCount] = useState(0);

  // Fonction pour incrémenter le compteur
  const increment = () => setCount(count + 1);

  return (
    <div>
      <p>Nombre de clics : {count}</p>
      <button onClick={increment}>Clique ici!</button>
    </div>
  );
};

export default Counter;

Explication du code

  • useState: C'est un Hook qui permet d'ajouter un état local (state) dans un composant fonctionnel. Il prend la valeur initiale de l'état comme arguments et retourne un tableaux de deux éléments: la valeur actuelle de l'état et une fonction qui permet de modifier cet état.
  • increment: C'est une fonction qui met à jour l'état en utilisant setCount. À chaque appel, elle incrémente la valeur de count par 1.
  • JSX: Le retour du composant est écrit en JSX, qui est une syntaxe proche du HTML pour décrire l'interface utilisateur. <p> affiche le compteur et <button> affiche un bouton qui, quand on clique dessus, appelle la fonction increment.

Les composants fonctionnels sont un moyen élégant et efficace de créer des interfaces en React, surtout avec l'ajout des Hooks qui enrichissent leur fonctionnalité sans les complications des classes.

Pour approfondir ta compréhension de React et des composants fonctionnels, voici une liste de concepts et de techniques que tu peux explorer :

  1. Hooks avancés:

    • useEffect : Pour exécuter des effets secondaires dans les composants fonctionnels.
    • useContext : Pour accéder à des valeurs d'un contexte React sans utiliser un Consumer.
    • useReducer : Pour gérer des états plus complexes avec une logique réductrice.
    • useMemo et useCallback : Pour optimiser les performances en mémorisant des calculs ou des fonctions.

  2. Gestion d'état:

    • Contexts API (React) : Pour partager des données globalement entre plusieurs composants.
    • Redux ou MobX : Bibliothèques populaires pour la gestion d'état externe.
    • Recoil ou Zustand : Des alternatives plus modernes pour la gestion d'état en React.

  3. Testing:

    • Jest : Un framework de test JavaScript.
    • React Testing Library : Pour tester les composants React de manière plus robuste et maintenable.

  4. Optimisation des performances:

    • Lazy loading des composants avec React.lazy et Suspense.
    • Techniques de Memoization avec React.memo.
    • Utilisation de l'analyseur de performances de React pour identifier les goulets d'étranglement.

  5. Accessibilité (A11Y):

    • Principes de base de l'accessibilité dans les applications web.
    • Utilisation de l'ARIA pour améliorer l'accessibilité.

  6. Patterns en React:

    • composition vs héritage : Préférer la composition pour réutiliser le code.
    • Compound Components : Une technique pour créer des composants qui partagent un état implicite.
    • Render Props et higher-order components: Pour partager la logique entre composants de manière flexible.

  7. Server-Side Rendering:

    • Next.js : Un framework populaire pour le rendu côté serveur avec React.
    • Gatsby : Un générateur de sites statiques qui utilise React.

  8. TypeScript avec React:

    • Typage des props et des états pour une meilleure sûreté de type et une maintenance facilitée.
    • Patterns avancés de TypeScript en React pour gérer les composants génériques et les props conditionnels.

Chacun de ces sujets peut t'ouvrir de nouvelles possibilités pour construire des applications robustes et maintenables avec React. En les explorant, tu pourras mieux comprendre comment construire des interfaces utilisateurs efficacement et à grande échelle.