Estado De Javascript

Michael Zippo 04.11.2021

¿Alguna vez has oìdo hablar de state en la biblioteca de JavaScript React pero no sabes còmo usarlo? El estado se refiere a " còmo aparece cada objeto en una página web. & Rdquo; El concepto es simple & mdash; & nbsp; Es una colecciòn de datos relacionados con el estado actual del componente, que se puede modificar cambiando los datos que lo describen. Cada vez que los datos cambian, se vuelven a mostrar en la pantalla de la computadora. & Nbsp;

La parte más difìcil del estado es saber còmo y cuándo usarlos. Pero no se preocupe porque este tutorial cubre còmo se usa el estado.

Para brindarle una breve descripciòn general, para establecer el estado inicial, use this.state en un constructor de JavaScript . Para actualizar el estado, use el método setState. Hablaremos más sobre el estado y algunas formas de usar el estado en este tutorial.

¿Qué es React State?

React state es un objeto con un conjunto de propiedades que usted designa para un componente. , y eso contribuye a còmo se representa el componente. Un componente que tiene state se denomina con estado. Por lo general, lo usa si un componente necesita realizar un seguimiento de la informaciòn relacionada con él entre representaciones.

Un ejemplo serìa un " like " componente de botòn que necesita realizar un seguimiento del n√∫mero de veces que se hace clic en él. Esto tiene que volver a renderizarse en la pantalla cada vez que se presiona el botòn Me gusta para mostrar el n√∫mero actualizado de Me gusta. Y para eso, tenemos que asegurarnos de que el componente del botòn Me gusta realice un seguimiento de la informaciòn, en lugar de simplemente reproducir repetidamente la informaciòn que codificamos con él. Después de todo, no quiere perder esos Me gusta.

Se puede acceder a los datos de estado de un componente a través de this.state y se pueden cambiar usando .setState método. El estado es privado ya que solo puede ser cambiado por el componente que contiene el estado.

Mucha gente confunde el estado con props, otro objeto react, pero hay diferencias entre los dos. Uno de ellos es que el estado es dinámico, lo que significa que los datos que contiene pueden cambiar y, por lo tanto, afectar el comportamiento del componente. Los accesorios, por otro lado, son inmutables, lo que significa que "su estado no puede cambiar después de su construcciòn".

React State Syntax

El estado se define inicialmente en la funciòn llamada constructor. Esto se debe a que aunque el estado puede cambiar, queremos asegurarnos de que haya un valor inicial presente. El formato general para definir el estado es:

Por ejemplo, si está creando un componente de temporizador, debe definir el estado de inicio como this.state = {seconds: 0}. Sabes que un temporizador cambiará de estado cada segundo, pero tiene que empezar a contar en alg√∫n lugar. El componente que está codificando se denomina " este & rdquo ;. Esta declaraciòn cambia el estado del componente al establecer uno de sus atributos (" segundos ") para que sea igual al valor que elija definir (" 0 " en este caso). & Nbsp; & nbsp;

Aquì hay un archivo index.js de muestra para un componente llamado " Person & rdquo ;. Agregaremos cuatro valores & mdash; nombre, ocupaciòn, cabello y edad & mdash; al objeto de estado en el componente:

// declaraciones básicas de importaciòn de React

// Componente que llamamos " Person & rdquo ;, con propiedades de estado definidas en el constructor:

// Una funciòn de renderizado que define lo que se renderizará en la pantalla:

La √∫ltima lìnea dice que el còdigo pasará por su documento HTML y buscará para el elemento que tiene el id " root & rdquo ;, y renderiza lo que le has indicado que haga en el método render () anterior. Es por eso que debe asegurarse de agregar lo siguiente dentro del cuerpo del documento de su archivo index.html:

Esta etiqueta HTML tiene el atributo ID establecido en " root & rdquo ;. Aquì es donde irá todo lo que le pidiò al componente que renderizara.

Puede hacer referencia al objeto de estado escribiendo this.state.attributeName. Hacer esto reemplazará " attributeName " con los atributos definidos.

Aquì hay un ejemplo que utiliza las propiedades que definimos anteriormente para crear el estado de nuestra " Persona " componente. Usaremos el formato {this.state.attribute} para llamar al valor del atributo del componente en el que estamos escribiendo nuestro còdigo. & Nbsp;

En este caso, copiaremos el siguiente método en nuestro componente " Persona ", que será a lo que se refiere " esto ". La pantalla mostrará el valor perteneciente al atributo que escribimos. Reemplazar la instrucciòn render () de nuestro componente " Person " en el √∫ltimo ejemplo con este:

La pantalla mostrará un encabezado con el valor del atributo "nombre", que es Tom Hiddleston. Debajo habrá un párrafo que diga "Tom Hiddleston es actor y tiene 40 a√±os". el cabello es actualmente negro. " & nbsp;

El método .setState ()

Utilice this.setState () para actualizar los valores de un objeto de estado . Este método toma un argumento, que será un nuevo atributo y su valor: {atributo: " nuevo valor " }. Los métodos se utilizan para hacer esto porque React llamará al método de renderizado detrás de escena para que su nuevo contenido siempre se renderice.

Aquì hay un ejemplo usando nuestra " Person " componente de antes. Agregue el siguiente còdigo a la etiqueta " Person " còdigo de componente que vimos al principio del artìculo.

Agregue una funciòn de cambio de ocupaciòn a " Persona " en la clase y rsquo; cuerpo. Esta funciòn llamará al método .setState. El atributo escrito aquì es el atributo de ocupaciòn y escribimos el valor al que queremos cambiarlo. Recuerde de la " Persona " còdigo de componente que la ocupaciòn es actualmente " actor & rdquo ;.

ocupaciòn = () =" {this.setState ({ocupaciòn: " modelo "});}
Inserte el siguiente còdigo de botòn dentro del " s main "div" del método .render (). Agregará un botòn que llama a la funciòn de ocupaciòn cuando un usuario hace clic en él, de ahì el " onClick " atributo. El botòn tendrá "¬°Cambio de ocupaciòn!" escrito en su interior.

"button type = " button " onClick = {this.occupation}" ¬°Cambio de ocupaciòn! "/ button"

¬°Y ahì lo tienes! Ahora, puede ver un botòn que llama a la funciòn del paso uno. El método contiene un método .setState () en el que el atributo de ocupaciòn está configurado para tener un nuevo valor, " modelo & rdquo ;.

< / a>

Varios métodos .setState () no se procesan en orden, por lo que esto puede presentar conflictos que debe tener en cuenta & mdash; lea más sobre esos aquì . Esto es importante porque cuando tu còdigo crece y hay más lìneas y más estados de React escritos, tienes que pensar en còmo funcionarán juntos. Esto puede ser difìcil de hacer, especialmente con la naturaleza asincrònica de React, donde no puedes predecir en qué orden van tus métodos setState para ser procesado. & nbsp;

¿Tiene que usar State?

La respuesta simple es no, no lo hace. Hay dos tipos principales de componentes de React: componentes funcionales y componentes de clase. Los componentes sin estado son componentes funcionales. error, no hay estado en un componente & mdash; tienes que crearlo t√∫ mismo.

Sin el estado, tu aplicaciòn no será muy interactiva, sin embargo. Incluso si opta por implementar el estado, se recomienda que no sea demasiado entusiasta en su uso. Esto se debe a que el uso excesivo de State en los componentes puede dificultar la previsiòn de posibles conflictos debido a la complejidad involucrada.

Conclusiòn

State y Props son dos objetos importantes a tener en cuenta cuando usando React. State realiza un seguimiento del estado actual de un componente a medida que cambia seg√∫n la actualizaciòn de los datos que definen un estado. Los accesorios, por otro lado, no cambian. & Nbsp; Una simple regla general con respecto a cuál usar es preguntar "¿Se cambiarán los atributos de este componente en alg√∫n momento?". Si la respuesta es " sì & rdquo ;, entonces desea usar la categorìa de estado, ya que Props es inmutable. & Nbsp;

Antes de sumergirse de lleno en React , aseg√∫rese de estar familiarizado con JavaScript ES6 sintaxis, ya que React hace uso de muchas de sus caracterìsticas, como funciones de flecha, clases y tipos de variables. Además, hubo cambios en React con respecto al uso del estado y otras caracterìsticas sin tener que escribir una clase en la actualizaciòn reciente de React, React Hooks .