Composants fonctionnels vs composants de classe dans React

Il y a principalement deux composants dans React:

  • Composants fonctionnels
  • Composants de classe

Composants fonctionnels

  • Les composants fonctionnels sont des fonctions JavaScript de base. Ce sont généralement des fonctions fléchées mais peuvent également être créées avec le functionmot-clé normal .
  • Parfois appelés composants «stupides» ou «sans état», car ils acceptent simplement des données et les affichent sous une forme ou une autre; c'est-à-dire qu'ils sont principalement responsables du rendu de l'interface utilisateur.
  • Les méthodes de cycle de vie React (par exemple componentDidMount) ne peuvent pas être utilisées dans les composants fonctionnels.
  • Aucune méthode de rendu n'est utilisée dans les composants fonctionnels.
  • Ceux-ci sont principalement responsables de l'interface utilisateur et sont généralement uniquement de présentation (par exemple, un composant Button).
  • Les composants fonctionnels peuvent accepter et utiliser des accessoires.
  • Les composants fonctionnels doivent être privilégiés si vous n'avez pas besoin d'utiliser l'état React.
import React from "react"; const Person = props => ( 

Hello, {props.name}

); export default Person;

Composants de classe

  • Les composants de classe utilisent la classe ES6 et étendent la Componentclasse dans React.
  • Parfois appelés composants «intelligents» ou «avec état», car ils ont tendance à implémenter la logique et l'état.
  • Les méthodes de cycle de vie React peuvent être utilisées dans les composants de classe (par exemple, componentDidMount).
  • Vous transmettez les accessoires aux composants de classe et y accédez avec this.props
import React, { Component } from "react"; class Person extends Component { constructor(props){ super(props); this.state = { myState: true; } } render() { return ( 

Hello Person

); } } export default Person;

Plus d'information

  • Composants React
  • Composants fonctionnels ou de classe
  • Composants fonctionnels avec état ou sans état dans React
  • État et cycle de vie