Изучая библиотеку React.JS, мы должны сначала понять, какие проблемы она решает в основе. Позвольте мне помочь вам понять это один за другим с помощью простых аналогий.

Сокращение сложных манипуляций с DOM

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

Если вы поняли, что я пытаюсь донести, значит, вы это уже хорошо поняли. По сути, ReactJS решает проблему сложных манипуляций с DOM. С помощью React у вас есть способ закрасить только часть или точку стены, а не всю стену. ReactJS признает, что покраска занимает много времени, и выясняет, как определить, что изменилось между существующей работой по покраске стен и новой работой по покраске. Затем он просто выполняет минимальный объем работы, чтобы получить новый узор или цвет на месте.

В мире React.js стена — это, конечно же, объектная модель документа (DOM) страницы. React.js может рассчитать, как нужно обновить DOM, чтобы перейти от старого к новому. Таким образом, вы можете сделать наименьшее количество изменений DOM, чтобы получить желаемый DOM (что может быть вообще без изменений — и это самая большая победа, потому что наивный подход перерисовывал бы то, что уже присутствует). Вы можете прочитать больше статей в Интернете об алгоритме сравнения React для расчета изменений, произошедших с узлами DOM, с использованием Virtual DOM и Real DOM. Я прилагаю изображение для справки.

Обработка событий

Предположим, вы учитель, и у вас есть класс из 30 учеников. У каждого учащегося есть свои вопросы или проблемы, с которыми им нужна помощь, и все они могут поднять руку в разное время. При традиционной обработке событий вам нужно будет подойти к каждому учащемуся индивидуально, выслушать их вопрос и оказать помощь один за другим. Это может занять много времени и быть неэффективным, особенно если есть много студентов с вопросами.

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

В этой аналогии классный монитор похож на систему событий React, которая прослушивает все события в приложении, а затем направляет соответствующий компонент для обработки каждого события.

React использует один прослушиватель событий, прикрепленный к документу. Когда происходит событие, React фиксирует это событие на уровне документа, а затем определяет, какой компонент в приложении должен реагировать на это событие. Это означает, что React нужно отслеживать только один прослушиватель событий, что может повысить производительность вашего приложения, особенно если у вас много элементов с прослушивателями событий.

Еще одна проблема, которую решает React, — это обработка событий в разных браузерах. Разные браузеры могут иметь разные способы обработки событий, но система событий React абстрагируется от этих различий и предоставляет унифицированный способ обработки событий, который одинаково работает в разных браузерах. Он делает это, предоставляя синтетический объект события. Подробнее об этом можно прочитать из этого поста.