Tutoriel de base ReactJS

Cycle de vie des composants ReactJS Vérification des Props ReactJS

API des composants ReactJS

Dans ce chapitre, nous expliquerons l'API des composants React. Nous discuterons des trois méthodes : setState(), forceUpdate et react.finddomnode(). Dans le nouveau ES6Dans la classe, nous devons la lier manuellement. Nous utiliserons this.method.bind(this) dans l'exemple.

Définir l'état

setState()Cette méthode est utilisée pour mettre à jour l'état du composant. Cette méthode ne remplace pas l'état, mais ajoute simplement des modifications à l'état original.

import React from 'react';
class App extends React.Component {
　　　constructor() {
　　　　　　super();
　　　　　　this.state = {
　　　　　　　　　data: [],
　　　　　　}
　　　　　　this.setStateHandler = this.setStateHandler.bind(this);
　　　};
　　　setStateHandler() {
　　　　　　var item = "setState..."
　　　　　　var myArray = this.state.data.slice();
	　　myArray.push(item);
　　　　　　this.setState({data: myArray});
　　　};
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<bouton onClick={this.setStateHandler}>METTRE À JOUR L'ÉTAT</button>
　　　　　　　　　　　　<h4>Tableau d'état : {this.state.data}</h4>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export default App;

Nous commençons par un tableau vide. Chaque fois que nous cliquons sur le bouton, l'état est mis à jour. Si nous cliquons cinq fois, nous obtenons le résultat suivant.

mise à jour forcée

Parfois, nous pourrions vouloir mettre à jour manuellement un composant. Cela peut être fait en utilisantforceUpdate()par cette méthode.

import React from 'react';
class App extends React.Component {
　　　constructor() {
　　　　　　super();
　　　　　　this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
　　　};
　　　forceUpdateHandler() {
　　　　　　this.forceUpdate();
　　　};
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<bouton onClick={this.forceUpdateHandler}>MISE À JOUR FORCÉE</button>
　　　　　　　　　　　　<h4>Nombre aléatoire: {Math.random()}</h4>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export default App;

Nous configurons un nombre aléatoire qui sera mis à jour à chaque clic sur le bouton.

Recherche de noeud DOM

Pour les opérations DOM, nous pouvons utiliser la méthode. Tout d'abord, nous devons importer.ReactDOM.findDOMNode()react-dom

import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
　　　constructor() {
　　　　　　super();
　　　　　　this.findDomNodeHandler = this.findDomNodeHandler.bind(this);
　　　};
　　　findDomNodeHandler() {
　　　　　　var myDiv = document.getElementById('myDiv');
　　　　　　ReactDOM.findDOMNode(myDiv).style.color = 'green';
　　　}
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<button onClick={this.findDomNodeHandler}>TROUVER NOEUD DOME</button>
　　　　　　　　　　　　<div id="myDiv">NODE</div>
　　　　　　　　　</div>
　　　　　　);
　　　}
}
export default App;

myDivAprès avoir cliqué sur le bouton, la couleur de l'élément devient verte.

Attention−depuis 0.14Depuis la mise à jour, il n'est pas recommandé d'utiliser la plupart des anciennes méthodes API des composants ou de les supprimer pour se conformer à ES6.

Cycle de vie des composants ReactJS Vérification des Props ReactJS