Обнаружение изменений: Angular vs React
Что касается пользовательского интерфейса, обнаружение изменений - это процесс, который измеряет, как изменились атрибуты страницы, и обновляет пользовательский интерфейс в соответствии с изменением, поэтому текущее состояние отображается для конечного пользователя.
Давайте рассмотрим, как работает обнаружение изменений в двух самых популярных JS-фреймворках: Angular и ReactJS. Это также один из наиболее часто задаваемых вопросов на собеседовании, поэтому, если вы ищете краткую информацию, просмотрите статью.
Обнаружение углового изменения:
Angular использует низкоуровневую абстракцию под названием «представление», а технически Angular представляет собой дерево «представлений». Внутренне представление связано с компонентом и наоборот. Angular поддерживает состояние для каждого представления и на основе их значения решает, запускать ли обнаружение изменений для представления и его соответствующих дочерних элементов или нет.
Операция обнаружения изменений выполняется рекурсивно для представления и его последующих дочерних элементов в иерархии. Это означает, что каждый «узел» (каждое представление имеет ссылку на свои дочерние представления через свойство узлов) просматривается только один раз, начиная с корня. Родительский компонент всегда проверяется перед его дочерними компонентами.
По сути, всякий раз, когда мы изменяем состояние, Angular запускает детектор изменений, чтобы убедиться, что DOM (view) синхронизирован с моделью, и для каждого триггера детектор изменений будет проходить вниз по представлению и обновлять DOM.
Проблемы. Как было замечено, просмотр и обновление DOM может оказаться сложной операцией и даже может привести к снижению производительности приложения, которое довольно велико (состоящее из нескольких компонентов (представлений)). Тем не менее, Angular предлагает решение: стратегию обнаружения изменений «On Push», чтобы избежать таких проблем.
On Push: концепция OnPush проста: когда компоненты полагаются исключительно на входные данные, и эти входные ссылки не меняются, Angular может пропустить обнаружение текущих изменений в этом разделе дерева компонентов. Как уже говорилось, все делегирование состояния должно выполняться в интеллектуальных компонентах или компонентах верхнего уровня. В результате большинство компонентов в нашем приложении полагаются исключительно на ввод, что позволяет нам безопасно установить ChangeDetectionStrategy на OnPush в определении компонента. Эти компоненты теперь могут отказаться от обнаружения изменений до тех пор, пока это не понадобится, что дает нам бесплатный прирост производительности.
Обнаружение изменений реакции:
Как упоминалось в официальном руководстве React, «React создает и поддерживает внутреннее представление визуализированного пользовательского интерфейса». По сути, он хранит копию DOM внутри объектов JavaScript, получившую известное название «Virtual DOM».
Преимущество: такое представление помогает React избежать создания узлов DOM и обхода без необходимости. В результате обнаружение изменений оказывается эффективным и немного быстрым, поскольку оно не должно работать с реальной DOM, что может быть тяжелым процессом в больших приложениях.
Когда выполняется операция обнаружения изменений, React создает новую виртуальную модель DOM и сравнивает ее с предыдущей. Если есть какие-то изменения, реальная DOM обновляется соответствующим образом. Для обновления DOM React использует «алгоритм различения », который имеет сложность порядка O (n).
Опять же, чтобы противостоять ненужным операциям сравнения в React, мы можем использовать одну из его очень полезных ловушек жизненного цикла, ’shouldComponentUpdate’
Вывод
Движки Angular Ivy и React Fiber регулярно обновляются и становятся более эффективными с момента его создания, но лично я предпочитаю стратегию обнаружения изменений React более эффективную, чем Angular.
