ReactJS - API de componentes

En este capítulo, explicaremos la API del componente React. Discutiremos tres métodos:setState(), forceUpdate y ReactDOM.findDOMNode(). En las nuevas clases de ES6, tenemos que vincular esto manualmente. Usaremosthis.method.bind(this) en los ejemplos.

Establecer estado

setState()El método se utiliza para actualizar el estado del componente. Este método no reemplazará el estado, solo agregará cambios al estado 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>
            <button onClick = {this.setStateHandler}>SET STATE</button>
            <h4>State Array: {this.state.data}</h4>
         </div>
      );
   }
}
export default App;

Comenzamos con una matriz vacía. Cada vez que hagamos clic en el botón, se actualizará el estado. Si hacemos clic cinco veces, obtendremos el siguiente resultado.

Forzar actualización

A veces, es posible que deseemos actualizar el componente manualmente. Esto se puede lograr utilizando elforceUpdate() método.

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>Random number: {Math.random()}</h4>
         </div>
      );
   }
}
export default App;

Estamos configurando un número aleatorio que se actualizará cada vez que se haga clic en el botón.

Buscar nodo Dom

Para la manipulación DOM, podemos usar ReactDOM.findDOMNode()método. Primero tenemos que importarreact-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}>FIND DOME NODE</button>
            <div id = "myDiv">NODE</div>
         </div>
      );
   }
}
export default App;

El color de myDiv el elemento cambia a verde, una vez que se hace clic en el botón.

Note - Desde la actualización 0.14, la mayoría de los métodos de API de componentes más antiguos están obsoletos o eliminados para adaptarse a ES6.