PureComponent

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

• Ссылка
  • PureComponent
• Использование
  • Пропуск ненужных повторных отрисовок для компонентов-классов
• Альтернативы
  • Миграция из компонента-класса PureComponent к функции

Ссылка

PureComponent

Чтобы пропустить повторную отрисовку компонента-класса при одинаковых свойствах и состоянии, расширьте PureComponent вместо Component:

import { PureComponent } from 'react';

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

PureComponent — подкласс Component и поддерживает все API Component. Расширение PureComponent эквивалентно определению пользовательского метода shouldComponentUpdate, который выполняет поверхностное сравнение свойств и состояния.

См. дополнительные примеры ниже.

Использование

Пропуск ненужных повторных отрисовок для компонентов-классов

React обычно перерисовывает компонент всякий раз, когда перерисовывается его родительский компонент. В качестве оптимизации можно создать компонент, который React не будет перерисовывать, когда перерисовывается его родительский компонент, если его новые свойства и состояние совпадают со старыми свойствами и состоянием. Классовые компоненты могут воспользоваться этим поведением, расширив PureComponent:

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

Компонент React всегда должен иметь логику чистой отрисовки. Это означает, что он должен возвращать тот же вывод, если его свойства, состояние и контекст не изменились. Используя PureComponent, вы сообщаете React, что ваш компонент соответствует этому требованию, поэтому React не нужно перерисовывать его, пока не изменятся его свойства и состояние. Однако ваш компонент всё ещё будет перерисовываться, если изменится используемый контекст.

В этом примере обратите внимание, что компонент Greeting перерисовывается всякий раз, когда изменяется name (потому что это одно из его свойств), но не тогда, когда изменяется address (потому что оно не передается в Greeting в качестве свойства):

import { PureComponent, useState } from 'react';

class Greeting extends PureComponent {
  render() {
    console.log("Greeting was rendered at", new Date().toLocaleTimeString());
    return <h3>Hello{this.props.name && ', '}{this.props.name}!</h3>;
  }
}

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

Альтернативы

Миграция из компонента-класса PureComponent к функции

Мы рекомендуем использовать функциональные компоненты вместо компонентов-классов в новом коде. Если у вас есть некоторые существующие компоненты-классы, использующие PureComponent, вот как вы можете их преобразовать. Это исходный код:

import { PureComponent, useState } from 'react';

class Greeting extends PureComponent {
  render() {
    console.log("Greeting was rendered at", new Date().toLocaleTimeString());
    return <h3>Hello{this.props.name && ', '}{this.props.name}!</h3>;
  }
}

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

Когда вы преобразуете этот компонент из класса в функцию, оберните его в memo:

import { memo, useState } from 'react';

const Greeting = memo(function Greeting({ name }) {
  console.log("Greeting was rendered at", new Date().toLocaleTimeString());
  return <h3>Hello{name && ', '}{name}!</h3>;
});

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