Как объекты отслеживаются между «кадрами» в функционально-реактивной парадигме? - PullRequest
0 голосов
/ 05 мая 2018

Я исследовал Elm, ReactJS и другие фреймворки и языки на основе реактивной / функционально-реактивной парадигмы.

Я понимаю основы того, как работает реактивное программирование, и почему такая система может быть полезной. Но у меня возникают проблемы с концептуализацией некоторых аспектов моего ума.

Например, я понимаю концепцию «просмотра» или «построения» функции. В реактивных веб-инфраструктурах мы пишем функцию, которая принимает состояние программы и возвращает список элементов HTML, представляющих отображение. Каждый раз, когда состояние изменяется, платформа снова вызывает функцию представления и дисплей перестраивается. Фреймворки умны тем, что могут сравнивать новые элементы со старыми элементами и эффективно обновлять страницу с наименьшим количеством вызовов.

Однако у меня возникают проблемы с пониманием того, как элементы отслеживаются при вызовах функции представления, т. Е. Фреймворки знают, что элемент в новом кадре совпадает с элементом в старом кадре.

Зачем нужно отслеживать элементы? Потому что, например, средство визуализации с графическим интерфейсом может воспроизводить анимацию для проверки или снятия флажка. Если инфраструктура вызывает функцию представления и перестраивает отображение каждый раз, когда флажок установлен или не отмечен, средство визуализации с графическим интерфейсом не сможет узнать, что поле было создано с нуля. Таким образом, он не сможет воспроизвести анимацию проверки или снятия отметки.

Рассмотрим пример поля Elm по адресу http://elm -lang.org / examples / field . Когда в поле вводится новый символ, дисплей перестраивается. Текстовое поле создается снова с новым состоянием. С точки зрения браузера это выглядит так, как будто старое текстовое поле было удалено, а на его месте создано новое.

Теперь, я думаю, что мое понимание неверно, и текстовое поле фактически не удаляется. Но как я могу быть уверен? Имеет ли реактивное программирование надежную логику для отслеживания элементов?

1 Ответ

0 голосов
/ 06 мая 2018

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

Это детали реализации, и вам не нужно беспокоиться о них, но если вы хотите узнать больше о том, как работает diffing, вы можете прочитать о пакете Elm VirtualDom здесь

...