Официальная React docs заявляет, что «React.PureComponentshouldComponentUpdate () только поверхностно сравнивает объекты», и рекомендует этого не делать, если состояние равно «глубокий».

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

Вопросы:

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

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

semuzaboi

Ответов: 4

Ответы (4)

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

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

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

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

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

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

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

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

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

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

A Вариант использования

Рекомендуется использовать чистые компоненты при рендеринге большого количества компонентов

Например, рендеринг сотен товаров внутри FlatList или я буду использовать .map ()

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

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

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

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

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

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

• 100001

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

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

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

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

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

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

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

2022 WebDevInsider