ReactJS | Estado en reaccionar

En el artículo anterior sobre ReactJS | Componentes , llegamos a saber que los componentes de React se pueden clasificar ampliamente en componentes funcionales y de clase . También se ve que los Componentes Funcionales son más rápidos y mucho más simples que los Componentes de Clase. La principal diferencia entre los dos es la disponibilidad del Estado.
 

¿Qué es Estado?

El estado es una instancia de React Component Class se puede definir como un objeto de un conjunto de propiedades observables que controlan el comportamiento del componente. En otras palabras, el estado de un componente es un objeto que contiene cierta información que puede cambiar durante la vida útil del componente. Por ejemplo, pensemos en el reloj que creamos en este artículo , estábamos llamando explícitamente al método render() cada segundo, pero React proporciona una mejor manera de lograr el mismo resultado y es mediante el uso de State, almacenando el valor de tiempo como miembro del estado del componente. Veremos esto más detalladamente más adelante en el artículo.
 

Diferencia de apoyos y estado.

Ya hemos aprendido sobre Props y llegamos a saber que los Props también son objetos que contienen información para controlar el comportamiento de ese componente en particular, suena familiar para State, pero los props y los estados no son lo mismo. Diferenciemos los dos.
 

• Los accesorios son inmutables, es decir, una vez establecidos, los accesorios no se pueden cambiar, mientras que el estado es un objeto observable que se utilizará para almacenar datos que pueden cambiar con el tiempo y para controlar el comportamiento después de cada cambio.
• Los estados se pueden usar en componentes de clase, componentes funcionales con el uso de React Hooks (useState y otros métodos), mientras que Props no tiene esta limitación.
• Si bien el componente principal establece Props, los controladores de eventos generalmente actualizan el estado. Por ejemplo, consideremos alternar el tema de la página GeeksforGeeks {IDE}. Se puede implementar utilizando State, donde los valores probables de State pueden ser claros u oscuros y, tras la selección, el IDE cambia de color.

Ahora hemos aprendido los conceptos básicos de State y podemos diferenciarlo de Props. También hemos visto algunos lugares donde podemos usar State ahora todo lo que queda es conocer las convenciones básicas del uso de React State antes de implementar uno para nosotros.
Convenciones de uso del estado en React: 
 

• El estado de un componente debe prevalecer a lo largo de la vida, por lo que primero debemos tener algún estado inicial , para hacerlo debemos definir el Estado en el constructor de la clase del componente. Para definir un estado de cualquier clase, podemos usar el formato de muestra a continuación.

  javascript

  Class MyClass extends React.Component {     constructor(props)     {         super(props);         this.state = { attribute : "value" };     } }

• El estado nunca debe actualizarse explícitamente. React usa un objeto observable como el estado que observa qué cambios se realizan en el estado y ayuda al componente a comportarse en consecuencia. Por ejemplo, si actualizamos el estado de cualquier componente como el siguiente, la página web no se volverá a representar porque React State no podrá detectar los cambios realizados. 
   

this.state.attribute = "new-value";

• Por lo tanto, React proporciona su propio método setState(). El método setState() toma un solo parámetro y espera que se actualice un objeto que debe contener el conjunto de valores. Una vez que se realiza la actualización, el método llama implícitamente al método render() para volver a pintar la página. Por lo tanto, el método correcto para actualizar el valor de un estado será similar al siguiente código. 
   

this.setState({attribute: "new-value"});

• La única vez que se nos permite definir el estado explícitamente es en el constructor para proporcionar el estado inicial. 
   
• React es altamente eficiente y, por lo tanto, utiliza actualizaciones de estado asincrónicas, es decir, React puede actualizar varias actualizaciones de setState() de una sola vez. Por lo tanto, usar el valor del estado actual no siempre puede generar el resultado deseado. Por ejemplo, tomemos un caso en el que debemos llevar un conteo (Me gusta de una publicación). Muchos desarrolladores pueden escribir mal el código como se muestra a continuación. 
   

this.setState({counter: this.state.count + this.props.diff});

• Ahora, debido al procesamiento asincrónico, this.state.count puede producir un resultado no deseado. Un enfoque más apropiado sería usar lo siguiente. 
   

this.setState((prevState, props) => ({
  counter: prevState.count + props.diff
}));

• EN el código anterior, estamos usando el formato de función de flecha gruesa ES6 para tomar el estado anterior y las propiedades del componente como parámetros y estamos actualizando el contador. Lo mismo se puede escribir usando la forma funcional predeterminada de la siguiente manera. 
   

this.setState(function(prevState, props){
    return {counter: prevState.count + props.diff};
});

• Las actualizaciones de estado son independientes. El objeto de estado de un componente puede contener múltiples atributos y React permite usar la función setState() para actualizar solo un subconjunto de esos atributos, así como usar múltiples métodos setState() para actualizar cada valor de atributo de forma independiente. Por ejemplo, tomemos en cuenta el siguiente estado del componente. 
   

this.state = {
darkTheme: False,
searchTerm: ''
};

• La definición anterior tiene dos atributos: podemos usar un solo método setState() para actualizar ambos juntos, o podemos usar métodos setState() separados para actualizar los atributos de forma independiente. React fusiona internamente los métodos setState() o actualiza solo aquellos atributos que son necesarios. 
   

Después de leer el artículo, deberíamos tener un concepto claro de Estado en React, pero además del constructor y los métodos de renderizado, ¿podemos agregar funciones definidas por el usuario también? Sí, también podemos crear funciones definidas por el usuario dentro de una clase, pero ¿cómo llamarlas? React proporciona algunos métodos especiales que se llaman en algún contexto adecuado que resuelve este problema. Veremos estas funciones especiales en el próximo artículo sobre el ciclo de vida de un componente.

Para la implementación del estado, vaya al siguiente enlace:

Estado de implementación y ciclo de vida.