Javascript Girl
  1. Javascript Girl
  3. Réagir: quand utiliser des composants basés sur classe ES6 par rapport aux composants ES6 fonctionnels?
Intereting Posts
Ajout de balises de script dans le modèle de composant Angular2 Avantages / inconvénients d'utiliser redux-saga avec des générateurs ES6 vs redux-thunk avec ES7 async / await Syntaxe Javascript () et () () Watir-webdriver – Sélectionnez un style d'affichage de la liste: aucun Comment trouver tous les sous-ensembles d'un ensemble en JavaScript? Deux Différents OnClick sur deux divs, l'un sur l'autre Devrais-je utiliser 'void 0' ou 'indefined' en JavaScript D3.js exit () ne semble pas avoir des informations mises à jour Passer des paramètres dynamiques pour supprimer la méthode url dans JQGrid Comment ajouter une ligne de JavaScript (plutôt qu'un fichier .js exteral)? Capture l'événement de défilement sur une page particulière jQuery Mobile Impossible de comprendre node.js Est-ce que le modèle de polymères se contracte automatiquement? RSA Encryption Javascript et décryptage de Java Obtenir la position de la souris par rapport à la zone de contenu d'un élément

Réagir: quand utiliser des composants basés sur classe ES6 par rapport aux composants ES6 fonctionnels?

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

Ma question est de savoir quand devrais-je utiliser lequel et pourquoi? Quels sont les bénéfices / compromis de l'un sur l'autre?

Cours ES6 / 7: 

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

Fonctionnel: 

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

Je pense fonctionnel quand il n'y a pas d'état à manipuler par ce composant … mais est-ce cela?

Je devine si j'utilise des méthodes de cycle de vie, il est préférable d'utiliser un composant basé sur la classe.

Vous avez la bonne idée. Allez avec fonction si votre composant ne fait pas beaucoup plus que de prendre des accessoires et de rendre. Vous pouvez les considérer comme des fonctions pures car elles seront toujours les mêmes et se comportent 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, écrire ces composants simples en tant que composants fonctionnels est assez standard.

Si vos composants ont besoin de plus de fonctionnalités, comme le maintien de l'état, utilisez plutôt les classes.

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 y a des scénarios où vous devrez utiliser une classe régulière de React:

  • Le composant doit maintenir l'état
  • Le composant re-rend trop de rendu et vous devez contrôler cela via shouldComponentUpdate
  • Vous avez besoin d'un composant conteneur

METTRE À JOUR

Il existe maintenant une classe React intitulée PureComponent que vous pouvez étendre (au lieu de Component ) qui implémente son propre shouldComponentUpdate qui prend en charge la comparaison des accessoires peu profonds pour vous. Lire la suite