ReactJS - API de componente

Neste capítulo, explicaremos a API do componente React. Discutiremos três métodos:setState(), forceUpdate e ReactDOM.findDOMNode(). Em novas classes ES6, temos que vincular isso manualmente. Nós vamos usarthis.method.bind(this) nos exemplos.

Definir estado

setState()método é usado para atualizar o estado do componente. Este método não substituirá o estado, mas apenas adicionará alterações ao 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;

Começamos com uma matriz vazia. Cada vez que clicarmos no botão, o estado será atualizado. Se clicarmos cinco vezes, obteremos a seguinte saída.

Forçar atualização

Às vezes, podemos querer atualizar o componente manualmente. Isso pode ser alcançado usando oforceUpdate() 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 definindo um número aleatório que será atualizado toda vez que o botão for clicado.

Encontre o Nó Dom

Para manipulação DOM, podemos usar ReactDOM.findDOMNode()método. Primeiro precisamos 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;

A cor de myDiv elemento muda para verde, uma vez que o botão é clicado.

Note - Desde a atualização 0.14, a maioria dos métodos API de componentes mais antigos foram descontinuados ou removidos para acomodar o ES6.