Faire le choix entre les composants de classe et les composants fonctionnels dans React

Republié par Platon

Suiveurs: 0

Faire le choix entre les composants de classe et les composants fonctionnels dans React PlatoBlockchain Data Intelligence. Recherche verticale. Aï.

Différences fondamentales

Dans React, un composant est un morceau de code qui représente une partie d'une interface utilisateur. Il existe deux principaux types de composants dans React : les composants de classe et les composants fonctionnels.

Les composants de classe sont définis à l'aide d'une classe qui étend la classe React.Component. Ils sont plus riches en fonctionnalités et ont plus d'options pour gérer les événements d'état et de cycle de vie. Voici à quoi ressemble un composant de classe :

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; }
}

Les composants fonctionnels ne sont que des fonctions JavaScript qui renvoient un élément React. Ils sont plus simples que les composants de classe et sont plus faciles à lire et à écrire. Voici le même composant que ci-dessus, écrit en tant que composant fonctionnel :

function Welcome(props) { return <h1>Hello, {props.name}</h1>;
}

Quand utiliser quoi

En général, vous devez utiliser des composants fonctionnels, sauf si vous avez besoin d'utiliser une fonctionnalité qui n'est disponible que dans les composants de classe, comme les méthodes d'état ou de cycle de vie.
Il y a un peu d' Les raisons pourquoi vous pourriez préférer utiliser des composants de classe plutôt que des composants fonctionnels:

lisibilité: Les composants de classe peuvent faciliter la compréhension du code, surtout si vous avez beaucoup de méthodes d'état ou de cycle de vie. Le code est organisé en méthodes clairement définies et faciles à trouver.
Réutilisable: Les composants de classe peuvent être réutilisés plus facilement, car ils peuvent être étendus pour créer de nouveaux composants. Cela peut être particulièrement utile si vous avez beaucoup de fonctionnalités partagées entre les composants.
Organisation: les composants de classe peuvent faciliter l'organisation de votre code, car vous pouvez regrouper des méthodes associées dans le même composant. Cela peut faciliter la recherche et la maintenance du code.

Il y a aussi quelques raisons pour lesquelles vous voudrez peut-être choisir d'écrire composants fonctionnels:

Lorsque vous n'avez pas besoin d'utiliser des méthodes d'état ou de cycle de vie : si vous n'avez pas besoin d'utiliser des méthodes d'état ou de cycle de vie, un composant fonctionnel est un bon choix, car il est plus simple et plus facile à lire et à écrire qu'un composant de classe.
Lorsque vous avez besoin d'un composant pur : les composants fonctionnels sont des composants "purs", ce qui signifie qu'ils ne dépendent que de leurs accessoires et n'ont pas leur propre état. Cela peut être utile si vous voulez vous assurer qu'un composant ne s'affiche à nouveau que lorsque ses accessoires changent.
Lorsque vous souhaitez optimiser les performances : étant donné que les composants fonctionnels sont purs, ils peuvent être optimisés plus facilement par React, ce qui peut entraîner de meilleures performances.
Lorsque vous souhaitez écrire du code concis et facile à lire : étant donné que les composants fonctionnels sont plus simples et comportent moins de pièces mobiles, ils peuvent être plus faciles à lire et à comprendre, en particulier si votre application comporte de nombreux composants.

en général, vous devez utiliser des composants fonctionnels sauf si vous avez un besoin spécifique qui ne peut être satisfait qu'avec un composant de classe.

useEffect & useState

Cependant, il est important de noter que vous pouvez également utiliser les méthodes d'état et de cycle de vie dans les composants fonctionnels, en utilisant le utiliserÉtat ainsi que useEffet crochets. En général, vous devez choisir le type de composant qui répond le mieux à vos besoins et qui rendra votre code le plus facile à lire et à comprendre.

Si vous souhaitez toujours implémenter des événements d'état ou de cycle de vie, vous aurez la possibilité d'utiliser des crochets pour activer votre composant.

C'est ainsi que vous implémenteriez useEffet ainsi que utiliserÉtat à l'intérieur de vos composants fonctionnels

import { useState, useEffect } from 'react'; function Example() { // Declare a new state variable, which we'll call "count" const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `Number of clicks: ${count}`; }); return ( <div> <p>Number of clicks: {count}</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> );
}

Ici, nous avons un composant qui garde une trace d'un décompte et affiche le décompte actuel à l'utilisateur. Le composant utilise le utiliserÉtat crochet pour ajouter un état au composant fonctionnel, et le useEffet crochet pour effectuer une action (mise à jour du titre du document) lorsque le nombre change.

Faits marquants

Voici les principaux points à retenir lorsqu'il s'agit de choisir entre les composants de classe et les composants fonctionnels dans React :

Les composants de classe sont définis à l'aide d'une classe qui étend la classe React.Component et ont plus d'options pour gérer les événements d'état et de cycle de vie.
Les composants fonctionnels ne sont que des fonctions JavaScript qui renvoient un élément React et sont plus simples et plus faciles à lire et à écrire.
Vous devez utiliser des composants fonctionnels, sauf si vous avez besoin d'utiliser une fonctionnalité qui n'est disponible que dans les composants de classe, comme les méthodes d'état ou de cycle de vie.
Vous pouvez utiliser les crochets useState et useEffect pour ajouter un état et effectuer des effets secondaires dans les composants fonctionnels.
Dans l'ensemble, le choix entre les composants de classe et les composants fonctionnels se résume à ce qui convient le mieux à vos besoins et à ce qui rend votre code le plus facile à lire et à comprendre.

J'espère que cette brève explication vous aidera. Si vous souhaitez un mentorat ou des conseils sur votre chemin pour apprendre javascript, réagir ou le développement Web en général, n'hésitez pas à me contacter pour une session 1: 1.