CC BY
110
УДК 004.422.83
ИСПОЛЬЗОВАНИЕ REACTJS В СОВРЕМЕННОЙ WEB-РАЗАРАБОТКЕ
А. А. Сучков, Д. К. Гек, А. П. Багаева
Сибирский государственный университет науки и технологий имени академика М. Ф. Решетнева
Российская Федерация, 660037, г. Красноярск, просп. им. газ. «Красноярский рабочий», 31
E-mail: neroz98@yandex.ru
Рассмотрены особенности современной web-разработки с использованием Reactjs. Разобраны основные плюсы и минусы, а так же описываются основные методы и направления использования.
Ключевые слова: web-разработка, разработка на языке js, разработка приложений, front-end разработка.
USE OF REACTJS IN MODERN WEB-DEVELOPMENT
A. A. Suchkov, D. K. Gek, A. P. Bagayeva
Reshetnev Siberian State University of Science and Technology 31, Krasnoyarsky Rabochy Av., Krasnoyarsk, 660037, Russian Federation E-mail: neroz98@yandex.ru
Features of modern web development with use of Reactjs are considered. The main pluses and minuses are sorted, and the main methods and the directions of use are also described.
Key word: web-development, development in the js language, application development, front-end development.
На сегодняшний день остро стоит вопрос разработки быстрообновляющихся интерфейсов и необходимости подгрузки на сайт большого количества данных без обновления. В данной статье мы рассмотрим использование ReactJSв современной Web-разработке, а так же выявим плюсы и минусы его использования.
React (иногда React.js или ReactJS) - JavaScript библиотека с открытым исходным кодом для разработки пользовательских интерфейсов. В основе этой библиотеки лежит язык программирования JS.[1]
JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам. Основные архитектурные черты:
- динамическая типизация;
- слабая типизация;
- автоматическое управление памятью;
- прототипное программирование;
- функции как объекты первого класса.
На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java, но при этом лёгким для использования непрограммистами. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке.
Чтобы упростить разработку начали создавать различные библиотеки JavaScript.
React - это библиотека для создания пользовательских интерфейсов. Одной из ее отличительных особенностей является возможность использовать JSX, язык программирования с близким к
Секция «Информационно-экономические системы»
HTML синтаксисом, который компилируется в JavaScript. Разработчики могут добиваться высокой производительности приложений с помощью Virtual DOM. C React вы можете создавать изоморфные приложения, которые помогут вам избавиться от неприятной ситуации, когда пользователь с нетерпением ожидает, когда же наконец завершится загрузка данных и на экране его компьютера наконец появится что-то помимо анимации загрузки. Высокий процент переиспользования кода повышает покрываемость тестами, что, в свою очередь, приводит к более высокому уровню контроля качества. Используя ReactNative мобильные приложения для Android и iOS, используя опыт JavaScript и React разработки.[2]
React был создан Джорданом Уокером, разработчиком программного обеспечения из Facebook. На него оказал влияние XHP - компонентный HTML фреймворк для PHP. В первый раз React был использован в новостной ленте Facebook в 2011 году и позже в ленте Instagram в 2012 году. Исходный код React был открыт в мае 2013 года на конференции «JSConf US».
ReactNative был анонсирован на конференции Facebook «React.js Conf» в феврале 2015 года, а исходный код был открыт в марте 2015 года. Он позволяет разрабатывать нативные Android, iOS и UWP приложения с использованием React.
18 апреля 2017 года Facebook анонсировал ReactFiber, переписанную и оптимизированную версию React.ReactFiber станет основой разработки всех будущих функций и улучшений.
Каждый новый компонент начинает свое существование одинаково. Основные этапы жизненного цикла компонента. Сначала определяется шаблон React.js для создания элементов из компонента. Указывается где он будет использован. К примеру, внутри вызова функции рендера иного компонента или с помощью ReactDOM.render. React создает экземпляр элемента и передает ему набор свойств (props), доступ к которым будет доступен через this.props. Эти свойства есть то, что мы передали ранее. Поскольку описанное является JavaScript-ом, будет вызван метод конструктора класса (если он определен). Это первый из методов, которые называются методами жизненного цикла компонента. React обрабатывает результат вызова функции рендера. Затем React осуществит монтирование компонента: взаимодействуя с браузером через DOM API, React выполнит рендеринг. Следом, React вызывает другой метод жизненного цикла, который называется componentDidMount. Этот метод можно использовать, чтобы что-то сделать в дереве документа. Весь DOM, с которым мы работали ранее был виртуальным. Компонент может быть необходимо повторно отрисовать, если его состояние будет обновлено, либо, если родительский элемент изменит свои свойства. Если были изменены свойства, React.js вызовет метод жизненного цикла componentWillReceiveProps.[3]
Если объект или его свойства были изменены, React.js вызывает еще один метод -shouldComponentUpdate, который, по сути, является вопросом. Так что, если есть необходимость самостоятельно настроить процесс рендера, вы можете ответить на этот вопрос вернув true или false. Если shouldComponentUpdate не объявлен, React вызовет безусловный componentWillUpdate и рассчитает различия между текущим компонентом и его новым видом, с учетом изменений. Если никаких изменений не зафиксировано, React.js ничего не сделает. Если разница есть, фреймворк отрисует компонент. Так как процесс обновления в любом случае произошел, React вызовет метод componentDidUpdate. Жизненный цикл некоторых компонентов заканчивается уже на этом этапе. Компоненты могут быть демонтированы из документа по разным причинам. Однако, перед этим React вызывает другой метод - componentWillUnmount.[4]
Мы можем тут же сказать, как компонент будет отрисован. Если вы знаете состояние - вы знаете результат отрисовки. Вам не нужно прослеживать ход выполнения программы. Когда разрабатывается сложное приложение, особенно в команде, это очень важно.
Связывание JavaScript и HTML в JSX делает компоненты простыми для понимания. Странное сочетание HTML/JavaScript может вас смутить. Нас учили не вставлять JavaScript в DOM (например: обработчики OnClick), но вы можете работать с JSX компонентами и это на самом деле удобно.
Обычно вы разделяете представления (HTML) и функциональность (JavsScript). Это приводит к монолитному JavaScript файлу, содержащему всю функциональность для одной страницы, и вы должны следить за сложным потоком JS->HTML->JS->неприятная ситуация.
Связывание функциональности напрямую с разметкой и упаковка этого в портативный, автономный «компонент», сделает вас счастливее, а ваш код в целом лучше. Ваш Javasacript «хорошо знаком» с вашим HTML, так что смешивать их имеет смысл.
Вы можете рендерить React на сервере.
Если вы разрабатывает публичный сайт или приложение, и вы рендерите все на клиенте, то вы выбрали неправильный путь. Клиентский рендеринг - это причина, почему SoundCloud работает медленно, и почему StackOverflow (используя только серверный рендеринг) работает так быстро. Вы можете рендерить React на сервере, и вы должны этого делать.
Компонентно-ориентированный подход, возможность с легкостью изменять имеющиеся компоненты и переиспользовать код превращают React разработку в непрерывный процесс улучшения. Компоненты, которые были созданы во время работы над тем или иным проектом, не имеют дополнительных зависимостей. Таким образом, ничто не мешает использовать их снова и снова в проектах разного типа. Весь предыдущий опыт может быть с легкостью применен при работе над новым сайтом или даже при создании мобильного приложения. Используя передовые возможности, такие как Virtual DOM или изоморфный JavaScript, React разработчики могут с высокой скоростью создавать высокопроизводительные приложения, несмотря на уровень их сложности. Возможность с легкостью заново использовать уже имеющийся код повышает скорость разработки, упрощает процесс тестирования, и, как результат, понижает затраты. Тот факт, что эта библиотека разрабатывается и поддерживается высококвалифицированными разработчиками и набирает все большую популярность с каждым годом, дает основания надеяться, что тенденция к дальнейшим улучшениям продолжится.[5]
Библиографические ссылки
1. Максимов, Н.В. Современные информационные технологии: Учебное пособие / Н.В. Максимов, Т.Л. Партыка, И.И. Попов. - М.: Форум, 2013. - 512 c.
2. Голубенко, Н.Б. Библиотека XXI века: информационные технологии: новая концепция / Н.Б. Голубенко. - СПб.: Проспект Науки, 2013. - 192 c.
3. Барский, А.В. Параллельные информационные технологии: Учебное пособие / А.В. Барский. - М.: Бином, 2013. - 503 c.
4. Бартенев, В.А. Современные и перспективные информационные ГНСС-технологии в задачах высокоточной навигации / В.А. Бартенев, М.Н. Красильщиков. - М.: Физматлит, 2014. - 192 c.
5. Дарков, А.В. Информационные технологии: теоретические основы: Учебное пособие / А.В. Дарков, Н.Н. Шапошников. - СПб.: Лань, 2016. - 448 c.
© Сучков А. А., Гек Д. К., Багаева А. П., 2019
