Post Top Ad

Your Ad Spot

jueves, 15 de octubre de 2020

Entendiendo React setState () (Callback, Async-Await y Promises)

 React es una biblioteca de interfaz de usuario basada en componentes. Esto significa que su aplicación es un conjunto de componentes (que forma un árbol con componentes raíz y secundarios)

La mayoría de las veces, sus componentes React tendrán estado. El estado está formado por variables que contienen cosas como si un usuario está conectado o no o una serie de publicaciones.

Según los docs . Al igual que las "propiedades", el estado es un objeto JS simple que contiene información que afecta la salida del render()método. El estado se gestiona dentro del componente.

Dentro de un componente de React, tiene dos categorías de datos - accesorios y estado - los accesorios son simplemente propiedades que son pasadas por el componente principal. Permanecen fijos durante toda la vida útil del componente. Por otro lado, el estado son datos que cambian con el tiempo. Piense en accesorios como parámetros de función y estados como variables locales.

Al final de este tutorial, comprenderá cómo setState()funciona React.

Qué es React setState

React setState()es una función que muta el estado del componente (es decir this.state). Los documentos de React recomiendan usar el setState()método en lugar de establecer valores de estado directamente, es decir, hacer algo como this.state.someState = 'someValue'(excepto en el constructor), ya que usar el último enfoque no garantiza que React conozca las actualizaciones actuales en estado, por lo que puede volver a renderizarse correctamente. lo que puede dar lugar a algunos resultados inconsistentes.

El estado de los componentes es un concepto de esquina en React (junto con el concepto de componente en sí) y es simplemente una variable (Objeto JavaScript antiguo simple) que almacena información interna de un componente dado.

Fuera de un constructor, debe usar setState()para actualizar el estado de su componente. Este método toma un objeto JavaScript que se fusiona con el estado del componente, pero eso no es lo único que necesita saber sobre el setState()para usarlo correctamente en su aplicación. Aquí hay una lista de cosas que debe saber:

  • setState () es asincrónico
  • setState () puede tener una función como parámetro en lugar de un objeto
  • setState () puede tener una función de devolución de llamada

setState()Ejemplo de reacción

Después de inicializar el estado de su componente, debe usar el setState()método para actualizar el estado posteriormente. Tomemos este componente de ejemplo simple de nuestro tutorial anterior :

import React, { Component } from 'react';

class App extends Component {
  state = {
    todos: []
  }
  componentDidMount() {
    fetch('http://jsonplaceholder.typicode.com/todos')
    .then(res => res.json())
    .then((data) => {
      this.setState({ todos: data })
      console.log(this.state.todos)
    })
    .catch(console.log)
  }
  // [...]
}
export default App;

Tenemos un todosestado que mantendrá todos los todos que vamos a buscar de la API REST en el componentDidMount()gancho.

En el constructor del componente estamos pasando una matriz vacía al todosestado.

Después de obtener datos de la API REST , usamos la siguiente línea para actualizar el estado del componente:

this.setState({ todos: data }) 

Como puede ver, pasamos un objeto JavaScript al setState()método. Este objeto contiene la parte del estado que pretendemos actualizar que, en este caso, es la todosmatriz. React simplemente fusiona el valor del todosobjeto con el todosobjeto en la variable de estado.

Este proceso se llama reconciliación .

La reconciliación se refiere a cómo React actualiza el DOM. Básicamente, realiza cambios en el componente después del cambio de estado. Cuando llama setState(), React crea un nuevo árbol que contiene los elementos reactivos en el componente y el nuevo estado. Luego, este árbol se usa para averiguar cómo debería cambiar nuestro componente haciendo una comparación con el árbol de componentes anterior usando un algoritmo diferente que permite a React actualizar solo la parte DOM que necesita ser cambiada.

El resumen de setState

React proporciona el stateobjeto para almacenar y el estado interno de un componente y el setState()método para cambiar el estado.

Esto es lo que debe saber al usar setState()

  • Solo debe usarlo setState()para actualizar el estado del componente, es decir, no debe cambiar el objeto de estado directamente, excepto al iniciar el estado.
  • al setState()método se le puede pasar un objeto o una función.
  • Debe pasar una función setState()cuando desee aplicar una actualización posterior / múltiple al estado y no dependa del valor de this.stateinmediatamente después de la invocación setState().

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas