Change detection & Reactivity

Начнём с того как фреймворк узнаёт что данные в нашей компоненте изменились и её нужно перерисовать.
Допустим, у нас есть славный компонент Counter, вы все его уже когда-то видели: [-] count [+]. Пользователь нажал кнопку [+] и мы увеличиваем некий count на +1. Это просто. А фреймворк в этот момент должен понять что нужно перерисовать компоненту с новым count. Давайте рассмотрим на примерах как фреймворки понимают что произошло изменение данных:


Dirty check
Довольно простой метод: мы сохраняем снэпшот состояния компоненты, и при любом взаимодействии с UI (как клик по кнопке) вызываем все хэнлеры, а затем проходимся по всем ключам состояния и проверяем не изменился ли стэйт по сравнению со снэпшотом. Если изменился — перерисовываем компоненту. Для нас это обычно выглядит как простой this.count += 1.
Таким методом пользуется Angular по умолчанию (angular ещё будет в reactive streams ниже)

Reactive atoms / Invalidation API
Некоторые фреймворки предоставляют API для точечного изменения состояния. Когда мы используем этот API (изменяем стэйт) — фреймворк понимает что произошло изменение и планирует перерисовку компоненты. Т.к. Javascript — довольно гибкий язык, такой API может скрываться под разным видом: count(count() + 1) в Knockout, setCount(getCount() + 1) в React и SolidJS.

Отдельно нужно описать Svelte и Vue, которые этот API прячут от девелоперов:
Svelte компилирует count += 1 в вызов API (мы о компиляторах ещё потом поговорим)
а Vue с их this.count += 1 в версии 2.x использовал Object.defineProperty c get/set парой, а с 3-й версии они перешли на Proxy для вызова своего API "под капотом".

N.B: некоторые API регистрируют также и считывание данных из атомов, чтобы точечно обновлять DOM только где этот стэйт используется.

Reactive streams
Мы, разработчики, иногда хотим управлять не дискретными срезами состояний, а потоком изменений. Так, например, мы сможем узнать как часто пользователь кликает [-] и создать особый обработчик для жёстких минусаторов. Для этого хорошо подходят реактивные потоки. Они предоставляют API нам для добавления логики и фреймворку для "слежения" за изменениями.

clicks$.next(1);
count$ = clicks$.scan((acc, curr) => acc + curr, 0);

Такой метод используют Аngular (в OnPush стратегии) и circlejs (ну, и мой экпериментальный recksjs, там вообще везде потоки).
Реактивные потоки относительно легко приделать к реактивным атомам / invalidation API, так что они часто встречаются в код базах с другими фреймворками.

.

Как видно, реализации немного разные, но цель одна и та же: пнуть фреймворк чтобы он перерисовал компоненту.
В следующий раз мы поговорим о том как в разных фреймворках мы задаём этот самый UI, который нужно перерисовывать.
Оставляйте свои комментарии и подключайтесь к math.random коммьюнити — мы любим говорить о технологиях.
До завтра!

___

Если у вас мало вкладок в браузере:
A Hands-on Introduction to Fine-Grained Reactivity — https://dev.to/ryansolid/a-hands-on-introduction-to-fine-grained-reactivity-3ndf
Reactivity in Depth — https://v3.vuejs.org/guide/reactivity.htm
Angular Change Detection - How Does It Really Work? — https://blog.angular-university.io/how-does-angular-2-change-detection-really-work/

#thematicweek #frameworksweek