Что такое JS и что такое ReactJs ⚛
React — популярная на сегодняшний день библиотека JavaScript. Собственно, это фреймворк по своему поведению и возможностям для создания пользовательского интерфейса. Это продукт с открытым исходным кодом, разработанный и поддерживаемый Facebook и Instagram. Он основан на архитектуре MVC (архитектура представления модели). В этом случае сначала мы создали модель, а затем разместили элементы управления и просмотрели ее.
#Реакция 👇
Что такое объектная модель документа или DOM в ReactJs?🤔
Когда вы начинаете изучать React, первое, что нужно понять, — это виртуальный DOM. Но прежде чем мы перейдем к виртуальному DOM,
давайте посмотрим, что такое DOM.
DOM — это интерфейс, который позволяет JavaScript или другим скриптам читать и управлять содержимым документа (в данном случае — HTML-документом). Всякий раз, когда HTML-документ загружается в браузер как веб-страница, для этой страницы создается соответствующая объектная модель документа.
Тогда что такое виртуальный DOM 🙄
Мы все слышали, что обновление объектной модели документа (DOM) напрямую неэффективно и медленно. Тем не менее, немногие из нас на самом деле имеют данные, подтверждающие это. Шумиха вокруг Virtual DOM в React заключается в том, что это более эффективный способ обновления представления в веб-приложении, но очень немногие из нас точно знают, почему и приведет ли эта эффективность к более быстрому времени рендеринга страницы.
Если оставить в стороне другие преимущества использования React, такие как односторонняя привязка данных и компоненты, я расскажу, что такое виртуальный DOM и оправдывает ли он сам по себе использование React по сравнению с другими библиотеками пользовательского интерфейса (или вообще без библиотеки пользовательского интерфейса).
Зачем нам нужна UI-библиотека? 📚😮
Две наиболее важные идеи реактивного программирования заключаются в том, что системы должны управляться событиями и реагировать на изменения состояния.
Компоненты пользовательского интерфейса DOM имеют внутреннее состояние, и обновление браузера не так просто, как просто повторное создание DOM всякий раз, когда что-то изменяется. Если бы Gmail делал это, например, вы бы постоянно раздражались, когда все окно браузера обновлялось, чтобы отобразить новое сообщение, стирая электронное письмо, которое вы составляли.
Сохранение состояния DOM — вот почему нам нужны библиотеки пользовательского интерфейса и решения, такие как наблюдение за ключом/значением (которое используется, среди прочего, Ember) или грязная проверка (которое используется Angular). Библиотеки пользовательского интерфейса отслеживают изменения в модели данных и обновляют правильную часть DOM, когда эти изменения происходят, или отслеживают изменения в DOM и обновляют модель данных, когда они происходят.
Когда в пользовательский интерфейс добавляются новые элементы, создается виртуальный DOM, который представлен в виде дерева. Каждый элемент является узлом этого дерева. Если состояние любого из этих элементов изменяется, создается новое виртуальное дерево DOM. Затем это дерево сравнивается или «сопоставляется» с предыдущим виртуальным деревом DOM.
После этого виртуальная модель DOM вычисляет наилучший возможный метод внесения этих изменений в реальную модель DOM. Это гарантирует минимальные операции с реальным DOM. Следовательно, снижение производительности при обновлении реального DOM.
Проще говоря, вы сообщаете React, в каком состоянии должен находиться пользовательский интерфейс, и он гарантирует, что DOM соответствует этому состоянию. Большим преимуществом здесь является то, что как разработчику вам не нужно знать, как манипулирование атрибутами, обработка событий или ручное обновление DOM происходят за кулисами.
