Вы когда-нибудь задумывались над тем, что если предполагается использовать как функциональный компонент без сохранения состояния, так и чистые компоненты реакции в случаях когда ваш компонент отображает одинаковую разметку для одного и того же набора свойств, каков вариант использования каждого из них? Они взаимозаменяемы? Не совсем! Этот пост объяснит это на простом примере.
Предположим, вы хотите создать простое приложение, в котором мы показываем случайную цитату из списка цитат. Компонент цитаты будет дочерним по отношению к другому компоненту с отслеживанием состояния.
Реализация с использованием функционального компонента без сохранения состояния
Можете ли вы определить ошибку в приведенном выше коде? Если вы запустите его, вы увидите, что как только компонент будет отрисован, он отображает случайную цитату, но после изменения состояния имени пользователя он отображает другую случайную цитату! Функциональный компонент без состояния будет повторно отображаться каждый раз при изменении состояния родительского компонента. Из-за ограничений функционального компонента вы не можете реализовать хуки жизненного цикла, такие как shouldComponentUpdate, для явных проверок визуализации.
Чистый компонент решает эту проблему. Pure Component реализуетshouldComponentUpdate для вас из коробки. Давайте посмотрим на тот же пример с компонентом Pure.
Реализация с использованием чистого компонента
Если вы запустите приведенный выше код, вы заметите, что даже если состояние родительского элемента изменится, отображаемая цитата не изменится. Чистый компонент также обеспечивает более стабильный пользовательский интерфейс, потому что он будет повторно отображать только тогда, когда свойство, от которого он зависит, изменится. Команда React рекомендует использовать PureComponent вместо ручной реализации shouldComponentUpdate, потому что PureComponent выполняет поверхностное сравнение свойств и состояния , и снижает вероятность того, что вы пропустите необходимое обновление.
