Quand utiliser les composants React basés sur la classe ES6 par rapport aux composants fonctionnels ES6 React ?

Après avoir passé du temps à apprendre React, je comprends la différence entre les deux principaux paradigmes de création de composants.

Ma question est quand dois-je utiliser lequel et pourquoi? Quels sont les avantages/compromis de l'un par rapport à l'autre ?

Cours ES6:

import React, { Component } from 'react';
export class MyComponent extends Component {
 render() {
 return (
 <div></div>
 );
 }
}

Fonctionnel:

const MyComponent = (props) => {
 return (
 <div></div>
 );
}

Je pense fonctionnel chaque fois qu'il n'y a pas d'état à manipuler par ce composant, mais est-ce tout?

Je suppose que si j'utilise des méthodes de cycle de vie, il serait peut-être préférable d'utiliser un composant basé sur une classe.

Solution du problème

Nouvelle réponse: Une grande partie de ce qui suit était vraie, jusqu'à l'introduction de React Hooks.

• componentDidUpdatepeut être répliqué avec useEffect(fn), où fnest la fonction à exécuter lors du rendu.




• componentDidMountles méthodes peuvent être répliquées avec useEffect(fn, []), où fnest la fonction à exécuter lors du rendu, et []est un tableau d'objets pour lesquels le composant sera rendu, si et seulement si au moins un a changé de valeur depuis le rendu précédent. Comme il n'y en a pas, useEffect()s'exécute une fois, au premier montage.




• statepeut être répliqué avec useState(), dont la valeur de retour peut être déstructurée en une référence de l'état et une fonction qui peut définir l'état (c'est-à-dire const [state, setState] = useState(initState)). Un exemple pourrait expliquer cela plus clairement:

const Counter = () => {
 const [count, setCount] = useState(0)
 const increment = () => { 
 setCount(count + 1);
 }
 return (
 <div>
 <p>Count: {count}</p>
 <button onClick={increment}>+</button>
 </div>
 )
}
default export Counter

En passant, j'ai entendu un certain nombre de personnes discuter de ne pas utiliser de composants fonctionnels pour des raisons de performances, en particulier que

"Les fonctions de gestion des événements sont redéfinies par rendu dans les composants fonctionnels"

Bien que cela soit vrai, veuillez considérer si vos composants sont vraiment rendus à une vitesse ou à un volume tels que cela mériterait d'être préoccupant.

Si tel est le cas, vous pouvez empêcher la redéfinition des fonctions à l'aide de crochets useCallbacket. useMemoCependant, gardez à l'esprit que cela peut rendre votre code (microscopiquement) moins performant.

Mais honnêtement, je n'ai jamais entendu dire que la redéfinition des fonctions était un goulot d'étranglement dans les applications React. Les optimisations prématurées sont la racine de tous les maux - s'en préoccuper quand c'est un problème.

Ancienne réponse : vous avez la bonne idée. Optez pour fonctionnel si votre composant ne fait pas beaucoup plus que prendre quelques accessoires et rendre. Vous pouvez les considérer comme des fonctions pures car elles rendront et se comporteront toujours de la même manière, avec les mêmes accessoires. De plus, ils ne se soucient pas des méthodes de cycle de vie ou ont leur propre état interne.

Parce qu'ils sont légers, écrire ces composants simples en tant que composants fonctionnels est assez standard.

Si vos composants ont besoin de plus de fonctionnalités, comme la conservation de l'état, utilisez plutôt des classes.

Plus d'informations: https://facebook.github.io/react/docs/reusable-components.html#es6-classes