API du composant React
L'API des composants React couvre plusieurs aspects importants, notamment les méthodes de cycle de vie, la gestion d'état, le passage de props et la gestion des événements.
Voici une description détaillée de l'API des composants React :
Méthodes de cycle de vie
Les méthodes de cycle de vie des composants React sont divisées en trois phases principales : le montage, la mise à jour et le démontage. Voir la description détaillée à :Cycle de vie des composants React 。
Phase de montage
constructor(props): Le constructeur, utilisé pour initialiser l'état ou lier des méthodes.static getDerivedStateFromProps(props, state): Appelé avant que la méthode render soit invoquée à chaque fois, utilisé pour mettre à jour l'état.componentDidMount(): Appelé après que le composant est monté; les opérations DOM ou les requêtes de données peuvent être effectuées à ce moment.
Exemple
constructor(props) {
super(props);
this.state = { count: 0 };
}
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.reset) {
return { count: 0 };
}
return null;
}
componentDidMount() {
console.log('Component mounted');
}
render() {
return <div>{this.state.count}</div>;
}
}
Phase de mise à jour
static getDerivedStateFromProps(props, state): Identique à la phase de montage, utilisée pour mettre à jour l’état.shouldComponentUpdate(nextProps, nextState): Renvoie une valeur booléenne qui détermine si le composant doit être re-rendu.render(): Effectue le rendu de l’interface utilisateur du composant.getSnapshotBeforeUpdate(prevProps, prevState): Appelée avant la mise à jour du DOM, utilisée pour capturer certaines informations (comme la position de défilement).componentDidUpdate(prevProps, prevState, snapshot): Appelée après la mise à jour du composant.
Exemple
shouldComponentUpdate(nextProps, nextState) {
return nextState.count !== this.state.count;
}
getSnapshotBeforeUpdate(prevProps, prevState) {
return { scrollPosition: window.scrollY };
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (snapshot) {
window.scrollTo(0, snapshot.scrollPosition);
}
console.log('Component updated');
}
render() {
return <div>{this.state.count}</div>;
}
}
Phase de démontage
componentWillUnmount(): Appelée lorsque le composant est sur le point d'être démonté, utilisée pour nettoyer les ressources (telles que les minuteurs, les écouteurs d'événements, etc.).
Exemple
componentWillUnmount() {
console.log('Component will unmount');
}
render() {
return <div>{this.state.count}</div>;
}
}
Gestion d'état
L'état est la donnée à l'intérieur d'un composant, utilisezthis.statepour le définir et le gérer. Utilisez lasetStateméthode pour mettre à jour l'état.
Exemple
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment = () => {
this.setState((prevState) => ({ count: prevState.count + 1 }));
};
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
</div>
);
}
}
Passage de props
Accédez aux props transmises au composant via this.props ; PropTypes peut être utilisé pour la vérification des types.
Exemple
class MyComponent extends React.Component {
render() {
return <div>{this.props.title}</div>;
}
}
MyComponent.propTypes = {
title: PropTypes.string.isRequired,
};
// Utilisez le composant et passez des props
<MyComponent title="Hello, World!" />
Gestion des événements
Gérez les interactions utilisateur via des fonctions de gestion d'événements. Vous devez utiliser .bind(this) ou des fonctions fléchées pour garantir que this pointe vers le contexte correct.
Exemple
handleClick = () => {
console.log('Button clicked');
};
render() {
return <button onClick={this.handleClick}>Cliquez-moi</button>;
}
}
Rendu conditionnel
Contrôler le rendu des composants à l'aide d'instructions conditionnelles.
Exemple
constructor(props) {
super(props);
this.state = { isVisible: true };
}
toggleVisibility = () => {
this.setState((prevState) => ({ isVisible: !prevState.isVisible }));
};
render() {
return (
<div>
{this.state.isVisible && <p>Ceci est visible</p>}
<button onClick={this.toggleVisibility}>Basculer</button>
</div>
);
}
}
Rendu des listes
Afficher des listes à l'aide de la méthode map des tableaux.
Exemple
render() {
const items = ['Item 1', 'Item 2', 'Item 3'];
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
}
Composants contrôlés
Contrôler les valeurs des éléments de formulaire via l'état.
Exemple
constructor(props) {
super(props);
this.state = { value: '' };
}
handleChange = (event) => {
this.setState({ value: event.target.value });
};
handleSubmit = (event) => {
event.preventDefault();
console.log('Valeur soumise :', this.state.value);
};
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type="text" value={this.state.value} onChange={this.handleChange} />
<button type="submit">Soumettre</button>
</forme>
);
}
}
Définition de l'état : setState
setState est la méthode dans React utilisée pour mettre à jour l'état d'un composant.
La syntaxe est la suivante :
setState(object nextState[, function callback])
Description du paramètre
object nextState: Un objet contenant les paires clé-valeur de l'état à mettre à jour. React fusionnera cet objet dans l'état actuel.function callback: Une fonction de rappel facultative qui s'exécute après que l'état a été mis à jour et que le re-rendu est terminé.
Fusionner nextState avec l'état actuel et effectuer un nouveau rendu du composant.
setState est la méthode principale pour déclencher les mises à jour de l'interface utilisateur dans les gestionnaires d'événements React et les fonctions de rappel de requête.
À propos de setState
Vous ne pouvez pas modifier l'état via this.state à l'intérieur d'un composant, car cet état sera remplacé après l'appel de setState().
setState() ne modifie pas immédiatement this.state ; à la place, il crée un état qui est sur le point d'être traité. setState() n'est pas nécessairement synchrone ; pour améliorer les performances, React exécutera par lots les changements d'état et le rendu DOM.
setState() déclenchera toujours un nouveau rendu du composant, sauf si une logique de rendu conditionnel est implémentée dans shouldComponentUpdate().
En utilisant correctement setState, vous pouvez gérer efficacement l'état d'un composant et vous assurer que les opérations nécessaires sont exécutées après les mises à jour d'état, améliorant ainsi la réactivité et la fiabilité de l'application.
Exemple React
Essayez-le »
Dans l'exemple, cliquer sur la balise h2 incrémente le compteur de clics de 1.
Autres extensions