Setstate En Javascript

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

Hacer un seguimiento del estado de una aplicaciòn es còmo una aplicaciòn de una sola página (SAP) registra los cambios y los muestra al usuario. A diferencia de un marco de modelo, vista y controlador (MVC), los SAP no redirigen al usuario y, por lo tanto, necesitan una forma de administrar los cambios que vienen del lado del cliente. Para revisar los marcos MVC, consulte esta guìa . & Nbsp;

En React, los propios componentes pueden administrar su propio estado y volver a renderizar en consecuencia. Esto se hace a través de métodos de ciclo de vida, que se analizan en profundidad aquì. Para el propòsito de este artìculo, veremos còmo cambiar el estado usando setState. & Nbsp;

Esta guìa asume una familiaridad básica con React. Para revisar o aprender los conceptos básicos de React, este artìculo enumera algunos de los mejores recursos de aprendizaje de React. & Nbsp;

Qué es React setState?

El método setState de React es còmo cambiar el estado de un componente con estabilidad. Hay algunas pautas especìficas para cambiar el estado en React. & Nbsp;

  1. setState solo se puede llamar dentro de un componente de clase. Los componentes de la clase llaman al método constructor () y establecen un estado inicial. Luego, podemos cambiar el estado más abajo llamando a setState. & Nbsp;

    Hay dos tipos diferentes de componentes en React. Está el componente funcional y el componente de clase. Para nuestros propòsitos, solo hacemos referencia a componentes de clase. Para obtener más informaciòn, consulte este artìculo sobre las diferencias entre los componentes funcionales y de clase. & Nbsp;
  2. Llamando solo a setState en un componente de clase, podemos hacer referencia directamente al propio componente utilizando la palabra clave this. Llamar a this.setState () es la mejor práctica y garantiza que su còdigo no se romperá. & Nbsp;
  3. No modifique el estado directamente. Modificar el estado directamente no se registrará en React para volver a renderizar. El objetivo de cambiar el estado es activar una reproducciòn de ese componente para reflejar los cambios al usuario. & Nbsp;

Ahora, echemos un vistazo a la sintaxis en el contexto de estas pautas. & nbsp;

setState React Syntax

Comenzando con la primera pauta, ver que solo podemos usar setState dentro de un componente de clase. Como ejemplo, supongamos que tenemos una aplicaciòn de compras y queremos implementar un carrito de compras. Podrìamos configurar un componente de clase llamado Carrito. Este componente será responsable de administrar su propio estado cuando un usuario agrega un artìculo al carrito. & nbsp;

Al desglosar el còdigo anterior, declaramos el componente de clase Cart. Como todos los componentes de clase , ampliamos React.Component. Esta es la sintaxis repetitiva de React. & nbsp;

Ya que queremos para asignar el estado a este componente, tenemos que llamar al método constructor. Luego, se llama al constructor base con super (props). Es posible ver que el constructor base no se llama con accesorios. La documentaciòn oficial de React sostiene que el método del constructor base siempre debe llamarse con accesorios.

Ahora que hemos hecho a través de la sintaxis React requerida para construir un componente de clase para mantener el estado, estamos listos para asignar nuestro estado inicial. Esta es la √∫nica vez que podemos hacer referencia directa al estado. Asignar estado llamando a this.state = {shoppingCart: []} nos permite establecer el estado inicial de nuestro carrito de compras en una matriz vacìa.

Ejemplo de React setState

En la secciòn anterior, vimos la sintaxis involucrada en la declaraciòn de un estado inicial. Una vez que se establece el estado en el método del constructor, podemos renderizar como de costumbre:

Aquì, tenemos un componente de la clase Cart con su estado inicial establecido y está renderizando el carrito en la declaraciòn de devoluciòn del método de representaciòn. Veamos còmo podemos usar setState para actualizar nuestro carrito. & Nbsp;

Definimos una funciòn que agregará un nuevo artìculo a nuestro shoppingCart conservando los artìculos previamente agregados. Usamos el operador de extensiòn de JavaScript (& hellip;) para hacer una copia del estado inicial y actualizarlo con el nuevo estado. De esta manera, el carrito de compras contendrá todos los artìculos agregados.

La funciòn addItem se puede usar dentro del atributo onClick de React de un botòn si queremos que el usuario pueda agregar ese elemento una vez que se hace clic en un botòn. Para nuestros propòsitos, ver còmo usar setState en el el contexto de una funciòn es suficiente. & nbsp;

Este artìculo está destinado a ser una introducciòn para comprender còmo usar setState y de ninguna manera es exhaustivo. & nbsp;

Conclusiòn

En este artìculo, aprendimos qué es setState, algunas pautas de còmo usarlo, la sintaxis y un breve ejemplo. Este es un artìculo básico para animarle a profundizar y practicar la actualizaciòn del estado de un componente por su cuenta.

El documentaciòn oficial de React tiene más ejemplos que brindarán más oportunidades para practicar. Recuerde que en las aplicaciones de una sola página, realizar un seguimiento del estado de un componente es esencial para mostrar los cambios al usuario. & Nbsp;