Composant par classe VS Composant par fonction avec React

Vous vous êtes toujours demandé la différence entre un composant utilisant une classe et un composant sous forme de fonction avec React ? Cet article récapitulatif est fait pour vous !

Composant par classe

Il s'agit de la toute première façon de créer un composant, à l'origine de React.

import React from ‘react’;

class MonComposant extends React.Component {
    render() {
        return (
            <h1>Hello depuis mon composant par classe !</h1>
        );
    }
}

export default MonComposant;

Composant fonctionnel

Nous pouvions également créer des composants fonctionnels avec React par le passé, mais nous étions limités par ce que nous pouvions faire. Ce n'est plus le cas de nos jours, nous en reparlerons dans les prochaines sessions.

import React from ‘react’;

function MonComposant() {
    return (
        <h1>Hello depuis mon composant fonctionnel !</h1>
    );
}

export default MonComposant;

Il est également possible d'utiliser les composants fonctionnels sous forme de fonction fléchée :

import React from ‘react’;

const MonComposant = () => {
    return (
        <h1>Hello depuis mon composant fonctionnel (avec la fonction fléchée) !</h1>
    );
};

export default MonComposant;

Quelle forme utiliser ?

Nous utiliserons ces trois formes, mais nous nous concentrerons dans la suite sur la forme fonctionnelle d'un composant (que ce soit avec le mot-clé function ou la fonction fléchée). Ne vous en faites pas, nous allons y aller pas à pas dans la suite de la formation !