Реагировать на оптимизацию безстоящих, функциональных компонентов через mustComponentUpdate

Я знаю, что ключевым моментом оптимизации для React является использование shouldComponentUpdate() hook для жизненного цикла для проверки текущего состояния/реквизита против реквизитов следующего/состояния.

Если я создаю приложение React, используя в основном функциональные компоненты, а не компоненты на основе классов (которые имеют доступ к перехватам жизненного цикла), я отказываюсь от этой конкретной оптимизации? Могу ли я выполнить аналогичную проверку внутри функционального компонента?

Ответы

Ответ 1

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

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

Источник

Однако в настоящее время компоненты без состояния не оптимизируют производительность, пропуская процесс рендеринга, если реквизит не изменяется. Это подтвердил член реагирующей команды:

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

[...]

Обсуждается наличие флага pureRender, который вы можете установить в функции, или разрешить ему участвовать в жизненном цикле shouldUpdate, но в настоящее время не реализован. На данный момент функции без состояния не могут быть чистыми.

Следует иметь в виду, что иногда люди злоупотребляют/злоупотребляют чистым рендерингом; он иногда может быть таким же или более дорогим, чем повторять рендеринг, потому что вы повторяете массив реквизитов и, возможно, делаете такие вещи, как сравнение строк, что является дополнительной работой для компонентов, которые в конечном итоге возвращают true, а затем переходят к reerender в любом случае. PureRender/ shouldComponentUpdate действительно считается выходным штрихом для производительности и не обязательно является тем, что должно быть слепо применено к каждому компоненту.

Источник

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