Поверхностное сравнение

Примечание:

shallowCompare устарел. Используйте вместо этого React.memo или React.PureComponent.

Импортирование

import shallowCompare from 'react-addons-shallow-compare'; // ES6
var shallowCompare = require('react-addons-shallow-compare'); // ES5 with npm

Обзор

Перед появлением React.PureComponent shallowCompare использовался для того же, что и PureRenderMixin при использовании ES6-классов с React.

Если функция рендера React-компонента является «чистой» (возвращается тот же результат при таких же пропсах и состоянии), вы можете в некоторых случаях использовать эту функцию для повышения производительности.

Пример:

export class SampleComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  }

  render() {
    return <div className={this.props.className}>foo</div>;
  }
}

shallowCompare поверхностно сравнивает объекты текущих props и state с будущими nextProps и nextState. При переборе ключей сравниваемых объектов возвращается true, если значения ключа в каждом объекте имеют нестрогое равенство.

shallowCompare возвращает true, если поверхностное сравнение пропсов или состояния находит разницу. В таком случае компонент обновится. shallowCompare возвращает false, если поверхностное сравнении пропсов и состояния не находит разницу. Компонент не нуждается в обновлении.