Empleo del State en React

Empleo del State en React

Empleo del State en React

Hola a todos, nuestro equipo de DevSun Europe contin煤a con la serie de art铆culos relacionados con React. En la publicaci贸n que hoy nos ocupa, presentamos las formas de utilizar el state en React. El state forma parte esencial de la estructura de un componente para la visualizaci贸n y manejo de los datos.

驴Qu茅 es el state en React?

En React los estados (states) almacenan los datos al igual que los props (si desea conocer m谩s sobre sobre props le recomendamos que lea nuestro art铆culo Empleo de Props en React). Su diferencia con estos 煤ltimos consiste en que los datos almacenados pueden modificarse ante diferentes cambios. Estos no son m谩s que objetos escritos en JavaScript plano, por lo que pueden contener datos o c贸digos, representar la informaci贸n que se desee modelar. Los datos de los objetos se pueden almacenar de manera encapsulada en un paquete de objetos, lo que facilita su estructura y acceso. Si desea conocer m谩s sobre la programaci贸n orientada a objetos en JavaScript le sugerimos este art铆culo: Object-oriented JavaScript for beginners.

variables-gif
Foto de Dribble por: Miguel Arroyo

Inicializaci贸n del state y accesibilidad

La inicializaci贸n del state puede llevarse a cabo dentro del constructor de un componente definido como clase ES6. Esta se realiza mediante la declaraci贸n this.state = {}. Presentamos lo expuesto en este ejemplo.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { usuario: "ana" };
  }
  render() {
    const { usuario } = this.state;
    return <div>{usuario}</div>;
  }
}     

En este otro ejemplo podemos ver la declaraci贸n del state con un mayor grado de complejidad:

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      contador: 0,
      estados: false,
      btn: false,
      lista: [],
      usuario: "Julio"
    };
  }
  render() {
    const { contador } = this.state;
    return <div>{contador}</div>;
  }
}   

A partir de la versi贸n 16 de React la inicializaci贸n del state puede realizarse fuera del constructor. De hecho, el constructor puede desaparecer del componente, aunque, este presente states y m茅todos. Para los m茅todos se puede eliminar el .bind(this) de la inicializaci贸n y su implementaci贸n se realizar铆a como se observa en el ejemplo.

import React, { Component } from "react";

class App extends Component {
  state = { estado: false }

  intercambiarEstado = () => {
    this.setState(prevState => ({ estado: !prevState.estado }));
  }

  render() {
    const toggle = this.state.toggle;

    return (
      <div>
        <button onClick={this.intercambiarEstado}>
          {toggle ? "ENCENDIDO" : "APAGADO"}
        </button>
      </div>
    );
  }
} 

Como podemos apreciar en los ejemplos anteriores, se accede al state dentro del m茅todo render con el uso de this.state.nombre-variable.

Actualizando el state

La actualizaci贸n del state se realiza con el uso del m茅todo setState(). En el siguiente ejemplo se ha creado un m茅todo para actualizar el nombre del usuario. Este m茅todo recibe como argumento el nuevo nombre que actualiza el state.

class App extends Component {
  constructor() {
    super();
    this.state = { nombre: "Ana" };
  }

  handleInputChange(n) {
    this.setState({ nombre: n });
  }

  render() {
    return (
      <div>
        <div>
          <input
            type="text"
            value={this.state.nombre}
            onChange={event => this.handleInputChange(event.target.value)}
          />
        </div>
        <p>Tu nombre es {this.state.nombre}</p>
      </div>
    );
  }
}

El m茅todo setState() pone en cola las modificaciones que se realizan en el state e informa que este componente y sus hijos deben volver a representarse con el state actualizado. Este es el m茅todo principal que utiliza para actualizar la interfaz de usuario en respuesta a los controladores de eventos y las respuestas del servidor.

React puede agrupar varias llamadas en una sola actualizaci贸n (as铆ncronas) para mejorar el rendimiento. Esto hace que setState() no siempre actualice inmediatamente el componente y pueden crearse errores en los valores cuando se lea el state justo despu茅s de llamar a setState(). En su lugar, use componentDidUpdate o una devoluci贸n de llamada setState (setState (updater, callback)), los cuales garantizan que se activar谩 despu茅s de que se haya aplicado la actualizaci贸n. En caso de que sea necesario establecer el state en base al state anterior este 煤ltimo se puede pasar a trav茅s del argumento updater en setState como se muestra en el siguiente ejemplo.

this.setState(function(prevState){
  return {contador: prevState.contador + 2};
});    

En pr贸ximos art铆culos nuestro equipo de DevSun Europe seguir谩 profundizando en React, importante biblioteca de JavaScript.


Total de Vistas: 543
Like
Like Love Haha Wow Sad Angry
10

You may also like

 

Deja un comentario

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *

Publicaci贸n recomendada
Scroll Up