Réagir: quand utiliser les composants basés sur la classe ES6 par rapport aux composants ES6 fonctionnels?
Après avoir passé un certain temps à apprendre React, je comprends la différence entre les deux paradigmes principaux de la création de composants
Ma question est quand devrais-je utiliser lequel et pourquoi? quels sont les avantages/compromis de l'un sur l'autre?
ES6/7 classes:
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 que c'est?
Je devine si j'utilise des méthodes de cycle de vie, il pourrait être préférable d'aller avec une classe de composant.
3 réponses
Vous avez la bonne idée. Allez avec 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 se comporteront toujours de la même manière, compte tenu des mêmes accessoires. En outre, ils ne se soucient pas des méthodes de cycle de vie ou ont leur propre état interne.
Parce qu'ils sont légers, l'écriture de ces composants simples en tant que Composants fonctionnels est assez standard.
Si vos composants ont besoin de plus de fonctionnalités, comme garder l'état, utiliser des classes à la place.
Plus d'Informations: https://facebook.github.io/react/docs/reusable-components.html#es6-classes
Essayez toujours d'utiliser des fonctions sans état (composants fonctionnels) autant que possible. Il existe des scénarios où vous devrez utiliser une classe React régulière:
- Le composant doit maintenir l'état
- le composant est trop rendu et vous devez le contrôler via
shouldComponentUpdate - vous avez besoin d'un composant conteneur
Mettre à jour
Il y a maintenant une classe React appelée PureComponent que vous pouvez étendre (au lieu de Component) qui implémente la sienne {[0] } qui prend soin de la comparaison des accessoires peu profonds pour vous. Lire plus
Les composants fonctionnels ne sont pas plus légers que les composants basés sur des classes, " ils fonctionnent exactement comme des classes."- https://github.com/facebook/react/issues/5677
Le lien ci-dessus est un peu daté, mais la documentation de React 16.3.1 dit que les composants fonctionnels et de classe:
" sont équivalents du point de vue de React."- https://reactjs.org/docs/components-and-props.html#stateless-functions
Il n'y a essentiellement aucune différence entre un composant fonctionnel et un composant de classe qui implémente simplement la méthode de rendu, autre que la syntaxe.
À mon avis, la cohérence est la voie à suivre. J'utilise souvent des composants basés sur des classes pour les " fonctionnalités supplémentaires "telles que l'état, mais je préfère aussi les utiliser pour mes" composants fonctionnels", juste pour garder les choses cohérentes.
À l'avenir (en citant le lien ci-dessus) "nous [React] pourrions ajouter de telles optimisations" mais pour l'instant mon équipe a trouvé la cohérence la meilleure option (en particulier pour le nouveau développeur inévitable qui entre et est confus au sujet de l'endroit où this.props est allé ou accidentellement des noms props autre chose dans un composant fonctionnel).