Если вы только начинаете заниматься веб-разработкой, заманчиво изучить наиболее используемые технологии как можно раньше. Все больше и больше младших разработчиков инвестируют в React посредством самообучения или учебных курсов по программированию.
Проблема?
Хотя React — отличный выбор для создания многих типов приложений, важно понимать, что существуют альтернативы. Что еще более важно, React существует для решения ряда проблем, с которыми сталкиваются разработчики. Сначала разберитесь с этими проблемами, а затем изучите React.
Немного истории
Люди, занимавшиеся веб-разработкой с середины 90-х до середины 2000-х, столкнулись с доминированием Internet Explorer, несовместимостью между браузерными движками, медленным продвижением в Интернете и отсутствием передовых методов организации кода.
Создание чего-либо с использованием JavaScript означало беспокойство о таких проблемах, как:
- Наличие DOM, отражающего состояние приложения.
- Организация кода и разбиение его на разные файлы.
- Добавление и удаление прослушивателя событий.
Было предложено несколько решений этих проблем. jQuery упростил работу с DOM. RequireJs дал разработчикам возможность разбивать приложения на несколько файлов и загружать их в браузере. Такие инструменты, как Gulp, Grunt и более поздний Webpack, еще больше улучшили процесс сборки. Фреймворки, такие как BackboneJs, Ember и более поздние версии AngularJ, предлагали способ структурирования приложений и организации кода.
Введите Реагировать
На первый взгляд React выглядит как шаг назад. React фокусируется на уровне представления, а не на полной архитектуре MVC. В отличие от своих предшественников и некоторых аналогов, React не предлагает готовых решений для общих нужд, таких как маршрутизация, управление состоянием или стилизация. Это различие дает React статус библиотеки, а не фреймворка.
Итак, какие проблемы решает реакция? Наличие пользовательского интерфейса, отражающего состояние приложения
Цель React — исключить ручное управление DOM. Вместо того, чтобы запрашивать определенный узел для обновления его атрибутов или дочерних элементов, вы должны описать конечный результат, который вы хотите, а React позаботится обо всем остальном.
Чтобы добиться этого, React отказывается от общепринятой парадигмы разделения HTML и JavaScript. Ваш код JavaScript больше не используется для управления пользовательским интерфейсом, созданным с помощью HTML. Ваш JavaScript — ЭТО ИНТЕРФЕЙС. (React по-прежнему позволяет напрямую манипулировать DOM с помощью refs)
Обновления DOM стоят дорого
React делает обновления DOM менее затратными, сравнивая то, что отображает браузер, с тем, что описывает ваш пользовательский интерфейс. Это должно улучшить взаимодействие с пользователем в браузере.
Управление событиями грязное
React упрощает управление событиями, добавляя один прослушиватель событий в корень документа. Это должно уменьшить утечки памяти, вызванные сложными прослушивателями событий в приложении.
Код неорганизован
React предлагает способ организовать код, разбив его на компоненты. Это способствует тому, чтобы приложение было разбито на простые блоки с соблюдением принципа единой ответственности.
Лучшее из обоих миров
Понимание того, как работает DOM, его ограничений и узких мест, является важным навыком для создания клиентских веб-приложений. Раннее изучение библиотек и фреймворков маскирует эти сложности. Это лишает вас понимания того, что происходит в браузере.
Эти библиотеки и фреймворки — просто синтаксический сахар вокруг того, что браузер может делать изначально. Все сводится к тому, что делает движок JavaScript и как обновляется DOM. Эти знания необходимы для выявления ошибок и предотвращения проблем с производительностью.
Узнайте, как создать приложение, используя только HTML, JavaScript и CSS. Почувствуйте боль управления состоянием, событиями и обновлениями DOM вручную. Узнайте о распространенных ловушках, узких местах производительности и утечках памяти. Переход на MVC-фреймворк. Поймите, что ваш интерфейсный код можно организовать и спроектировать. Выберите старый фреймворк и протестируйте его. Backbone.JS — отличное введение в фреймворки приложений. Наконец, изучите React.
Вывод
Не ограничивайте себя определенной библиотекой или фреймворком. В конце концов, придет следующая большая вещь и сметет их. Вместо этого сосредоточьтесь на том, что меняется медленно. React исчезнет, но браузер не исчезнет.
Первоначально опубликовано на https://maroun-baydoun.com.