React — одна из самых популярных библиотек JavaScript для создания пользовательских интерфейсов. Разработчики могут писать повторно используемые компоненты пользовательского интерфейса и обновлять DOM в зависимости от изменений их состояний. Однако, за исключением компонентов пользовательского интерфейса, нет никаких других отличий, которые существенно отличали бы его от обычного способа, которым мы делали это с помощью ванильного JavaScript, или мы так думали!
React умеет работать только с компонентами. Неважно, содержат ли эти компоненты элементы HTML или какие-то вымышленные элементы. Он не имеет ни малейшего представления о веб-браузере. Тогда как мы увидим все эти изменения в нашем веб-браузере, если он не знает, что это такое? Ответ — другая библиотека под названием ReactDOM. Это интерфейс React для Интернета. React управляет компонентами, реквизитами, контекстом, состояниями, различиями между предыдущими состояниями и текущими состояниями, а затем передает всю информацию о том, что изменилось и что должно быть видно на экране, в интерфейс, с которым он работает, ReactDOM. Затем работа ReactDOM заключается в работе с реальным DOM для обновления браузера. React использует блестящую концепцию под названием виртуальный DOM для достижения этой цели. Он определяет, как в настоящее время выглядит дерево компонентов и как оно должно выглядеть после обновления состояния, а затем передает эту информацию в ReactDOM. ReactDOM теперь знает о различиях и о том, как он должен манипулировать реальным DOM, чтобы он соответствовал виртуальному DOM, виртуальному снимку, полученному React из деревьев компонентов. Всякий раз, когда реквизиты состояния или контекст компонента изменяются, функция компонента выполняется повторно, и компонент переоценивается. Однако только потому, что компонент оценивается повторно, это не означает, что DOM перерисовывается. Настоящий DOM не меняется все время. Меняется редко и только по необходимости. Это важно для производительности, потому что виртуальное сравнение между текущим состоянием и предыдущим состоянием довольно просто и выполняется в памяти, в то время как обращение к DOM каждый раз, чтобы изменить даже малейшее изменение, оказывается очень ресурсоемкой задачей. React может сделать это с помощью концепции, называемой виртуальным различием DOM.
