Tutorial di base ReactJS

Ciclo di vita dei componenti ReactJS Verifica delle props ReactJS

API dei componenti ReactJS

In questa sezione, spiegheremo l'API dei componenti React. Discuteremo tre metodi: setState(), forceUpdate e react.finddomnode(). Nei nuovi classi ES6, dobbiamo bind manualmente. Utilizzeremo this.method.bind(this) negli esempi.

Impostazione dello stato

setState();Il metodo viene utilizzato per aggiornare lo stato del componente. Questo metodo non sostituisce lo stato, ma aggiunge modifiche alla stato originale.

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>
　　　　　　　　　　　　<button onClick={this.setStateHandler}>SET STATE</button>
　　　　　　　　　　　　<h4>Array di stato: {this.state.data}</h4>
　　　　　　　　　</div>
　　　　　　;
　　　}
}
export default App;

Partiamo da un array vuoto. Ogni volta che si clicca sul pulsante, lo stato viene aggiornato. Se si clicca cinque volte, si ottiene il seguente output.

aggiornamento forzato

A volte potremmo voler aggiornare manualmente il componente. Questo può essere fatto utilizzandoforceUpdate();metodo per implementare.

import React from 'react';
class App extends React.Component {
　　　constructor() {
　　　　　　super();
　　　　　　this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
　　　};
　　　forceUpdateHandler() {
　　　　　　this.forceUpdate();
　　　};
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<button onClick={this.forceUpdateHandler}>FORCE UPDATE</button>
　　　　　　　　　　　　<h4>Numero casuale: {Math.random()}</h4>
　　　　　　　　　</div>
　　　　　　;
　　　}
}
export default App;

Stiamo impostando un numero casuale che viene aggiornato ogni volta che si clicca sul pulsante.

Trova nodo DOM

Per le operazioni DOM, possiamo utilizzare i metodi. Prima di tutto, dobbiamo importare.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}>Trova NODO DOME</button>
　　　　　　　　　　　　<div id="myDiv">NODE</div>
　　　　　　　　　</div>
　　　　　　;
　　　}
}
export default App;

myDivDopo aver cliccato il pulsante, il colore dell'elemento diventa verde.

Attenzione−Da quando è stata introdotta la versione 0.14, non si raccomanda di utilizzare la maggior parte delle vecchie API dei componenti o di eliminarle per adattarsi a ES6.

Ciclo di vita dei componenti ReactJS Verifica delle props ReactJS