¿Cómo trabajar y manipular el estado en React?

Los componentes en React proporcionan el JSX (si es un principiante, considérelo un poco similar a HTML), puede contener etiquetas HTML y expresiones de JavaScript, ReactDOM de alguna manera lo procesa y, en consecuencia, muestra algo en la interfaz. Todo funciona bien hasta que solo tiene que mostrar contenido estático, pero ¿qué pasa si su sitio web es dinámico y tiene que cambiar algo en la interfaz, según la interacción del usuario? En este caso, puede usar algo como eventos y controlador de eventos para interactuar con el usuario o tal vez varias otras cosas internas como el ajuste dinámico, etc. Pero, ¿cómo le dirías a ReactDOM que muestre algo basado en algunos cambios que ocurrieron debido a la interacción del usuario?

Enfoque: la forma de volver a renderizar un componente con ReactDOM es a través de un cambio de estado . Es un objeto incorporado en los componentes de reacción, tiene algunas funcionalidades predefinidas y contiene información sobre la interfaz de usuario que se representará en la interfaz, también controla todo el comportamiento de un componente. Podemos hacer uso del objeto de estado para arrojar información sobre los componentes para que ReactDOM pueda representar algo de acuerdo con esa información, básicamente, es un almacenamiento de datos dinámico para los componentes. También podemos administrar internamente el estado para diferentes propósitos, las fuerzas de cambio en el estado reaccionan para llamar a la función de renderizado y otros métodos/ganchos del ciclo de vida en el caso del componente funcional. 

Creando la aplicación de reacción e instalando el módulo: 

Paso 1: Creación de la aplicación React

npx create-react-app state-demo

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd state-demo

Estructura del proyecto: Tendrá el siguiente aspecto.

Ahora, primero veremos cómo crear y manipular estados con componentes de clase .

1. Estado de inicialización:

Sintaxis:

• Inicializando objeto de estado dentro del constructor

  constructor() {
      super();  // Don’t Forget to pass props if received
      this.state = {
          // Any object
      };
  }

• Inicializando el objeto de estado usando la propiedad de clase

  class MyComponent extends React.Component {
      state = {
          // any object
      };
  }

2. Estado de acceso: podemos acceder al objeto de estado en cualquier parte del componente con » this.state», el estado es local, así que no intente acceder a él desde un componente externo, si lo necesita fuera, de alguna manera puede pasarlo como accesorios.

3. Manipulación del estado: el componente de clase nos proporciona una función setState que podemos llamar en cualquier parte del componente para manipular el estado. 

• Cambiar el objeto de estado con un objeto proporcionado como argumento al llamar a setState.

  this.setState({
      // anyobject
  });

• Cuando tenemos que actualizar en función del estado anterior, pasamos una función que obtiene el estado anterior como parámetro.

  this.setState((prevState) => {
      // Do return a new state object 
      // after some manipulations 
  });

• Las acciones de setState son asincrónicas, por lo que cuando tenemos que hacer algo (por ejemplo, obtener contenido dinámico, cambiar componentes internamente, etc.) estrictamente después de que se haya actualizado el estado, pasamos una función de devolución de llamada como segundo argumento a la función setState.

Ejemplo: en este ejemplo, estamos usando un componente basado en clases e imprimiendo una línea para indicar que la función de devolución de llamada se ejecuta justo después de las actualizaciones de estado, esto se puede usar cuando tenemos que ejecutar alguna ejecución de código estrictamente después de las actualizaciones de estado, un caso de uso simple para este escenario puede obtener cualquier contenido dinámico a través de la API, es decir, cuando hacemos clic en la sección de algoritmos de la página de inicio de GFG, obtiene la lista de todos los temas, esto se puede hacer mediante una solicitud GET dentro de la función de devolución de llamada de setState que establece el botón de algoritmos hizo clic

import React from 'react';
import ReactDOM from 'react-dom';
  
class MyComponent extends React.Component {
    constructor(){
        super();
  
        this.state = {
            clicked:0
        }
    }
    stateManipulater = ()=>{
        this.setState((prevState)=>{
           return {clicked:prevState.clicked+1};
        }, ()=>{            
        console.log("This line will only get "
          + "printed after state gets updated");  
        })
    }
  
 render (){
    return <div><h3>Illustration of Working with State!</h3> 
          
    <p>
        This Button is associated with an integer state 
        which increments on click and UI re-renders 
        accordingly
    </p>
  
    <button onClick={this.stateManipulater} >
        {`Clicked ${this.state.clicked} Times`} 
    </button></div>
 }
}
  
ReactDOM.render(
    <MyComponent/>,    // What to Display
    document.getElementById('root')   // Where to Display
);

Producción:

Explicación: Esta es la salida del código anterior, justo después de hacer clic en el botón, se genera el evento que llama a la función this.setState para manipular el estado, e inmediatamente después de eso, la función de devolución de llamada pasa como un segundo argumento a this.setState se ejecuta , y la línea se imprime en la consola.

Ahora veremos cómo usar y manipular el estado en componentes funcionales .

Sintaxis:

1. Estado de inicialización: tenemos useState gancho para trabajar con el estado en el componente funcional, useState recibe el estado inicial como argumento y devuelve la variable de estado junto con una función que luego se puede usar para establecer el estado asociado con él.

const [state, setState] = useState(intialState);

// Note:- You are not restricted to name state variable
// as "state" and function as "setState"

2. Estado de acceso: podemos acceder al estado con el nombre directamente en cualquier lugar de un componente funcional como » estado «. 

3. Manipulación de estado: la función que recibimos de useState se usa para manipular la variable de estado asociada. 

• Cambiar el objeto de estado con un objeto proporcionado como argumento durante la llamada.

setState(arg);

• Cuando tenemos que actualizar en función del estado anterior, pasamos una función que obtiene el estado anterior como parámetro.

setState((prevState)=>{
    // Do return a new state object after some manipulations 
});

• A diferencia de la clase, el componente funcional no nos proporciona la devolución de llamada cuando el estado ha cambiado, pero el enlace useEffect se puede usar para lograr lo mismo, useEffect llama a la función dada cada vez que cambia algo de la array de dependencia.

Ejemplo: en este ejemplo, estamos imprimiendo una línea para indicar que la función de devolución de llamada se ejecuta justo después de las actualizaciones de estado, esto se puede usar cuando tenemos que realizar alguna ejecución estrictamente después de las actualizaciones de estado, un caso de uso simple para este escenario puede ser obtener cualquier contenido dinámico a través de la API, es decir. Cuando hacemos clic en la sección de algoritmos de la página de inicio de GeeksforGeeks, obtiene la lista de todos los temas, esto se puede hacer mediante una solicitud GET dentro de la función de devolución de llamada de setState que establece el botón de algoritmos en el que se hizo clic.

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
  
function MyComponent (){
    const [state, setState] = useState({clicked:0});
  
    const stateManipulater = ()=>{
        setState((prevState)=>{
           return {clicked:prevState.clicked+1};
        })
    }
    useEffect(()=>{    
        console.log("This line will only get "
        + "printed after state gets updated");  
    }, [state])
  
    return <div><h3>Illustration of Working with State!</h3> 
        <p>
            This Button is associated with an integer
            state which increments on click and UI 
            re-renders accordingly 
        </p>
  
        <button onClick={stateManipulater} > 
        {`Clicked ${state.clicked} Times`} </button>
    </div>
}
  
ReactDOM.render(
    <MyComponent/>,    // What to Display
    document.getElementById('root')   // Where to Display
);

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Explicación: Esta es la salida del código anterior, justo después de hacer clic en el botón, el controlador de eventos cambia el estado e inmediatamente después de eso, el componente nota que algo dentro de la array de dependencias de useEffect ha cambiado, por lo tanto, ejecuta inmediatamente su funcionalidad y solo hemos escrito el registro de la consola en su interior para que la línea se imprima justo después del cambio de estado.

Puntos a recordar mientras se trabaja con el estado:

1. Nunca cambies el estado explícitamente, porque de esta manera, react no podrá observar los cambios de estado y el comportamiento del componente no se verá afectado, así que siempre usa la función setState proporcionada por el componente.

2. Como entendió que el cambio de estado provoca que los componentes se vuelvan a renderizar, por lo tanto, siempre vigile los lugares donde el estado está cambiando, a veces pequeños errores pueden causar renderizados adicionales o, en el peor de los casos, infinitos, lo que en consecuencia dificultará su aplicación. Más lento.  

3. Si tiene varios elementos en el objeto de estado o array, y solo tiene que cambiar un elemento, no olvide distribuir los datos; de lo contrario, sobrescribirá el objeto/array con ese único elemento porque el estado se actualiza como una fusión superficial.

4. Después de actualizar el estado, no confíe en el hecho de que el estado seguramente se actualizó, en algunos casos puede llevar un poco de tiempo debido al funcionamiento interno de REACT, por lo que si tiene un uso inmediato del estado actualizado crea tu propio.