¿Qué es un componente funcional puro en ReactJS?

¿Qué es una función JavaScript?

Una función de JavaScript es un bloque de código diseñado para realizar una tarea particular que se ejecuta cuando se llama.

¿En qué se parecen los componentes funcionales de React a las funciones de JavaScript?

Conceptualmente, los componentes son como funciones de JavaScript. Un componente funcional es una función de JavaScript que devuelve JSX en React. Estas funciones aceptan entradas arbitrarias (a menudo llamadas «accesorios») y devuelven elementos React que describen lo que debería aparecer en la pantalla.

¿Cuándo un componente React es puro?

Se dice que una función es pura si el valor de retorno está determinado únicamente por sus valores de entrada y el valor de retorno es siempre el mismo para los mismos valores de entrada.

Se dice que un componente de React es puro si genera el mismo resultado para el mismo estado y accesorios. Para los componentes de clase pura React, React proporciona la clase base PureComponent. Los componentes de clase que amplían las clases React.PureComponent se tratan como componentes puros.

Crear aplicación de reacción:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app pure-react

• Paso 2: después de crear la carpeta de su proyecto, es decir, reacción pura, muévase a ella con el siguiente comando:

  cd pure-react

Estructura del proyecto: Tendrá el siguiente aspecto.

Nombre de archivo: App.js

import React from 'react';
import GeeksScore from './geekscore';
  
export default function App() {
  return (
    <div>
      <GeeksScore score="100" />
    </div>
  );
}

import React from 'react';
  
class GeeksScore extends React.PureComponent {
  
  render() {
    const { score, total = Math.max(1, score) } = this.props;
  
    return (
      <div>
        <h6>Geeks Score</h6>
        <span>{ Math.round(score / total * 100) }%</span>
      </div>
    )
  }
  
}
  
export default GeeksScore;

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:

¿Por qué componentes puros?

Los componentes puros tienen algunas mejoras de rendimiento y optimizaciones de renderizado porque React implementa el método shouldComponentUpdate() para ellos con una comparación superficial de accesorios y estado.

¿Qué es un componente funcional puro en React?

Los componentes funcionales son muy útiles en React, especialmente cuando queremos aislar la gestión de estado del componente React. Es por eso que a menudo se les llama componentes sin estado.

Sin embargo, los componentes funcionales no pueden aprovechar las mejoras de rendimiento y las optimizaciones de representación que vienen con React.PureComponent , ya que no son clases por definición.

La optimización de un componente funcional, para que React pueda tratarlo como un componente puro, no debería necesariamente requerir que el componente se convierta en un componente de clase. Para crear un componente funcional puro en React, React proporciona una API React.memo() . Usando la API React.memo() , el componente funcional de React se puede ajustar de la siguiente manera para obtener el componente funcional puro de React.

Algunas cosas importantes sobre la API React.memo() son:

• React.memo() es un componente de orden superior que toma un componente React como primer argumento y devuelve un componente React puro.
• El tipo de componente React devuelto usando React.memo() permite que el renderizador renderice el componente mientras memoriza la salida.
• React.memo() también funciona con componentes que usan ReactDOMServer.

import React from 'react';
import GeeksScore from './geekscore';
  
export default function App() {
  return (
    <div>
      <GeeksScore score="100" />
    </div>
  );
}

import React, { memo } from 'react';
  
function GeeksScore({ score = 0, total = Math.max(1, score) }) {
  return (
    <div>
      <h2>Geeks Score</h2>
      <span>{ Math.round(score / total * 100) }%</span>
    </div>
  )
}
  
export default memo(GeeksScore);

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: