React Composants fonctionnels avec crochets ou composants de classe
Avec l’introduction de hooks dans React, la principale confusion est maintenant de savoir quand utiliser des composants fonctionnels avec des hooks et des composants de classe, car avec l’aide de hooks, on peut obtenir state et partial lifecycle hooks même dans les composants fonctionnels. Donc, j'ai les questions suivantes
- Quels sont les avantages réels des crochets?
- Quand utiliser des composants fonctionnels avec crochets ou composants de classe?
Par exemple, les composants fonctionnels avec des crochets ne peuvent aider à la perfection, contrairement aux composants de classe. Ils ne peuvent pas ignorer les rendus à nouveau car ils n'ont pas implémenté shouldComponentUpdate. Y a-t-il plus de raisons?
Merci d'avance.
L’idée d’introduire Hooks et d’autres fonctionnalités comme React.memo et React.lazy consiste à réduire le code que l’on doit écrire et à regrouper des actions similaires.
La documentation mentionne peu de très bonnes raisons d'utiliser des crochets au lieu de cours
Il est difficile de réutiliser la logique avec état entre composants Généralement, lorsque vous utilisez HOC ou renderProps, vous devez restructurer votre application avec plusieurs hiérarchies lorsque vous essayez de la voir dans DevTools. Hooks évite de tels scénarios et aide à obtenir un code plus clair.
Les composants complexes deviennent difficiles à comprendre Souvent avec des classes Le code non lié entre eux se termine souvent ensemble ou le code lié a tendance à être divisé, il devient de plus en plus difficile à maintenir. Les écouteurs d'événement sont un exemple de ce type. Vous ajoutez des écouteurs dans componentDidMount et les supprimez dans componentWillUnmount. Les crochets vous permettent de combiner ces deux
Les classes confondent les personnes et les machines Avec les classes, vous devez comprendre la liaison et le contexte dans lequel les fonctions sont appelées, ce qui devient souvent une confusion.
les composants fonctionnels avec crochets ne peuvent aider à la performance comme le font les composants de classe. Ils ne peuvent pas ignorer les rendus à nouveau car ils ne devraient pas implémenter ComponentUpdate.
Le composant fonctionnel peut être mémorisé de la même manière que React.PureComponent avec des classes en utilisant React.memo et vous pouvez passer une fonction de comparaison comme second argument à React.memo qui vous permet d'implémenter un comparateur personnalisé
L’idée est de pouvoir écrire le code que vous pouvez écrire en utilisant React composant de classe en utilisant un composant fonctionnel à l’aide de Hooks et d’autres utilitaires. Les crochets peuvent couvrir tous les cas d’utilisation pour. classes tout en offrant plus de flexibilité pour l'extraction, le test et la réutilisation de code.
Étant donné que les hooks ne sont pas encore complètement livrés, il est conseillé de ne pas utiliser de hooks pour les composants critiques et de commencer avec des composants relativement petits. Vous pouvez effectivement remplacer complètement les classes par des composants fonctionnels.
Cependant, une raison pour laquelle vous devriez toujours utiliser des composants de classe par-dessus les composants fonctionnels dotés de points d'ancrage jusqu'à ce que Suspense soit suspendu pour l'extraction de données. L'extraction de données avec les hooks useEffect n'est pas aussi intuitive qu'avec les méthodes de cycle de vie.
De plus, @DanAbramov, dans l'un de ses tweets, a mentionné que les crochets sont conçus pour fonctionner avec le suspense et que tant que le suspense n'est pas passé, il est préférable d'utiliser Class