web-dev-qa-db-fra.com

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

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

Ma question est de savoir quand utiliser lequel et pourquoi? Quels sont les avantages/compromis de l'un sur 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’ya aucun état à manipuler par ce composant, mais est-ce tout?

Je devine si j’utilise des méthodes de cycle de vie, il serait peut-être préférable d’utiliser un composant basé sur les classes.

javascriptreactjsecmascript-6redux
150
JordanHendrix

Vous avez la bonne idée Allez avec fonctionnel si votre composant ne fait pas beaucoup plus que prendre dans certains accessoires et rendre. Vous pouvez les considérer comme des fonctions pures, car elles restitueront et se comporteront toujours de la même manière, avec les 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 plutôt standard.

Si vos composants nécessitent davantage de fonctionnalités, telles que le maintien de l'état, utilisez plutôt les classes.

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

109
Jeff Cousins

Essayez toujours d'utiliser des fonctions sans état (composants fonctionnels) autant que possible. Il existe des scénarios dans lesquels vous devrez utiliser une classe React régulière:

  • Le composant doit conserver son état
  • Le composant refait trop et vous devez le contrôler via shouldComponentUpdate
  • Vous avez besoin d'un composant conteneur

MISE À JOUR

Il y a maintenant une classe React appelée PureComponent que vous pouvez étendre (au lieu de Component) qui implémente sa propre shouldComponentUpdate qui prend en charge la comparaison des accessoires superficiels pour vous. en savoir plus

34
ffxsam

UPDATE mars 2019

https://overreacted.io/how-are-function-components-different-from-classes/

UPDATE de février 2019:

Avec l'introduction de React hooks , il semble que les équipes React veulent que nous utilisions des composants fonctionnels chaque fois que cela est possible (ce qui correspond mieux à la nature fonctionnelle de JavaScript).

Leur motivation:

1.) It’s hard to reuse stateful logic between components
2.) Complex components become hard to understand
3.) Classes confuse both people and machines

Un composant fonctionnel avec crochets peut faire presque tout ce qu'un composant de classe peut faire, sans les inconvénients mentionnés ci-dessus.

Je recommande de les utiliser dès que vous le pouvez.

Réponse originale

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.7.0 indique 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 pratiquement pas de différence entre un composant fonctionnel et un composant de classe qui implémente simplement la méthode de rendu, à l'exception de la syntaxe.

À l'avenir (citant le lien ci-dessus) "nous [React] pourrions ajouter de telles optimisations."

Si vous essayez d’améliorer les performances en éliminant les rendus inutiles, les deux approches fournissent une assistance. memo pour les composants fonctionnels et PureComponent pour les classes.

- https://reactjs.org/docs/react-api.html#reactmemo

- https://reactjs.org/docs/react-api.html#reactpurecomponent

C'est vraiment comme tu veux. Si vous voulez moins de passe-passe, allez fonctionnel. Si vous aimez la programmation fonctionnelle et n'aimez pas les cours, optez pour la fonctionnalité. Si vous voulez une cohérence entre tous les composants de votre base de code, optez pour les classes. Si vous êtes fatigué de passer des composants fonctionnels aux composants basés sur les classes lorsque vous avez besoin de quelque chose comme state, optez pour les classes.

23
Galupuf

A partir de React 16.8, le terme Composants fonctionnels sans état est trompeur et doit être évité car ils ne sont plus sans état ( React.SFC déconseillé) , Dan Abramov sur React.SFC ), ils peuvent avoir un état, ils peuvent avoir des crochets (qui agissent comme des méthodes de cycle de vie) ainsi, ils chevauchent plus ou moins les composants de classe.

Composants basés sur la classe

Composants fonctionnels:

Pourquoi je préfère les composants Funtional

  • React fournit le crochet useEffect, un moyen très clair et concis de combiner les méthodes de cycle de vie componentDidMount, componentDidUpdate et componentWillUnmount.
  • Avec les hooks, vous pouvez extraire une logique qui peut facilement être partagée entre composants et testable
  • moins de confusion sur la portée

Réagissez motivation pourquoi utiliser des crochets (c'est-à-dire des composants fonctionnels)

1
Karim