Официальным Реагировать Документы состояния, « React.PureComponent«ы shouldComponentUpdate()только неглубоко сравнивают объекты», и советует против этого , если состояние„глубокого“.

Учитывая это, есть ли причина, по которой следует отдавать предпочтение React.PureComponentпри создании компонентов React?

Вопросы :

• есть ли какое-то влияние на производительность, React.Componentкоторое мы можем рассмотреть React.PureComponent?
• Я предполагаю , что shouldComponentUpdate()из PureComponentпреформ только неглубокие сравнения. Если это так, нельзя ли использовать этот метод для более глубоких сравнений?
• «Кроме того, React.PureComponent«s shouldComponentUpdate()скачет проп обновления для всего компонента поддерева»- Означает ли это , что изменения проп игнорируются?

Вопрос возник из чтения в этот средний блог , если это поможет.

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

Вы должны идти, React.PureComponentкогда вы можете выполнить любое из следующих условий.

• State / Props должен быть неизменным объектом
• State / Props не должны иметь иерархию
• Вы должны позвонить, forceUpdateкогда данные изменяются

Если вы используете, React.PureComponentвы должны убедиться, что все дочерние компоненты также чистые.

есть ли какое-либо влияние на производительность при использовании React.component, которое мы можем рассмотреть для использования React.PureComponent?

Да, это повысит производительность вашего приложения (из-за поверхностного сравнения)

Я предполагаю, что shouldComponentUpdate () из Purecomponent выполняет только поверхностные сравнения. Если это так, не может ли упомянутый метод использоваться для более глубоких сравнений?

Вы правильно догадались. Вы можете использовать его, если вы удовлетворяете любому из условий, упомянутых выше.

«Кроме того, React.PureComponent shouldComponentUpdate () пропускает обновления реквизитов для всего поддерева компонента» - означает ли это, что изменения реквизита игнорируются?

Да, изменения реквизита будут игнорироваться, если не удалось найти разницу в поверхностном сравнении.

Componentи PureComponentесть одно отличие

PureComponentточно так же, как Componentза исключением того, что он обрабатывает shouldComponentUpdateметод для вас.

При изменении реквизита или состояния PureComponentбудет проведено поверхностное сравнение как реквизита, так и состояния. Componentс другой стороны, не будет сравнивать текущие реквизиты и состояние со следующим из коробки. Таким образом, компонент будет перерисовываться по умолчанию при каждом shouldComponentUpdateвызове.

Мелкое Сравнение

При сравнении предыдущих реквизитов и состояния со следующим, поверхностное сравнение проверит, что примитивы имеют одинаковое значение (например, 1 равно 1 или что true равно true) и что ссылки одинаковы между более сложными значениями javascript, такими как объекты и массивы.

Источник: https://codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81

Основное отличие, на мой взгляд, состоит в том, что компонент переопределяется каждый раз, когда переопределяется его родитель, независимо от того, изменились ли реквизиты и состояние компонента.

Чистый компонент, с другой стороны, не будет перерисовываться, если перерисовывается его родительский объект, если только реквизиты (или состояние) чистого компонента не изменились.

Например, допустим, что у нас есть дерево компонентов с трехуровневой иерархией: родитель, дети и внуки.

Когда реквизиты родителя меняются таким образом, что меняются реквизиты только одного потомка, то:

• если все компоненты являются обычными компонентами, то все дерево компонентов будет перерисовано
• если все дети и внуки являются чистыми компонентами, то будет переставлен только один ребенок и один или все его внуки, в зависимости от того, были ли изменены их реквизиты. Если в этом дереве компонентов много компонентов, это может означать значительное повышение производительности.

Иногда, однако, использование чистых компонентов не будет иметь никакого влияния. У меня был такой случай, когда родитель получил свой реквизит из магазина редуксов, и мне нужно было выполнить сложный расчет реквизита своих детей. Родитель использовал плоский список для визуализации своих потомков.

Результатом стало то, что каждый раз, когда происходило даже небольшое изменение в хранилище редуксов, весь плоский список данных детей пересчитывался. Это означало, что для каждого компонента в дереве реквизиты были новыми объектами, даже если значения не менялись.

В этом случае чистые компоненты не помогают, и повышение производительности может быть достигнуто только с помощью обычных компонентов и проверки в дочерних элементах, в shouldComponentUpdate, если требуется повторное отображение.