Он поддерживается Facebook, Instagram и сообществом отдельных разработчиков и корпораций. По данным службы аналитики JavaScript Libscore, React в настоящее время используется на веб-сайтах Netflix, Imgur, Bleacher Report, Feedly, Airbnb, SeatGeek, HelloSign, Walmart и других.

— Википедия

На самом деле он используется в Facebook в продакшене, а мобильное приложение Instagram написано на самом React.

Мой квест

Вы можете прочитать о React во многих блогах. Интернет наводнен миллионами статей о React и о том, как его использовать. На самом деле официальный сайт React — один из лучших источников информации о React.

Но во время моего стремления получить все REACTive я наткнулся на множество сообщений в блогах, объясняющих, как использовать React с примерами. Что ж, это было здорово, и я тоже многому у них научился. Но я хотел понять больше, чем просто как его использовать. Я хотел знать, почему React такой мощный, почему это долгожданная революция во внешнем интерфейсе.

Я хотел узнать, чем он отличается от многофункционального и удобного Jquery, Backbone, Ember и хорошо известного и мощного Угловой. И почему я должен использовать React в первую очередь, а не только потому, что люди просят меня об этом, а веб-ниндзя клянутся им. Мне нужно было доказательство, мне нужно было проникнуть во внутренности, а не во внутренности кода реакции, но чем React отличается от всего этого и при этом быть чрезвычайно быстрым, как он творит эту магию? Я хотел узнать о секретном соусе, его абракадабре.

Некоторая демистификация и правда

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

Другие библиотеки javascript, такие как Angular, представляют собой полные библиотеки, которые, помимо множества функций, также имеют библиотеку представлений как часть всей своей структуры.

Если вы хотите делать http-запросы, делать какие-то ajax-запросы, то React для этого не подходит. Он не может делать такие вещи, в отличие от Jquery, который может. Jquery многофункционален и может делать много других вещей. Angular также имеет множество вариантов использования и функций, связанных с манипулированием данными и моделями данных.

В React есть только некоторые компоненты и элементы, связанные с представлением, которые обновляются и отображаются в реальной DOM. Для этого он использует пользовательский синтаксис JSX, который представляет собой смесь html и javascript вместе, это в основном html в вашем коде javascript. JSX — это то, что помогает React творить магию пользовательского интерфейса. Вот об этом. Вот что React может сделать для вас. Больше ничего.

React не предоставляет каких-либо функций динамической обработки страниц, таких как jquery. Таким образом, вы не можете создать полноценное динамическое веб-приложение, используя только React. Вы должны использовать другие библиотеки для общения с серверами и выполнения других динамических функций.

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

Для начала может потребоваться некоторое время, чтобы изучить React и понять его новые концепции, и скорость вашей работы значительно снизится. Но как только вы закончите с первоначальным медленным прогрессом, вы почувствуете себя прекрасно, потому что React поможет вам модульно разбить ваш интерфейсный код. Больше никаких грязных и запутанных файлов javascript с мохнатым кодом javascript с бесконечным количеством функций, разбросанных повсюду, и адскими проблемами отладки. С React все это уходит, вы знаете, где находятся ваши компоненты, какова их цель и где искать, когда вы сталкиваетесь с проблемой. Более чистый код, хотя и длинный, но модульный и многоразовый.

Абракадабра

React использует виртуальный DOM, чтобы сделать все быстро и волшебно. Это секретный соус, который делает React таким реактивным.

Когда вы посещаете веб-страницу, вы видите визуализированную форму DOM, записанную в файле HTML. Итак, когда вы пишете веб-страницу, вы пишете HTML-код, текстовое представление модели DOM. Браузер анализирует HTML и создает для вас DOM, который он отображает в браузере, который вы на самом деле видите.

DOM представляет собой структуру данных в виде дерева в памяти, где каждый элемент HTML (например, div, p, section и т. д.) является узлами дерева, и узлы имеют собственные атрибуты, а обработчики событий связаны с этими узлами DOM (элементами HTML).

DOM предоставляет свой API, который помогает javascript манипулировать DOM, перемещаться, изменять и обрабатывать события, связанные с узлами DOM. Примерами нескольких функций API являются getElementById, removeParent и т. д.

Итак, всякий раз, когда мы хотим динамически изменить содержимое веб-страницы, мы модифицируем DOM:

const item = document.getElementById("myLI");
item.parentNode.removeParent(item);

document — это абстракция корневого узла, а getElementById, parentNode и removeParent — методы из HTML DOM API.

Проблема с манипулированием DOM заключается в том, что каждый раз, когда DOM изменяется, браузеру необходимо пересчитывать CSS, выполнять макет и перерисовывать веб-страницу. Это то, что требует времени.

В наши дни SPA в среднем имеют DOM, состоящие из тысяч узлов (div, разделов, p и т. д. HTML-элементов). Наряду с большим количеством методов, которые обрабатывают события — клики, отправки, ввод событий и т. д. Таким образом, манипуляции с DOM здесь потребуют:

  • поиск каждого узла, прослушивающего событие
  • обновление при необходимости

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

Как React борется с проблемой DOM — с помощью Virtual DOM

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

Но для этого используется концепция Virtual DOM. VDOM — это копия фактического DOM. И это тоже в памяти. Метод React render() создает дерево узлов из компонентов React, которое использует JSX для представления версии элемента html узла VDOM. Затем он обновляет это дерево в ответ на изменения в модели данных, вызванные действиями или событиями.

Каждый раз, когда базовые данные изменяются в приложении React, создается новое представление пользовательского интерфейса Virtual DOM. На самом деле весь пользовательский интерфейс повторно отображается в представлении Virtual DOM. Вычисляется разница (алгоритм сравнения) между предыдущим представлением Virtual DOM и новым. Затем реальный DOM обновляется тем, что действительно изменилось.

Часть 2

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

Ссылка на часть 2