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
function
mot-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
Component
classe 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