Ответ 1

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

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

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

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

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

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

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

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

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

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

Ответ 2

Component и PureComponent имеют одно различие

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

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

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

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

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

Ответ 3

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

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

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

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

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

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

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

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