React.Component против React.PureComponent

Question

React.Component против React.PureComponent

90

Официальные документы React заявляют, что " React.PureComponent shouldComponentUpdate() только поверхностно сравнивает объекты", и советуют против этого, если состояние "глубокое".

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

Вопросы:

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

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

semuzaboi 27 дек. 2016, в 06:18

Источник

2

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

Теги:

reactjs

state

2 ответа

0

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

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

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

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

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

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

Mahdi Bashirpour 12 дек. 2018, в 11:42

Ещё вопросы

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

vimal1083 · Accepted Answer · 2017-05-12T11-58-00.000Z

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

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

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

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

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

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

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

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

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

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

Привет @VimalrajSankar. спасибо за помощь здесь. Можете ли вы привести пример следующего утверждения: It means that when comparing scalar values it compares their values, but when comparing objects it compares only references. It helps to improve the performance of the app. ? Спасибо
@ Mr.Script Надеюсь, это поможет stackoverflow.com/a/957602/2557900
State/Props should not have a hierarchy Извините, вы можете немного объяснить, что здесь означает иерархия?
@SanyLiew означает, что состояние и реквизиты должны содержать только примитивные значения, такие как числа и строки, но не объекты внутри объектов (иерархия).
если state / props является неизменяемым объектом, то должно быть нормально иметь иерархию и при этом использовать PureComponent, пока эта иерархия также поддерживает неизменяемый объект, верно?
Этот ответ немного вводит в заблуждение, поскольку все еще можно использовать иерархию объектов, если изменяется один из дочерних элементов, а также изменяется родительская ссылка. например. сделать это, чтобы изменить свойство объекта: this.setState({ obj: Object.assign({}, this.state.obj, { changing: true })) .

React.Component против React.PureComponent

2 ответа

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

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

Ещё вопросы

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