Стратегия обнаружения изменений Angular 5.0 VS Стратегия обнаружения изменений React

Question

Я понял, как работает обнаружение изменений в Angular 5.0.

Может ли кто-нибудь помочь мне понять, как это работает в React и насколько оно отличается от Angular?

Answer 1

Обнаружение изменений в React и Angular отличается, но у них есть одна общая очень важная вещь - создание различий текущего и предыдущего состояния из памяти (не из DOM) и рендеринг только того, что было изменено.

В Angular на высоком уровне это работает так:

1. Обнаружение изменений запускается zone.js в конце каждого стека вызовов в зоне. Это означает, что после выполнения обратного вызова к каждому асинхронному действию (нажатие, http-запрос, тайм-аут) запускается обнаружение изменений. Вы также можете инициировать обнаружение изменений вручную или даже "отключить" zone.js, но давайте придерживаться наиболее распространенного сценария.
2. Обнаружение изменений начинается с корневого компонента и проходит вниз по дереву компонентов (опять же, вы можете запустить его вручную на любом компоненте, но это не самый распространенный случай).
3. Обходя дерево компонентов, оно проверяет, какие значения в шаблонах компонентов необходимо обновить.
4. Он обновляет значения DOM на основе результатов из предыдущего пункта.

ПРИМЕЧАНИЕ. Имейте в виду, что если вы используете ChangeDetectionStrategy.OnPush, некоторые компоненты и их потомки могут быть пропущены при обходе дерева. Это может быть отличной оптимизацией.

В React это выглядит так:

1. Обнаружение изменений не запускается после обратных вызовов асинхронных действий. Это вызвано вызовом метода setState для компонента.
2. Обнаружение изменений начинается не с корневого компонента, а с компонента, в котором setState назывался.
3. Начинается фаза согласования - компонент и его потомки просматриваются для проверки того, какие значения необходимо обновить в реальном DOM. Итак, концептуально эта точка очень похожа на Angular. Однако в React 16 все немного сложнее. Проверьте это.
4. Дом обновлен.

ПРИМЕЧАНИЕ. Аналогично Angular's ChangeDetectionStrategy.OnPush, в React у нас есть класс React.PureComponent. Мы можем использовать этот класс, чтобы избежать ненужного обнаружения изменений.

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

Answer 2

Обнаружение изменений реагирования более или менее аналогично Angular, за исключением трех вещей:

1) когда начинать: различие начинается всякий раз, когда вызывается метод setState компонента (тогда как Angular выполняет различие всякий раз, когда инициируется событие Dom, всякий раз, когда выполняется обратный вызов setInterval / setTimeout, и всякий раз, когда выполняется обратный вызов ajax)

2) с чего начать: различие начинается с компонента, который вызвал setState, затем его потомков и вниз по иерархии (тогда как Angular начинается с самого верхнего компонента)

3) что сравнивать: diff сравнивает виртуальный DOM текущего HTML с виртуальным DOM после изменения состояния. (тогда как Angular использует привязанные к данным значения, используемые в шаблоне, до и после, для сравнения)