2016-12-27 2 views
32

Официальное сообщение React docs утверждает, что «React.PureComponentshouldComponentUpdate() только неглубоко сравнивает объекты» и советует против этого, если состояние «глубокое».React.Component vs React.PureComponent

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

Вопросы:

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

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

+1

Я знаю, что прошло несколько месяцев с тех пор, как вы разместили это, но я подумал, что эта статья может помочь: https://60devs.com/pure-component-in-react.html – MrOBrian

ответ

57

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

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

  • Штат/Реквизит должен быть неизменный объект
  • Государство/Столбы не должны иметь иерархию
  • Вы должны вызывать forceUpdate, когда данные изменения

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

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

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

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

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

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

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

?.
+0

Привет @VimalrajSankar. Спасибо за помощь здесь. Не могли бы вы привести пример следующего утверждения: 'Это означает, что при сравнении скалярных значений оно сравнивает ir, но при сравнении объектов он сравнивает только ссылки. Это помогает улучшить производительность приложения. Спасибо –

+0

@ Mr.Script Я надеюсь, что это поможет https://stackoverflow.com/a/957602/2557900 – vimal1083

+0

'State/Props не должны иметь иерархию" извините, можете ли вы немного объяснить, что здесь означает иерархия? –

Смежные вопросы