APIs
react: Legacy APIs

PureComponent

Atención

Recomendamos definir los componentes como funciones en lugar de clases. Ver cómo migrar.

PureComponent es parecido a Component pero se salta las re-renderizaciones para las mismas props y estado. Los componentes de clase todavía son compatibles con React, pero no recomendamos usarlos en código nuevo.

class Greeting extends PureComponent {
  render() {
    return <h1>Hola, {this.props.name}!</h1>;
  }
}

Uso

Omitir renderizaciones innecesarias para componentes de clase

React normalmente vuelve a renderizar un componente cada vez que su elemento principal vuelve a renderizar. Como optimización, puede crear un componente que React no volverá a renderizar cuando su elemento principal vuelva a renderizar, siempre que sus nuevas props y estado sean los mismos que los antiguas props y estado. Class components pueden optar por este comportamiento extendiendo PureComponent:

class Greeting extends PureComponent {
  render() {
    return <h1>Hola, {this.props.name}!</h1>;
  }
}

Un componente de React siempre debe tener lógica de representación pura. Esto significa que debe devolver el mismo resultado si sus accesorios, estado y contexto no han cambiado. Al usar PureComponent, le está diciendo a React que su componente cumple con este requisito, por lo que React no necesita volver a renderizar siempre que sus accesorios y estado no hayan cambiado. Sin embargo, su componente aún se volverá a representar si cambia un contexto que está usando.

En este ejemplo, observe que el componente Greeting se vuelve a representar cada vez que se cambia name (porque ese es uno de sus accesorios), pero no cuando se cambia address (porque no se pasa a Greeting como accesorio) :

import { PureComponent, useState } from 'react';

class Greeting extends PureComponent {
  render() {
    console.log("El saludo se brindó en", new Date().toLocaleTimeString());
    return <h3>Hola{this.props.name && ', '}{this.props.name}!</h3>;
  }
}

export default function MyApp() {
  const [name, setName] = useState('');
  const [address, setAddress] = useState('');
  return (
    <>
      <label>
        Nombre{': '}
        <input value={name} onChange={e => setName(e.target.value)} />
      </label>
      <label>
        Dirección{': '}
        <input value={address} onChange={e => setAddress(e.target.value)} />
      </label>
      <Greeting name={name} />
    </>
  );
}

Atención

Recomendamos definir los componentes como funciones en lugar de clases. Ver cómo migrar.

Alternativas

Migración de un componente de clase PureComponent a una función

Recomendamos usar componentes de función en lugar de componentes de clase en el nuevo código. Si tiene algunos componentes de clase existentes que usan PureComponent, así es como puede convertirlos. Este es el código original:

import { PureComponent, useState } from 'react';

class Greeting extends PureComponent {
  render() {
    console.log("El saludo se brindó en", new Date().toLocaleTimeString());
    return <h3>Hola{this.props.name && ', '}{this.props.name}!</h3>;
  }
}

export default function MyApp() {
  const [name, setName] = useState('');
  const [address, setAddress] = useState('');
  return (
    <>
      <label>
        Nombre{': '}
        <input value={name} onChange={e => setName(e.target.value)} />
      </label>
      <label>
        Dirección{': '}
        <input value={address} onChange={e => setAddress(e.target.value)} />
      </label>
      <Greeting name={name} />
    </>
  );
}

Cuando conviertes este componente de una clase a una función, envuélvalo en memo:

import { memo, useState } from 'react';

const Greeting = memo(function Greeting({ name }) {
  console.log("El saludo se brindó en", new Date().toLocaleTimeString());
  return <h3>Hola{name && ', '}{name}!</h3>;
});

export default function MyApp() {
  const [name, setName] = useState('');
  const [address, setAddress] = useState('');
  return (
    <>
      <label>
        Nombre{': '}
        <input value={name} onChange={e => setName(e.target.value)} />
      </label>
      <label>
        Dirección{': '}
        <input value={address} onChange={e => setAddress(e.target.value)} />
      </label>
      <Greeting name={name} />
    </>
  );
}

Nota

A diferencia de PureComponent, memo no compara el nuevo y el viejo estado. En los componentes de función, llamando alset function con el mismo estado ya impide que se vuelvan a renderizar de forma predeterminada, incluso sin memo.

Referencia

PureComponent

Para omitir volver a renderizar un componente de clase para las mismas props y estado, extienda PureComponent en lugar de Component:

import { PureComponent } from 'react';

class Greeting extends PureComponent {
  render() {
    return <h1>Hola, {this.props.name}!</h1>;
  }
}

PureComponent es una subclase de Component y admite todas las API de Component.Extender PureComponent es equivalente a definir un método personalizado shouldComponentUpdate que compara superficialmente las props y el estado.

Ver más ejemplos.

PreviousisValidElement

How do you like these docs?