Componentes puros de ReactJS

En general, en ReactJS , usamos el método de ciclo de vida shouldComponentUpdate() para personalizar el comportamiento predeterminado e implementarlo cuando el componente React debe volver a renderizarse o actualizarse.

Requisito previo: 

• Componentes de ReactJS
• Componentes de ReactJS – Conjunto 2

Ahora, ReactJS nos ha proporcionado un componente puro . Si extendemos una clase con Pure Component , no hay necesidad del método de ciclo de vida shouldComponentUpdate() . ReactJS Pure Component Class compara el estado actual y los accesorios con nuevos accesorios y estados para decidir si el componente React debe volver a renderizarse o no.

En palabras simples, si el valor anterior de state o props y el nuevo valor de state o props es el mismo, el componente no se volverá a renderizar. Dado que Pure Components restringe el renderizado cuando no se utiliza el renderizado del componente. Los componentes puros son componentes de clase que amplían React.PureComponent . 

Ejemplo : programa para demostrar la creación de componentes puros. 

import React from ‘react’;
  
export default class Test extends React.PureComponent{
   render(){
      return <h1>Welcome to GeeksforGeeks</h1>;
   }
}

Salida :

La extensión de los componentes de la clase React con componentes puros garantiza un mayor rendimiento del componente y, en última instancia, hace que su aplicación sea más rápida. Mientras que, en el caso del componente regular, siempre volverá a generar el valor de los cambios de estado y accesorios o no.

Al usar componentes puros, las cosas que se deben tener en cuenta son que, en estos componentes, el valor del estado y los accesorios se comparan superficialmente ( comparación superficial) y también se ocupa implícitamente del método de ciclo de vida » shouldComponentUpdate » . Por lo tanto, existe la posibilidad de que si estos objetos State y Props contienen una estructura de datos anidada, la actualización de componente implementada de Pure Component devolverá falso y no actualizará todo el subárbol de elementos secundarios de este componente de clase. Entonces, en Pure Component , la estructura de datos anidados no funciona correctamente.

En este caso, los objetos de estado y accesorios deben ser objetos simples y los elementos secundarios también deben ser puros, lo que significa devolver la misma salida para los mismos valores de entrada en cualquier instancia.