¿Cómo optimizar el componente React para renderizarlo?

ReactJS depende principalmente de los accesorios (que se le pasan) y del estado del Componente. Por lo tanto, para reducir la cantidad de veces que se renderiza el Componente, podemos reducir los accesorios y establecer que depende. Esto se puede hacer fácilmente separando la lógica de un componente en varios componentes secundarios individuales.

Los componentes secundarios administrarán su propio estado, por lo tanto, no se llamará al componente principal si algún componente secundario cambia su estado.

Para demostrarlo, crearemos una aplicación Demo React.

Paso 1: cree un nuevo proyecto nativo de React ejecutando el comando

npx create-react-app demo

Paso 2: Ahora vaya a la carpeta de su proyecto, es decir, demostración de idioma.

cd demo

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

import logo from "./logo.svg";
import "./App.css";
import React from "react";
import Parent from './screens/parent';
  
function App() {
  
    return (
        <div className="App">
            <Parent />
        </div>
    );
}
  
export default App;

Ahora crearemos 3 componentes Parent.js, Child1.js y Child2.js

import React, { Component } from "react";
import Child1 from "./child1";
import Child2 from "./child2";
export class parent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            countInParent: 0,
        };
    }
    render() {
        console.log("Parent is rendered");
        return (
            <div>
                <h1>Count In Parent {this.state.countInParent}</h1>
                <button
                    type="button"
                    className="btn btn-primary btn-lg"
                    onClick={() => this.setState({ 
                        countInParent: this.state.countInParent + 1 
                    })}
                >
                    button in Parent
                </button>
                <Child1 />
                <Child2 />
            </div>
        );
    }
}
  
export default parent;

import React, { Component } from "react";
  
export class child1 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            countInChildOne: 0,
        };
    }
    render() {
        console.log("Child 1 is rendered");
        return (
            <div>
                <h1>Count In Child One {this.state.countInChildOne}</h1>
                <button
                    type="button"
                    className="btn btn-primary btn-lg"
                    onClick={() =>
                        this.setState({ 
                            countInChildOne: this.state.countInChildOne + 1 
                        })
                    }
                >
                    Button in Child One
                </button>
            </div>
        );
    }
}
  
export default child1;

import React, { Component } from "react";
  
export class child2 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            countInChildTwo: 0,
        };
    }
    render() {
        console.log("Child 2 is rendered");
        return (
            <div>
                <h1>Count In Child Two {this.state.countInChildTwo}</h1>
                <button
                    type="button"
                    className="btn btn-primary btn-lg"
                    onClick={() =>
                        this.setState({ 
                            countInChildTwo: this.state.countInChildTwo + 1 
                        })
                    }
                >
                    Button In Child Two
                </button>
            </div>
        );
    }
}
  
export default child2;

Funcionando: ahora tenemos tres componentes llamados Parent.js, Child1.js y Child2.js. Hemos declarado un estado de contador en los tres y también un botón para aumentar el valor de conteo.

1. Cuando la aplicación se carga por primera vez, los tres componentes se procesan por primera vez.
2. Ahora, cuando hacemos clic en el botón principal, el estado del contador del componente principal aumenta en 1, lo que da como resultado la representación del componente principal, ya que Child1 y Child2 se representan en el mismo componente, ambos también se representan.
3. Ahora hacemos clic en el botón en Child1 que cambia el estado del contador del componente Child1, pero esta vez solo se procesa el componente Child1. Esto se debe a que tanto el componente principal como el secundario2 están separados de la lógica de representación del secundario1.
4. Ahora hacemos clic en el botón en Child2 que cambia el estado del contador del componente Child2, solo se procesa el componente Child2. Esto se debe a que los componentes principal y secundario 1 están separados de la lógica de representación secundaria 2.

Producción:

Por lo tanto, podemos separar fácilmente componentes y estados para reducir el renderizado.

Es útil cuando tenemos múltiples listas en un componente. Si solo renderizamos cada lista en el mismo componente, entonces, al cambiar una lista, también se volverá a renderizar otra lista. Esto ralentizará la aplicación. Por lo tanto, separar cada lista en su propio componente reducirá la repetición.

React a menudo muestra una advertencia de «Lista virtualizada: tiene una lista grande que tarda en actualizarse», lo que también se puede resolver usando un componente separado para representar a cada niño.