Реагируйте PureComponent и shouldComponentUpdate

Question

Я знаю о PureComponent, но из глубокой мысли я запутался в этом.

ShouldComponentUpdate функция вызывается при изменении состояния или реквизита.Итак, мы точно знаем, что что-то в состоянии или реквизитах изменяется, если вызывается ShouldComponentUpdate.И эти изменения должны быть отражены в представлении компонентов также.Если состояние или реквизиты не изменены, shouldComponentUpdate никогда не вызывается.

PureComponent обеспечивает поверхностное сравнение между старым состоянием или реквизитом и новым состоянием или реквизитом, и если они идентичны, он не рендерится.Но мы уже знаем, что тот факт, что вызывается shouldComponentUpdate, означает, что новое состояние или реквизит не совпадают со старым состоянием или реквизитом.

Логически, я запутался в этом, поэтому я должен опубликовать этот вопрос.Не могли бы вы дать несколько советов для этого?

Answer 1

ПРИМЕЧАНИЕ: это мое понимание, поэтому другие, пожалуйста, не стесняйтесь комментировать любые вопросы / исправления

Вы сделали неверное предположение в своем вопросе.Для простого React.Component вы думаете, что если ничего не изменилось в состоянии / реквизите, то shouldComponentUpdate никогда не вызывается и не будет повторно отображаться.Это не так, например, если родительский элемент простого компонента повторно отображает и этот родительский элемент передает реквизиты дочернему элементу, дочерний элемент также выполняет повторную визуализацию.Даже если эти значения проповеди, которые он передает, на самом деле одинаковы (вы можете проверить это, вставив console.log в дочернюю функцию render()).Тем не менее, даже если дочерний объект выполнит повторную визуализацию, на самом деле ничего не изменится (с точки зрения DOM), поскольку реквизиты одинаковы.Так что технически он сделал ненужный повторный рендеринг.

В простом компоненте shouldComponentUpdate всегда возвращает true (при условии, что вы не определили его явно).Поэтому, если реквизиты / состояние одинаковы, они всегда будут перерисовываться, просто, если нет никаких существенных различий, DOM не изменится ни в каком случае.Тем не менее, в PureComponent он фактически будет выполнять поверхностное сравнение нового состояния / реквизита и будет запускать повторную визуализацию, только если они изменились.Идея состоит в том, что он реализует метод shouldComponentUpdate для вас.

Для компонентов, которые не часто хотят меняться, делать это поверхностное сравнение (которое является относительно быстрым и дешевым) лучше, чем постоянно просто повторнорендеринг независимо от каких-либо изменений.Подводя итог, можно сказать, что чистые компоненты предотвращают ненужные повторные визуализации, сравнивая состояние / реквизиты перед повторной визуализацией и проверяя, действительно ли они отличаются.