Inmutabilidad de ReactJS

Inmutabilidad de ReactJS: este concepto es importante para actualizar cualquier objeto en React y el estado del componente depende de ello. Entendámoslo con un ejemplo. El código que se proporciona a continuación considera el componente Todo , es un componente basado en clases que tiene un estado todos que es una array que representa los elementos de todo. Hay una función de flecha AddTodo que empujará dos todos en el estado. Y en la función de renderizado, estamos mostrando todos. También tiene un botón que activará la función AddTodo . También, tenga en cuentano vinculamos la función, ya que al usar las funciones de flecha, la reacción se encarga de ello. Aparentemente, en este caso, el resultado esperado debería ser que cuando hagamos clic en el botón, la array se mute y vuelva a representar el componente Todo, ya que estamos cambiando el estado en la función agregando dos todos a la lista. Pero el componente no se vuelve a renderizar incluso si hacemos clic en el botón una o varias veces.

Razón por la que sucede esto: En react, los objetos se identifican por su referencia y no por el valor que tienen. Por lo tanto, se vuelve necesario usar un método predefinido (mientras muta el estado) creando un objeto diferente primero de los datos iniciales, agregando nuevos datos por los cuales queremos mutar al nuevo objeto, y luego finalmente establecer el estado del componente en el nuevo objeto Puede consultar el código a continuación.

Paso 1: creación de la aplicación React e instalación del módulo.

npx create-react-app foldername

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

cd foldername

Paso 3: después de crear la aplicación ReactJS, ejecute el servidor de desarrollo con el siguiente comando.

npm start

Estructura del proyecto :

Paso 4: Cree una carpeta de componentes en src y cree un archivo Todos.js en ella. No olvides importarlo al archivo App.js.

Paso 5: agregue el siguiente código en el archivo Todo.js. Aquí hemos creado un componente basado en clases y tiene un estado de todos que es una array.

import React, { Component } from "react";
  
export class Todos extends Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: ["Wake up at 6am", "Get Fresh", 
              "DSA at gfg (6:30am - 8 am)"],
    };
  }
  AddTodo = () => {
    this.state.todos.push(" College ( 9am - 4 pm ) ");
    this.state.todos.push(" badminton (6 - 7 pm) ");
    console.log(" Todos in the AddTodo function ", this.state.todos);
  };
  
  render() {
    console.log(" Todos in the render() ", this.state.todos);
  
    return (
      <div>
        <h2>Today's Todos :</h2>
        {this.state.todos.map((todo, idx) => (
          <div key={idx}>
            <h4> {todo}</h4>
          </div>
        ))}
        <button onClick={this.AddTodo}>Add todo</button>
      </div>
    );
  }
}
  
export default Todos;

Paso 6: archivo App.js

import "./App.css";
import Todos from "./Components/Todos";
  
function App() {
  return (
    <div className="App">
      <Todos />
    </div>
  );
}
  
export default App;

Producción:

Aplicación web en renderizado inicial

Aplicación web al hacer clic dos veces en el botón

Explicación: Como podemos ver, el estado se está mutando y todos se están agregando a la lista. Pero es solo el hecho de que react compara el estado anterior y el estado inicial por referencia y no por valor.

Método correcto: también tenga en cuenta que no es aconsejable mutar el estado directamente, debemos usar el método this.setState() para mutar el estado.

import React, { Component } from "react";
  
export class Todos extends Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: ["Wake up at 6am", "Get Fresh",
              "DSA at gfg (6:30am - 8 am)"],
    };
  }
  AddTodo = () => {
    let newTodos = [...this.state.todos];
    newTodos.push(" College ( 9am - 4 pm ) ");
    newTodos.push(" badminton (6 - 7 pm) ");
  
    this.setState({ todos: newTodos });
    console.log(" Todos in the AddTodo function ", this.state.todos);
  };
  
  render() {
    console.log(" Todos in the render() ", this.state.todos);
  
    return (
      <div>
        <h2>Today's Todos :</h2>
        {this.state.todos.map((todo, idx) => (
          <div key={idx}>
            <h4> {todo}</h4>
          </div>
        ))}
        <button onClick={this.AddTodo}>Add todo</button>
      </div>
    );
  }
}
  
export default Todos;

Salida correcta: