Что может быть лучше, чем начать Еженедельный выпуск React, чем установить рекорд на vanilla и React JavaScript.
Давайте приступим к делу.
Прежде всего: React — это библиотека, которая использует JavaScript, как Vue и Angular, поэтому фиксирует набор правил для создания пользовательских интерфейсов (UI). Ванильный или простой JavaScript — это язык сценариев в его худшей форме.
Хороший способ определить веб-сайт JavaScript – посмотреть, обновляются ли элементы на вашей веб-странице без перезагрузки вручную.
Реагировать против ванильного JavaScript
- React разбит на компоненты, а Javascript может быть организован по желанию.
- React манипулирует копией объектной модели документа (DOM), называемой Virtual DOM, что повышает производительность обновления DOM.
- Данные React хранятся в переменных JavaScript, а данные ванильного JavaScript находятся прямо в DOM.
- React будет обновляться «автоматически» при изменении состояния каждого компонента, в то время как обычный JavaScript будет обновляться путем ручного определения местоположения узла в DOM.
Почему Компоненты?
Компоненты лежат в основе React. Они позволяют вам думать о пользовательском интерфейсе как о различных изолированных частях, которые могут быть настолько абстрактными, динамичными и повторно используемыми, насколько вы хотите.
Компоненты функций и классов могут получать данные и, в свою очередь, создавать элементы React — небольшие представления того, что видно на экране. Эти неизменяемые объекты будут интерпретироваться и в конечном итоге могут привести к обновлению DOM.
Поговорим о ДОМ
Проще говоря: DOM — это представление HTML-документа, которое позволяет нам манипулировать им.
Давайте представим DOM в виде дерева. У дерева есть свои ветви, и эти ветви порождают другие ветви, которые разовьются в еще большее количество ветвей и так далее. Вы получаете картину.
Чтобы изменить любую ветвь в этом дереве, нам нужно найти отдельную ветвь и обновить ее. Звучит немного, но если мы выполняем эту задачу несколько раз в секунду, это быстро становится проблемой.
Виртуальный DOM в помощь
Виртуальный DOM можно рассматривать как план дерева, который можно изменять и играть с ним сколько угодно без каких-либо затрат для исходного DOM. После внесения каждой корректировки исходная модель DOM будет выборочно обновлена оптимизированным образом.
React — это библиотека, использующая Virtual DOM, что делает обновления DOM более эффективными.
Выводы
Использование JavaScript может быть подходящим способом, если вы ищете свободы при создании своих приложений, но такая среда, как React, может дать вам организацию, необходимую вашему коду, и предсказуемость, которую требует ваше приложение.
При этом JavaScript является эталонным языком для разработки пользовательского интерфейса, и его овладение означает, что вы можете работать с любой популярной JS-библиотекой сегодня и с теми, которые будут расти завтра.
«Еженедельный выпуск React» был создан, чтобы ответить на популярные вопросы о JavaScript и React.js в веселой и простой форме. Он предназначен для краткого и приятного чтения.
