Как объединить в React js компоненты для упрощения работы с приложением примеры и синтаксис

Содержание материала:

Скринкаст по React.js

React.js — одна из самых популярных библиотек для создания сложных Frontend-приложений.

Однако, успешная разработка на нём требует хорошего понимания концепций, на которых он построен.

В этом скринкасте мы:

  • Познакомимся с основными понятиями и внутренним устройством React.js.
  • Разберёмся с тем, как создавать компоненты на React.js.
  • Разберём ряд подводных камней, на которые часто наступают начинающие React-разработчики.

Одна из главных особенностей React.js — свобода действий, существует огромное количество подходов к построению приложений с его помощью (redux, mobx и другие).

Они не являются частью собственно React.js, а представляют собой архитектурные надстройки и также постоянно развиваются. Мы осваиваем их на Основном и Продвинутом онлайн-курсах по React.JS.

Автор этого скринкаста – Роман Якобчук, с небольшой помощью в плане организации материала от Ильи Кантора.

Вы также можете скачать все скринкасты в виде архива с видео-файлами.

Примеры на React. Быстрый старт в изучении React

React строится вокруг концепции компонентов. В отличие от таких фреймворков типа Angular и Ember которые используют двухстороннюю привязку данных для обновления HTML страницы. На мой взгляд, React более прост в освоении, чем Angular и Ember – он намного меньше и хорошо работает с jQuery и другими фреймворками. Он также очень быстрый, потому что он использует виртуальный DOM и синхронизирует только измененные части с основной страницы (доступ к DОМ по-прежнему является медленной часть современного веб-приложения). Однако, обратной стороной является то, что те вещи, которые легко могли бы быть сделаны с помощью привязки данных, занимают немного больше кода в React. В этом вы можете убедиться в приведенных ниже примерах.

Как начать использовать React

Для использования React, вам необходимо включить один файл JavaScript в вашем страницы. Facebook любезно предоставляет нам CDN, на который вы можете сослаться:

Размер файла browser.min.js превышает 1Mb, поэтому такое использование на продакшн строго не рекомендуется!

Это дает вам доступ к глобальному React-объекту, который содержит ряд полезных методов, некоторые из которых вы можете увидеть в наших примерах. Рекомендуемым способом написания реактивного веб-приложения является использование языка под названием JSX. Это немного расширенная версия JavaScript, которая позволяет инициализировать React-компоненты с помощью синтаксиса HTML непосредственно в коде. Этот код компилируется в JavaScript, перед тем как быть интерпретированным браузером. Но, достаточно говорить, давайте перейдем к примерам на React!

Таймер на React

Как я уже упоминал, приложение на React разбивается на блоки — компоненты. Они создаются путем вызова React.createClass() с объектом опций и методов. Каждый компонент имеет состояние (объект с данными) и каждый отвечает за свой собственной рендеринг — метод render() вызывается всякий раз, когда состояние изменяется. Вот пример создания простого таймера:

Таймер на React JS

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

Навигационное меню на React JS

Давайте посмотрим, как мы можем обработать событие click в React на примере создания меню навигации:

Обратите внимание на атрибут className, которого не существует в HTML. дело в том, что JSX — это JavaScript и такие атрибуты, как class и for неодобряются. Вместо них следует использовать className и htmlFor. Результат работы нашего примера вы можете посмотреть на странице Меню на React.

Мгновенный поиск

Как вам, должно быть, известно, больше всего на свете пользователи не любят долгое ожидание. Вот как можно сеализовать на React функционал для мгновенного поиска.

Обратите внимание, что в React обновление состояния нашего контроллера влияет на HTML код, а не наоборот. В этом примере, как только вы ввели какое-то значение текстового поля, оно будет оставаться прежним. Нажатие на клавиши не будет учитываться до тех пор, пока вы не измените текстовоое поля событием onChange (вы можете изменить такое поведение, но это рекомендованный для подобных вещей метод).

Результат работы нашего примера вы можете посмотреть на странице Мгновенный поиск на React JS.

Форма заказа на React

Настоящая мощь React JS проявляется, когда вы работаете с несколькими компонентами. Он позволяет лучше структурировать код и ввести разделение задач, что дает возможность легко использовать ваш код между различными частями приложения. Вот пример формы заказа, которая позволяет клиентам рассчитать стоимость работ за разработку сайта:

Основная проблема, возникающая при работе с несколькими компонентами, — это как реализовать обмен данными между ними. Можно передавать необходимые данные атрибутами при их инициализации. Это работает только в случае общения компонентов «от родительского к дочернему». Для общения в другом направлении можно передать один из методов родительского компонента в дочерний с помощью атрибута.

Результат работы нашего примера вы можете посмотреть на странице Форма заказа на React JS.

Работа с jQuery и AJAX

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

Обратите внимание: в нашем примере используется один и тот же компонент Picture для отображения списка со всеми изображениям и избранными. Такое неоднократное использование кода является одним из преимуществ React.

Результат работы нашего примера вы можете посмотреть на странице Работа с jQuery и AJAX вReact JS.

Ленивая загрузка в React

React использует такие сборщики, как WebPack, для упаковки своего кода и его развертывания в браузере. Этот пакет используется браузером для визуализации вашего приложения React.

Теперь представьте, что вы создаете приложение с сотнями компонентов. По умолчанию, упаковщик объединит все эти компоненты в один bundle.js и загрузит ваше приложение. Это, в свою очередь, увеличит первоначальный размер бандла, что приведет к увеличению времени загрузки.

Существует так называемое правило 3х секунд, которое гласит, что для привлечения внимания потребителя требуется примерно 3 секунды. Таким образом, если загрузка занимает больше времени, клиент / пользователь может даже не остаться, чтобы проверить конечный продукт, скорее он может потратить больше времени на поиск альтернативы.

Так, что мы можем сделать, чтобы улучшить нашу работу и не заставлять нашего клиента ждать?

Ответ прост: сначала загрузите компоненты, которые требуются, и, когда потребуются, загрузите остальные. Это и есть ленивая загрузка, загрузка приложения по частям, а не одним пакетом.

Подумайте об этом, у вас есть приложение со следующей структурой:

По умолчанию, когда вы загружаете React приложение, оно загружает все компоненты одновременно. Но требуются ли нам компоненты User Dashboard и Logout, когда пользователь даже не вошел в систему. Первыми мы можем загрузить только компоненты Home и Login / Register, и это уменьшит размер вдвое, увеличив время загрузки. Когда пользователь входит в приложение, мы можем загрузить два других компонента.

Если вы используете create-react-app для создания шаблона, веб-пакет уже настроен для поддержки динамического импорта (Ленивая загрузка). Если вы создаете сборку кода с нуля, вам придется соответствующим образом настроить веб-пакет .

Теперь мы знаем, почему давайте начнем с того, КАК?

В этой статье я покажу вам два способа реализации отложенной загрузки

  • Во-первых, с помощью React.lazy и Suspense (версия React от 16.6.0).
  • Во-вторых, путем создания компонента более высокого порядка (HOC).

Итак, начнем с создания демо-приложения. Вы можете скачать / проверить мой готовый код на GitHub .

Я предполагаю, что вы обладаете базовыми знаниями о React и перейдете непосредственно к реализации.

У меня есть основной компонент App.js, в котором я буду определять два маршрута:

  • Во-первых, для страницы регистрации, которая будет использовать метод HOC.
  • Второй — для страницы входа в систему, которая будет использовать React.Lazy и Suspense.

Использование React.lazy и Suspense

Эта функция была впервые представлена ​​в React версии 16.6.0, чтобы обеспечить ленивую загрузку в экосистеме.

Пока не поддерживается при рендеринге на стороне сервера.

В React мы используем ключевое слово import для извлечения компонента, который в основном является модулем JavaScript.

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

React.lazy делает возможным этот динамический импорт, который также прост в реализации.

React.lazy принимает функцию в качестве параметра, который возвращает обещание из динамического вызова импорта . Это обещание будет выполнено для загрузки модуля, содержащего компонент React .

На данный момент React.lazy не поддерживает именованные экспорты, поэтому не забудьте использовать экспорт по умолчанию для компонентов, которые вы хотите динамически импортировать.

Как только модуль загружен, он вернет новый пакет с Компонентом, объединенным с предыдущим кодом.

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

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

Во-первых, нам нужно импортировать модуль Suspense из React:

Мы можем рассматривать компонент Suspense как HOC, который упаковывает компонент, определенный с помощью React.lazy , например, Login в приведенном ниже фрагменте кода.

fallback атрибут/prop где мы определяем содержание , которое будет отображаться в то время как загружается компонент.

Компонент входа отображается с использованием React.lazy и Suspense

Чтобы проверить, работают ли наши изменения или нет, мы можем проверить dev-tools:

1.chunk вызывается, когда компонент динамически импортируется

0.chunk бандл без компонентов , которые будут вызываться через динамический импорт. После вызова компонента Login был загружен другой файл 1.chunk , который содержит обновленный пакет.

Мы также можем определить отоборажение ошибок в Suspense для обработки пользовательских ошибок, если компонент не загружается.

Создание своего собственного HOC

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

Давайте посмотрим на вызов этого HOC, вы можете увидеть сходство вызывающих методов с методом React.lazy.

Как мы видим, компонент принимает функцию в качестве параметра и возвращает компонент lazyLoader .

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

Компонент Register, отображаемый с использованием нашего пользовательского HOC

Как и в приведенном выше примере, давайте проверим dev-tools: 2

Как мы видим, когда был вызван компонент Register, был отправлен новый чанк с обновленным пакетом.

Вы можете найти репозиторий для приведенного выше примера здесь.

React. Виды компонентов в React.js

Приветствую тебя! Сегодня мы поговорим на такую тему как компоненты в react.js. Какие виды компонентов бывают и где мы их можем использовать.

Функциональный компонент (stateless component)

Компонент бывают простыми и сложными. Для написания простоватого (чистого) компонента нам потребуется объявить его функцией.

В новом синтаксисе ES6 мы можем описать его как стрелочную функцию

Данные записи являются абсолютно одинаковыми. Просто имеют разный синтаксис написания (по версиям js).

Для чего нам вообще нужны такие чистые компоненты и в каких случаях мы можем их применять? Все очень просто. Если нам не нужно хранить состояние внутри компонента то мы можем объявить его как функцию что приведет к лучшей читабельности нашего кода, а так же ее оптимизации с точки зрения быстродействия всего приложения.

Вывод: если нам не нужно хранить состояние компонента то мы всегда должны использовать stateless компонент.

Простой компонент (Simple Component)

Есть еще один вариант написания простого (чистого) компонента, но с использованием синтаксиса классов (ES6).

В этом примере мы реализовали функционал компонента из предыдущего примера но с использованием классов js.

Statefull component

Данный компонент мы будем называть «cложным» по причине хранения в нем состояния.

Заключение

На сегодня это все. Мы прошлись по всем возможным видам компонентов и дали им примеры. Надеюсь что данный материал был для вас полезен.

React, или как перестать беспокоиться и начать жить

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

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

Первое впечатление от React’a

На самом деле, привычное разделение html и js — это не разделение ответственности. В jQuery мы используем селекторы для работы с элементами и навешивания обработчиков событий, в Backbone селекторы используются в представлении для навешивания обработчиков событий, в Angular мы не используем селекторы в js, но в html вызываем Javascript-функции. В любом случае, это порождает высокую связанность (coupling).

В React же синтаксис JSX — это не HTML, это всего лишь синтаксический сахар для javascript-функций. Этот синтаксис может транслироваться в чистый javascript как непосредственно на странице, так и на этапе сборки. Для прекомпиляции можно использовать удобный и привычный инструмент (gulp, grunt, webpack, что больше нравится).

Функция render компонента в общем случае вызывается при любом изменении состояния и свойства компонента. Если для маленького компонента это не кажется страшным, то для более или менее сложного постоянная перерисовка «на каждый чих» кажется избыточной. Но в React используется так называемый виртуальный DOM (Virtual DOM). Фактически React работает с копией реального DOM’а в оперативной памяти. Все изменения вносятся в это виртуальное дерево, потом текущая копия сравнивается с предыдущей копией и, наконец, в реальный DOM вносятся только отличия между этими копиями.

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

* При условии, что компонент — самодостаточная сущность, т.е. cтруктура компонентов логично продумана. Этому стоит уделять особое внимание. Есть отличная статья в официальной документации Thinking in React, перевод на русский.

Второе впечатление от React’а

Пример компонента

Рассмотрим еще раз простой пример компонента.

Здесь мы подключаем сам React, импортируем стили, если необходимо (в примере используется scss, но это не принципиально). Сам компонент в простейшем случае может иметь только функцию render, которая отрисовывает некий кусочек шаблона.

Чтобы использовать компонент, его нужно предварительно подключить, а потом можно вызвать по аналогии с обычным HTML-тегом. Свойства компонента передаются как атрибуты, а внутри компонента они доступны с помощью this.props.

Композиция компонентов

Как мы уже говорили, компоненты можно и нужно компоновать, т.е. включать друг в друга.

Например, компонент Avatar:

Используется в компоненте User:

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

Свойства, состояние, контекст

Как мы уже видели, родительский компонент передает данные в дочерний с помощью свойств. Свойства компонента задаются по аналогии с атрибутами html-элементов.

Внутри дочернего компонента свойства доступны в виде объекта this.props.

Свойства компонента неизменяемы, т.е. внутри компонента изменять this.props нельзя.

Однако компонент может иметь внутреннее состояние. Это объет this.state, доступный внутри самого компонента.

Свое состояние компонент может передать дочернему в виде свойства:

Если необходимо передать данные через несколько компонентов в иерархии, не обязательно по цепочке передавать свойства от родителя в дочернему компоненту. В данном случае, можно использовать так называемый контекст.

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

Свойства компонентов и контекст позволяют передавать данные сверху вниз по иерархии. Однако может возникнуть необходимость дочернему компоненту сообщить свое состояние родителю. Для этого можно использовать обработчики событий.

Рассмотрим простой пример интерфейса.

Выделим следующие компоненты:

  • Users — корневой компонент для всего интерфейса
  • Search — форма поиска
  • UsersList — список пользователей
  • User — блок одного пользователя

При вводе текста в поле поиска список пользователей должен фильтроваться, состояние компонента Search необходимо передать на уровень выше в компонент Users, чтобы тот отфильтровал список пользователей и передал его в виде свойства в компонент UsersList.

Добавим в компонент Search обработчик события onChange:

А в компоненте Users передадим функцию filterList в качестве свойства onChange в компонент Search.

Заключение

Мы рассмотрели базовые возможности и особенности React. За пределами рассмотрения оказались такие вещи как жизненный цикл компонентов, компоненты высшего порядка, stateless-компоненты, валидация свойств.

Нашли опечатку? Orphus: Ctrl+Enter

© getinstance.info Все права защищены. 2014–2020

Все права на материалы, публикуемые на данном сайте, принадлежат редакции сайта, за исключением случаев перепечатки чужих материалов, и охраняются в соответствии с законодательством РФ.

Как объединить в React js компоненты для упрощения работы с приложением: примеры и синтаксис

Сразу начнём с примера, который будем разбирать в течение урока:

See the Pen js_react_component by Hexlet (@hexlet) on CodePen.

Центральное понятие в React — компонент. Более того, это единственная сущность, которую он содержит. Вся остальная функциональность построена вокруг компонентов.

В примере выше создан компонент, который добавляет

Вот как выглядит получившийся html:

Импорты

CodePen импортирует React автоматически (его нужно указать в подключаемых библиотеках), но в своём коде импорты пропускать нельзя:

Топ-пост этого месяца:  Избавляемся от пятен или как в PHP удалить элемент массива

Из кода и импортов видно, что для работы с React нужно две библиотеки: сам React и ReactDOM. Причина наличия двух зависимостей достаточно проста. Сама библиотека React не связана с DOM напрямую и используется не только в браузере. Поэтому отрисовка конкретно для DOM вынесена в отдельный пакет ReactDOM.

Компонент

Очевидные тезисы

  1. Компонент React – это класс, который наследуется от класса React.Component (как мы увидим позже, это не единственный способ создать компонент).
  2. Функция render возвращает нечто (обсудим позже), что будет отрисовано в браузере. Класс-компонент без функции render существовать не может, это его интерфейс.

Экспорт класса по умолчанию задан не спроста. В JS принято создавать один класс на файл. В отличие от обычных классов, React-компоненты имеют расширение JSX, а значит компонент, определённый выше, должен лежать в файле с именем Hello.jsx .

Обратите внимание: класс всё равно проименован, хотя это и не обязательно в случае дефолтного экспорта. Мы действительно можем его не именовать, но тогда через расширение React Dev Tools будет тяжело понять, что же отрисовал React, так как любой безымянный компонент отображается как . Поэтому возьмём себе за правило всегда давать компонентам имена.

Подробное руководство по React.js в 2020 году

Эта статья была впервые опубликована в 2015 году, на данный момент она дополнена под версию React 16.3 и ее особенности.

Компоненты (Components) — «строительные блоки» в React. Если исходить из контекста Angular, у компонентов много общего с Directives. Если вы используете другой контекст, то это, по существу, виджеты или модули.

Вы можете думать о компонентах как о коллекции HTML, CSS, JS и некоторых «внутренних данных», специфичных для этого компонента. Мне нравится сравнение компонентов с Kolaches в веб. В них есть все, что нужно, запакованное в восхитительный компонуемый сверток.

Компоненты определяются на «чистом» (pure) JavaScript или они могут быть определены на том, что команда React называет “JSX”. Если вы решите использовать JSX (который, вы, вероятнее всего, будете использовать, и это стандартно — мы также будем его использовать для нашего туториала), вам понадобится какой-то этап компиляции, чтобы преобразовать JSX в JavaScript. Но об этом мы поговорим позже.

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

Выше представлено изображение моего профиля Twitter. Если мы собираемся воссоздать эту страницу на React, мы разделили бы различные секции на разные компоненты (они выделены). Обратите внимание, что компоненты могут иметь вложенные компоненты внутри себя.

Мы могли бы назвать компонент слева (розовый) UserInfo . Внутри UserInfo компонента у нас есть еще один компонент (оранжевый), который мы могли бы назвать UserImages -компонентом.

Путь, по которому «работают» эти родительско-дочерние отношения — это наш UserInfo -компонент, или родительский компонент, в котором «живет» «состояние» (“state”) данных для него самого (UserInfo), так и для дочернего компонента UserImages .

Если мы хотим использовать какую-то часть данных родительского компонента в дочернем компоненте, то мы передадим эти данные дочернему компоненту в качестве атрибута.

В этом примере мы передаем UserImages-компоненту все изображения, которые есть у пользователя (которые в настоящее время «живут» в UserInfo -компоненте).

Мы немного подробнее расскажем о деталях кода, но я хочу, чтобы вы поняли более общую картину того, что здесь происходит.

Эта иерархия parent / child делает управление нашими данными достаточно простым, потому что мы точно знаем, где находятся наши данные и мы не должны манипулировать ими в другом месте.

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

Я знаю, что это может выглядеть как «чересчур много», но вскоре вы увидите, насколько фундаментально важна каждая часть для создания надежных веб-приложений на React (и я также не шучу, когда я говорю, что хочу, чтобы это было «всесторонним» или исчерпывающим руководством).

На этом этапе вы должны понимать на «очень высоком уровне», как работает React. Теперь давайте перейдем к коду.

Создание первого компонента (JSX, Virtual DOM, render, ReactDOM.render)

Продолжим и напишем наш первый компонент на React.

Чтобы создать компонент на React, будем использовать ES6-класс. Если вы не знакомы с Классами, вы можете продолжить чтение, или узнать о них больше из других источников. (например, здесь — прим.переводчика)

Обратите внимание, что единственный метод в нашем классе — это render . Он является обязательным.

Причина — визуализация (render), описывающая пользовательский интерфейс (UI) нашего компонента. Таким образом, в этом примере текст, который будет отображаться на экране, где «рендерится» этот компонент, — Hello World!

Теперь изучим, что делает ReactDOM.

ReactDOM.render принимает два аргумента. Первый — компонент, который нужно отобразить, а второй — DOM-узел, где необходимо отобразить компонент.

Обратите внимание, мы используем ReactDOM.render , а не React.render . Это изменение в версии React.14, оно произведено, чтобы сделать React более «модульным». Это важно, если вы предполагаете, что React может отображать больше, чем просто DOM-элемент.

В примере выше мы просим React взять наш компонент HelloWorld и выполнить его render в элементе с ID root .

Из-за родительских / дочерних отношений React, о которых мы говорили ранее, обычно использовать ReactDOM.render потребуется только единожды, потому что рендер «самого» родительского компонента уже предполагает отображение всех его вложенных дочерних компонентов.

Теперь на этой стадии вы можете почувствовать немного странное «бросание» «HTML» в свой JavaScript. С тех пор, как вы начали изучать веб-разработку, вам сказали, что вы должны оставить свою логику вне представления, то есть сохранить ваш JavaScript, не связанный с вашим HTML.

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

«HTML», который вы пишете в методе render, на самом деле не HTML, это то, что в React называется «JSX». JSX просто позволяет нам писать HTML-подобный синтаксис, который в конечном итоге преобразуется в легковесные объекты JavaScript. После чего уже React может принимать эти объекты JavaScript и от них формировать «виртуальный DOM» или представление JavaScript реального DOM («виртуальный DOM» — «легковесная копия реального DOM» — прим. переводчика). Это создает ситуацию с выигрышем, когда вы получаете доступность шаблонов с мощью JavaScript.

В примере ниже то, во что в итоге будет скомпилирован ваш JSX.

Теперь вы можете отказаться от фазы преобразования JSX -> JS и написать свои компоненты на React, например, как в коде выше. Но, как вы можете себе представить, это было бы довольно сложно. Я не знаю никого, кто не использует JSX. Для получения дополнительной информации о компиляции JSX посмотрите статьи на тему React Elements vs React Components.

До этого момента мы не выделяли особо важность этой новой виртуальной парадигмы DOM, в которую мы «запрыгиваем».

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

В более «дилетантских» выражениях, поскольку манипулирование реальным DOM происходит медленно («является более дорогостоящей операцией» — прим. переводчика), React способен минимизировать манипуляции с реальным DOM, отслеживая виртуальную копию DOM и обновляя реальный DOM только при необходимости и только с нужными изменениями.

Как правило, UI имеет множество состояний, затрудняющих управление состоянием в целом. Посредством ре-рендера виртуального DOM каждый раз, когда происходит какое-либо изменение состояния, React действительно упрощает размышления о том, в каком состоянии находится ваше приложение.

Процесс выглядит примерно так:

Некоторое пользовательское событие, которое изменяет состояние вашего приложения → ре-рендер виртуального DOM → Различие копий предыдущего виртуального DOM с новым → Обновление только реального DOM и только с необходимыми изменениями.

Поскольку это процесс преобразования от JSX к JS, необходимо настроить какую-то фазу трансформации во время разработки.

Во второй части я расскажу о Webpack и Babel для этого преобразования.

Давайте посмотрим на наш чек-лист «Самых важных частей React» и разберемся, где мы сейчас:

Мы идем в хорошем темпе. Все, что выделено «галочкой» — это то, что мы уже прошли, и вы сможете, по крайней мере, объяснить, как конкретно эти компоненты вписываются в экосистему React.

Добавление состояния к компоненту (state)

Далее по списку state . Ранее мы говорили о том, как сложно управлять UI, потому что они обычно имеют множество разных состояний. Это случай, когда React действительно начинает «светиться».

Каждый компонент имеет возможность управлять своим собственным состоянием (state) и передавать его дочерним компонентам, если необходимо.

Возвращаясь к примеру Twitter, UserInfo -компонент, (выделенный розовым цветом), отвечает за управление состоянием (или данными) информации пользователя.

Если другому компоненту тоже нужно это состояние / данные, но это состояние не было прямым дочерним UserInfo , тогда вы создали бы другой компонент, который был бы прямым родителем UserInfo и другого компонента (или обоих компонентов, которым требуется это состояние). Затем вы «прокинете» состояние вниз в качестве props в дочерние компоненты. Другими словами, у вас есть мульти-компонентная иерархия, где общий родительский компонент должен управлять состоянием и передавать его дочерним компонентам через props.

Рассмотрим примерный компонент, который использует свой state:

В этом примере мы использовали новый синтаксис. Первое, что вы заметите, — это метод конструктора. Из определения выше, метод конструктора — «способ установки состояния компонента» (начального состояния — прим.переводчика). Другими словами, любые данные, которые вы помещаете в this.state внутри конструктора, будут частью состояния этого компонента.

В коде выше мы сообщим нашему компоненту, что хотим, чтобы он отслеживал username . Этот username может быть теперь использован внутри нашего компонента через , что является именно тем, что мы делаем в нашем render-методе.

Последнее о чем можно поговорить про state в том, что нашему компоненту нужна возможность изменять собственное внутреннее состояние. Мы делаем это с помощью метода, который называется setState. Помните ранее, когда мы говорили о ре-рендеринге виртуального DOM при каждом изменении данных?

Сигнал об уведомлении нашего приложения о том, что некоторые данные изменились → Ре-рендер виртуального DOM → Разница (diff) между предыдущей виртуальной копией DOM с актуальной → Обновление только реального DOM с необходимыми изменениями.

Этот «сигнал об уведомлении нашего приложения о том, что некоторые данные изменились» на самом деле просто setState. Всякий раз, когда вызывается setState, виртуальный DOM повторно ре-рендерится, выполняется алгоритм «разницы», а реальный DOM обновляется с необходимыми изменениями.

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

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

Заметьте, мы добавили еще несколько вещей. Во-первых, это handleChange -коллбек. Этот метод будет вызываться каждый раз, когда пользователь что-то вводит в инпут.

Когда вызывается handleChange , он будет вызывать setState , чтобы изменить наш username на значение, которое было введено в поле ввода (e.target.value) (предпочтительнее использовать e.currentTarget.value — прим.переводчика).

Помните, всякий раз, когда вызывается setState , React создает новый виртуальный DOM, выполняет «diff», а затем обновляет реальный DOM.

Теперь давайте посмотрим на наш render-метод. Мы добавили новую строку, содержащую поле ввода. Тип поля ввода, очевидно, будет text . Значение будет значением нашего username (имя пользователя), которое изначально было определено в конструкторе и будет обновлено в методе handleChange .

Обратите внимание, что есть новый атрибут, с которым вы, возможно, разньше не сталкивались — это onChange .

Атрибут onChange является «вещью из React», и он будет вызывать любой метод, который вы указываете, каждый раз, когда изменяется значение в поле ввода — в этом случае указанным нами методом был handleChange . (по аналогии с onchange в нативном javascript — прим.переводчика)

Процесс для кода выше будет выглядеть примерно так:

Пользователь вводит информацию в поле ввода (текст инпут) → вызывается handleChange → состояние нашего компонента меняется на новое значение → React повторно отображается виртуальную DOM → React считывает изменения → реальный DOM обновляется.

Позже, когда мы рассмотрим props, мы увидим несколько более сложных вариантов использования состояния.

А пока, мы идем дальше! Если вы не можете объяснить то, что выделено «галочкой», прочитайте этот раздел еще раз.

Один совет по ДЕЙСТВИТЕЛЬНОМУ изучению React: не позволяйте себе пассивно читать, давая себе ложное чувство понимания материала (почему только React? Это работает везде — прим.переводчика).

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

Получение state от родительского компонента (props, propTypes, getDefaultProps)

Мы уже несколько раз говорили о props, потому что сделать что-то толковое без их использования не выйдет. По нашему определению выше, props — это данные, которые передаются дочернему компоненту из родительского.

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

Вот очень простой пример использования props.

Обратите внимание, что в строке 9 мы имеем параметр name со значением «Tyler». Теперь в нашем компоненте мы можем использовать , чтобы получить «Tyler».

Давайте рассмотрим более продвинутый пример. Теперь у нас будет два компонента. Один — родитель, другой — потомок. Родитель должен отслеживать состояние и передавать часть этого состояния дальше до ребенка в качестве props.

Разберем родительский компонент.

В этом компоненте не так много нового. У нас есть изначальное состояние (initial state, задано в конструкторе) и мы передаем его часть другому компоненту.

Большая часть нового кода содержится в дочернем компоненте, поэтому давайте остановимся на нем более подробно.

Помните, что код, который возвращает метод render — это представление того, как должен выглядеть реальный DOM. Если вы не знакомы с Array.prototype.map, этот код может показаться вам немного странным. Все, что делает метод .map — создает новый массив, вызывает коллбек для каждого элемента массива и заполняет новый массив результатом вызова функции-коллбека для каждого элемента.

Обратите внимание, что мы сделали новый массив и добавили теги элемента списка к каждому элементу из оригинального массива.

Что примечательно касательно .map, этот метод отлично вписывается в React (и идет «из коробки» в JavaScript). Таким образом, в нашем дочернем компоненте выше мы просто обернули имена в тэг
и сохраняем результат в переменной listItems.

Затем метод render возвращает неупорядоченный список ( ) со всеми нашими друзьями.

Рассмотрим еще пример, прежде чем закончим с props. Важно понимать, что везде, где есть данные, ими можно там же манипулировать. Это упрощает рассуждение о данных. Все методы getter / setter для определенной части данных всегда будут в том же компоненте, где были определены эти данные. Если вам нужно манипулировать какой-то частью данных вне того, где «живут» данные, вы передадите метод getter / setter в этот компонент в качестве props. Давайте посмотрим на такой пример.

Обратите внимание, что в нашем методе addFriend мы добавили новый способ вызова setState. Вместо того, чтобы передавать объект, мы передаем ему функцию, которая затем передается state. Всякий раз, когда вы устанавливаете новое состояние своего компонента на основе предыдущего, (как мы это делаем с нашим массивом друзей), вы хотите передать setState функцию, которая принимает текущее состояние и возвращает данные для слияния с новым состоянием.

Вы заметите, что приведенный выше код в основном такой же, как в предыдущем примере, за исключением того, что теперь у нас есть возможность добавить имя в список наших друзей. Обратите внимание, как создан новый компонент AddFriend, который управляет «новым другом», которого мы собираемся добавить.

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

Однако, поскольку мы придерживаемся правила манипулировать данными только из компонента, «которому не все равно», мы передали метод addFriend в наш компонент AddFriend в качестве props и мы вызываем его с new friend после вызова handleAddNew.

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

Прежде чем мы пойдем дальше, хочу рассказать об еще двух возможностях React в отношении props. Это propTypes и defaultProps. Здесь я не буду вдаваться в подробности, потому что они довольно просты.

prop-types позволяют контролировать наличие или типы определенных props, переданных дочернему компоненту. С помощью propTypes вы можете указать, что требуются определенные props или что props являются определенным типом.

Начиная с React.15, PropTypes больше не включается в пакет React. Вам нужно будет установить их отдельно, запустив npm install prop-types .

defaultProps позволяют указать значение по умолчанию (или бэкап) для определенных props только в том случае, если эти props никогда не передаются в компонент.

Я изменил наши компоненты и теперь, используя propTypes, мы ожидаем что свойство addFriend будет функцией и что оно (свойство) будет передано в компонент AddFriend. Также, используя defaultProps, мы указали, что если массив друзей не передается компоненту ShowList, он будет пустым по умолчанию.

Итак, мы на последнем участке первой части.

Давайте посмотрим, что у нас осталось по плану.

Мы близки к финалу!

Жизненный цикл компонента (Component LifeCycle)

У каждого компонента, который вы создаете, будут свои события жизненного цикла, которые могут быть полезны для разных манипуляций. Например, если мы хотим сделать запрос AJAX для первого рендера и получить (fetch) данные, в каком lifecycle-методе это лучше сделать? Или, если бы мы захотели запустить какую-то логику, когда props изменились, как мы это сделаем?

Различные события жизненного цикла — ответы на оба вопроса.

Рассмотрим их ниже.

componentDidMount — вызывается один раз после первого рендера. К этому моменту компонент уже есть в DOM. Если вам нужно обратиться к виртуальному DOM — к вашим услугам this.getDOMNode(). Так же это лучший метод жизненного цикла компонента для работы с запросами на сервер.

Топ-пост этого месяца:  Чек-лист продвижения в Instagram 2020 посты, профиль, аккаунт

componentWillUnmount — этот метод жизненного цикла вызывается непосредственно перед тем, как компонент будет удален из DOM. Здесь вы можете произвести необходимую очистку.

getDerivedStateFromProps — иногда вам нужно обновить состояние вашего компонента на основе «пришедших» props. Это метод жизненного цикла, в котором это можно сделать. Он будет принимать props и state, а возвращаемый объект будет объединен с текущим состоянием.

Если вы дошли до этого момента, это отличная работа! Я надеюсь, что это руководство было полезно для вас и теперь вы лучше понимаете React.

Для получения более подробной информации обратитесь к курсу Tyler McGinis React Fundamentals.

React: создание простых в обслуживании, быстродействующих компонентов пользовательского интерфейса

Выйдите за рамки модели DOM браузера и создавайте простые в обслуживании веб-интерфейсы пользователя с помощью JavaScript-библиотеки React

JavaScript — который поддерживается всеми современными браузерами и бесспорно является де-факто естественным языком веб-программирования — имеет прямой доступ ко всему богатству функций «веб как платформы». Сложные JavaScript-проекты все чаще выходят за рамки возможностей программистов-одиночек и переходят в руки крупных команд разработчиков. Этот сдвиг несет с собой целый букет проблем. Работающий код, основанный на хитроумных решениях, становится недоступным для понимания и обслуживания другими. Новичку может понадобится много времени, чтобы освоить сложную систему. Постоянно растущая база кода не допускает многократного использования в рамках команды в целом. А неуловимые, неустойчивые аномалии производительности часто проявляются только в промышленных, эксплуатируемых системах.

Эти проблемы хорошо знакомы разработчикам передовых социальных сетей, создающих конкурентоспособные и сложные веб-интерфейсы, которыми ежедневно пользуются миллионы. В 2013 году компания Facebook/Instagram выпустила проект React — библиотеку компонентов пользовательского интерфейса — как проект ПО с открытым исходным кодом, предоставив программистам возможность познакомиться с тем, как она справляется с этими болезнями роста. Разработчики JavaScript, которым, приходится сталкиваться с теми же трудностями, с энтузиазмом встретили React и сопутствующие практические рекомендации.

Это руководство знакомит читателя с библиотекой React и объясняет, как она работает, а также дает практические рекомендации и учит быстро программировать на конкретных примерах. (За примерами кода обращайтесь к разделу Загрузки.) Освоив его, вы сможете создавать собственные многоразовые React-компоненты или компоновать их из сотен готовых компонентов с открытым исходным кодом, разработанных сообществом.

В сопутствующем руководстве Создание анализатора на основе IBM Watson с помощью React показано, как использовать React и компоненты с открытым исходным кодом для создания полноценного сетевого приложения.

Библиотека React для создания многоразовых компонентов пользовательского интерфейса

“ Вы декларативно описываете иерархию компонентов своего пользовательского веб-интерфейса и вводите ее в виртуальную модель DOM React. Затем React заботится о синхронизации вашего пользовательского интерфейса с фактической DOM-моделью браузера в соответствующие моменты времени. ”

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

Для оптимизации быстродействия компоненты React сначала преобразуются в управляемую модель Virtual DOM, как показано на рисунке 1.

Рисунок 1. Работа React
Работа в абстрактном режиме

Модель Virtual DOM работает в React в абстрактном режиме. Вы декларативно описываете, как ваш пользовательский интерфейс должен выглядеть и вести себя (в форме графа сцены JSX компонентов, подлежащих визуализации), а затем механизм исполнения подыскивает оптимизированный способ его воспроизведения. Работа в абстрактном режиме (retained-mode) позволяет выполнять оптимизацию для достижения высокой производительности рендеринга и широко применяется в работе с 3D-графикой, включая популярные игровые механизмы и WebGL-платформы; он также реализован в современных платформах приложений, таких как Famo.us.

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

Этот подход абстрактного режима (см. боковую врезку Работа в абстрактном режиме) решает большой класс проблем производительности, связанных с непосредственным изменением элементов DOM браузера при каждом визуальном переходе (именно так работают популярные библиотеки компонентов пользовательского интерфейса, такие как jQuery UI).

В отличие от аналогичных библиотек, React не применяет стандартный стиль управления состоянием и разработки пользовательского интерфейса «модель-представление-контроллер» (MVC). Вместо этого, React занимается исключительно созданием представлений, и участники проекта объясняют, почему MVC – не лучший способ создания сложных веб-интерфейсов (см. боковую врезку Ловушки MVC при создании сложных современных пользовательских интерфейсов). Однако в React нет ничего, что мешало бы использовать конструкцию MVC; многие разработчики в начале работы с React вставляют новый код в уровень представления существующих крупных проектов на основе MVC.

Ловушки MVC при создании сложных современных пользовательских интерфейсов

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

Экземпляры модели часто организованы как структуры данных в памяти, представляющие изменяемое состояние приложения, которые прямо или косвенно используются контроллерами. Эта ситуация может приводить к путанице моделей данных (и их вычисляемых или производных версий), проходящих сквозь сеть MVC, что затрудняет определение единого источника истины для управляемых фрагментов данных в любой момент времени. В качестве примера группа React приводит трудности с прослеживанием «каскадных обновлений», распространяемых по запутанной сети MVC.

Зачем понадобилась еще одна библиотека JavaScript для пользовательского интерфейса

Вот некоторые преимущества библиотеки React:

  • она проста в освоении; опытный программист на JavaScript освоит ее за один день;
  • проверенные рекомендации учат создавать компоненты, способные сделать большую базу кода JavaScript простой в обслуживании и легко управляемой;
  • React работает с большинством загрузчиков и наборов инструментов — AMD, CommonJS, или globals; gulp, bower, npm, browserify, webpack, grunt, — удовлетворяя потребности современных JavaScript-разработчиков;
  • принятие React не является рискованным решением «все или ничего». Библиотека хорошо сочетается с большинством существующих баз кода (даже с устаревшими MVC) и интегрируется с существующими платформами пользовательского интерфейса (см. раздел Ресурсы);
  • дизайн React идеально сочетается с асинхронными серверными архитектурами для адаптации к будущим технологиям;
  • среда исполнения React фокусируется на производительности и в то же время может распространяться на другие целевые платформы, в том числе iOS и Android (через React Native).

Объединение декларативного описания пользовательского интерфейса с логикой JSX

JSX – это преобразователь и компилятор, воспринимающий расширенный синтаксис JavaScript. JSX переводит расширенную HTML-подобную запись вроде следующей:

. в вызовы JavaScript API React:

Экспериментирование с JSX в онлайне

Чтобы гораздо лучше изучить JSX, можно «поиграть» с интерактивным онлайн-компилятором JSX.

Знакомая HTML-подобная форма записи JSX значительно упрощает кодирование и обслуживание компонентов React. Это упрощение особенно очевидно при объявлении соотношений между глубоко вложенными компонентами.

JSX позволяет разместить логику пользовательского интерфейса вместе с соответствующим структурным описанием в одном файле, что помогает повысить производительность труда и уменьшить количество ошибок в крупных проектах. При использовании других платформ может потребоваться синхронизировать в три раза больше файлов: файлы шаблона, обработчика кода JavaScript и структурного описания HTML.

Развертывание JSX

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

Во всех примерах этого руководства для простоты используется преобразователь, встроенный в браузер (см. раздел Загрузка). Первый пример (example1) извлекает React и JSX-преобразователь из сети доставки контента (CDN) и демонстрирует простейший способ получить работающее приложение (файлы размещаются за веб-сервером и обращаются к своим URL-адресам):

В примерах example2 и example3 для установки React используется менеджер пакетов bower; они обращаются к локально установленным копиям JSX-преобразователя в браузере. Так, пример example2.html извлекает два файла:

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

Создание специальных компонентов React

Теперь мы быстро создадим с помощью React компонент, используя код из example1.jsx:

Этот простой специальный компонент React, показанный на рисунке 2 вместе с другими компонентами React, обрабатывает неконтролируемое поле ввода, упаковывая базовый HTML-элемент . Теперь этот компонент можно использовать как . Обратите внимание, что имена нативных HTML-элементов начинаются со строчной буквы, а имена специальных компонентов (классов) React — с прописной.

Рисунок 2. Компоненты React , и .

Свойства компонентов React и выражения JavaScript в JSX

Второй специальный компонент в example1 – это :

визуализирует настраиваемый HTML-элемент . Этот компонент демонстрирует входящие свойства (props). Это входные аргументы компонента; они точно соответствуют атрибутам HTML-тега. Компонент получает доступ к этим атрибутам, чтобы настроить свой процесс визуализации посредством this.props . Для отображения значений свойств можно использовать поддержку механизмом JSX оценки встроенных JavaScript-выражений с помощью < JavaScript expression > .

На рисунке 2 экземпляр параметризован признаком OK в своем свойстве textlabel : .

Компоновка компонентов React

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

В примере example1 в пользовательском интерфейсе скомпонованы специальные компоненты — , и —. JSX упрощает этот процесс:

Предшествующий вызов API визуализирует скомпонованные компоненты в элемент

Функция как свойство и SyntheticEvent в React

Атрибуты элементов часто параметризуются не простыми типами данных, а функциями обратного вызова. Например, вам, вероятно, приходилось настраивать атрибут onClick HTML-элемента . Тот же метод можно применить и к компонентам React. Во втором примере, example2.jsx, специальный компонент React в качестве одного из свойств принимает обратный вызов обработчика onClick :

Автоматическая привязка в React

Проницательные читатели заметят, что в компоненте React нет обращений обработчиков обратного вызова к bind(this) . Тем не менее, ссылка на this в логике работает корректно — потому что React автоматически привязывает каждый метод компонента к его экземпляру. Эта функция называется autobinding.

При нажатии кнопки запускается событие onClick элемента HTML , и React передает это событие в реализацию _buttonClicked() элемента .

Важно понимать, что _buttonClicked() вызывается не нативным событием DOM браузера, а экземпляром собственного, не зависящего от браузера W3C-совместимого объекта React SyntheticEvent . SyntheticEvent демонстрирует единое поведение в разных браузерах и обертывает фактическое, исходное событие DOM. (Обернутое событие DOM остается доступным через свойство nativeEvent ; см. ссылку на информацию по SyntheticEvent в разделе Ресурсы).

Код в _buttonClicked() проверяет, что собственное свойство onClick элемента задано, а затем пересылает SyntheticEvent в обработчик событий.

Сохранение состояния в компонентах React

В некоторых компонентах нужно сохранять внутреннее состояние, которое используется во время визуализации. Например, компонент «флажок» должен помнить, что он был выбран.

В примере example2.jsx компонент сохраняет внутреннее состояние (переменную data , которое всегда отражает текущее числовое значение, введенное в текстовое поле. Чтобы обеспечить начальное значение переменной состояния, реализуем getInitialState() . В элементе > инициализируется значение data , равное 1 :

Состояние компонента React доступно через this.state . А this.state.data используется для отображения значения базового элемента в любое время:

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

В случае этого компонента базовый элемент – контролируемый, потому что его значение всегда отображается компонентом React (в отличие от неконтролируемой версии в примере example1).

Работа с example2: динамический генератор таблицы

Чтобы лучше понять, как работает и example2, запустите этот пример. Поместите файлы example2 за веб-сервер и обратитесь к файлу example2.html. Рисунок 3 демонстрирует, что вы увидите. Количество строк установлено равным 1, поскольку начальное значение this.state.data – 1 .

Рисунок 3. Специальный компонент динамического генератора таблицы

В текстовое поле можно вводить любое значение от 1 до 9; ничего другого оно не примет. При нажатии кнопки ОК в таблице с правой стороны генерируется указанное количество строк. На рисунке 4 показаны 9 сгенерированных строк.

Рисунок 4. Генератор таблицы демонстрирует девять строк

При вводе значения в текстовое поле запускается событие элемента onChange , и React передает это событие обработчику _entryChanged() комеонента .

_entryChanged() проверяет, что введенное значение – число от 1 до 9. Любое введенное значение, выходящее за этот диапазон, заменяется значением 1 . Затем _entryChanged() обновляет состояние ( data ) с помощью this.setState() . Если data присвоено новое значение, то содержимое текстового поля обновится в следующий раз, когда React вызовет render() . В результате содержание всегда соответствует переменной состояния data .

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

За отображение строк таблицы отвечает компонент React (см. исходный код) – в зависимости от переданного ему свойства rows . Каждая ячейка таблицы — это экземпляр , который обертывает отключенный элемент .

Наконец, компонент
составляет вместе , и для создания окончательного пользовательского интерфейса. При нажатии на экземпляр обработчик _okClicked() копирует его состояние из data (отслеживает значение ) в rows (используется для отображения строк в ). Это изменение состояния в обработчике событий приводит к тому, что отображает строки.

Оптимизация рендеринга с помощью shouldComponentUpdate и PureRenderMixin

Рендеринг в Virtual DOM и так работает быстро. Тем не менее, все же полезно исключить повторный рендеринг отдельных частей пользовательского интерфейса, которые не меняются между проходами рендеринга.

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

Компонент
в примере example2 использует дополнение React PureRenderMixin :

Mixin добавляет реализацию shouldComponentUpdate , которая поверхностно сравнивает все предыдущие значения состояний и свойств с текущими. Если никаких изменений не обнаружено, она возвращает значение false — тем самым исключая ненужный рендеринг. Если внешний вид компонента целиком зависит от значений состояния и свойств, как в случае
, то mixin помогает оптимизировать производительность рендеринга.

Использование сторонних многоразовых компонентов React

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

В примере example3 для создания пользовательского интерфейса для построения столбиковой диаграммы применяется сторонний компонент React (react-bar-chart, созданный Матеушем Зителли). В этом примере отображается статистика посещаемости страницы веб-сайта, упорядоченная по возрастным группам. Этот пользовательский интерфейс представлен на рисунке 5.

Рисунок 5. Компонент обновляемой столбиковой диаграммы

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

Таблица 1 описывает специальные компоненты example3 и может выступать в качестве руководства по самостоятельному изучению исходного кода example3. Компоненты на рисунке 5 отчетливо помечены.

Таблица 1. Компоненты React примера обновляемой столбиковой диаграммы
Компонент React Описание Важные состояния/свойства
Ячейка обновляемой таблицы. Содержит контролируемый элемент и элемент . Элемент отключен, а имеет значение , пока значение ячейки не редактируется. editing : следит за тем, редактируется ли ячейка.

data : всегда содержит значение, отображаемое в ячейке. Многострочная таблица, содержащая в каждой строке экземпляр . Без сохранения состояния. data – свойство, массив значений hash , содержащий элементы text и value для заполнения каждой строки. onUpdate — свойство обратного вызова, включается после сеанса редактирования, передавая информацию измененной ячейки. Контроллер-представление. Отображает экземпляр с помощью стороннего компонента React. Взаимодействует с хранилищем Flux, получая уведомление при изменении статистики сайта. stats : массив значений hash , содержащий элементы text и value ; источник данных для диаграммы. Контроллер-представление. Взаимодействует с диспетчером Flux, отправляя действие обновления sitestats при изменении значения ячейки таблицы. sitestats : массив значений hash , содержащий элементы text и value ; отслеживает текущие значения таблицы. Составляет и , формируя окончательный UI. Без сохранения состояния. data – это свойство, источник исходных данных, извлекаемых из хранилища Flux, которые отображаются в составных компонентах.

Доступ к отображаемым элементам и физическая модель DOM

Большая часть кода работает только с виртуальной моделью DOM. Однако в некоторых ситуациях требуется доступ к фактической модели DOM браузера. Один из примеров – когда нужна интеграция с существующей библиотекой, такой как jQuery Mobile (см. раздел ресурсов) и D3; другой пример находится в обработчике _cellClicked() в компоненте . После того как на ячейке щелкнули, она переходит в режим редактирования, и фокус перемещается к фактическом элементу модели DOM браузера . Это делается с помощью задержанного вызова getDOMNode() :

refs используется для доступа к элементам, созданным во время рендеринга в виртуальной модели DOM (по аналогии с getElementById() в модели DOM браузера).

Передача свойств с распространенными атрибутами JSX

В компоненте все свойства передаются на обернутый экземпляр . Однако значение свойства onUpdate должно быть переопределено и направлено к своему обратному вызову _dataUpdated . Для этого используется форма распространенных атрибутов JSX:

Значения свойств по умолчанию

В компоненте начальное значение по умолчанию свойства sitestats извлекается из хранилища Flux (см. раздел Flux: расширенная архитектура приложений React). Для передачи этого начального значения по умолчанию используется getDefaultProps . React кэширует значение для последующего использования:

Стилевое оформление компонентов React

Для стилевого оформления приложения используются обычные CSS. Например, в примере example3.css для стилевого оформления приложения предусмотрен код flexbox CSS3:

Обратите внимание на использование свойства className в для задания класса CSS (во избежание конфликта с ключевыми словами JSX):

Если есть стили, которые могут меняться в зависимости от внутреннего состояния компонента, то можно выполнить стилизацию и в JavaScript с помощью встроенного стилевого оформления. содержит нативный , который стилизуется посредством встроенного JavaScript:

Flux: расширенная архитектура приложений React

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

Вкратце, общее изменяемое состояние приложения, используемое при рендеринге компонента, передается на более высокие уровни. Традиционные контроллеры заменены на контроллеры-представления (представления объекта верхнего уровня – такие как и в примере example3, — которые управляют состоянием, отображаемым собственными субпредставлениями). Теперь операции традиционной модели выполняются посредством передачи действий в соответствующие хранилища через дноэлементный диспетчер. Действия – это пакеты данных, которые декларируют выполняемую операцию и связанные с ней данные. (Тесно связанные вызовы методов превращаются действиями в поток слабо связанных данных). Хранилища и их взаимозависимости обрабатываются через диспетчер слабо связанным образом. (Проектировщики структур могут заметить сходство со структурами Command and Chain of Responsibility, а системным инженерам это напомнит маршалинг и сериализацию).

Контроллеры-представления никогда не передают состояние приложения друг другу — прямо или косвенно. Они регистрируют свою заинтересованность в изменениях данных в хранилищах, а хранилища в случае изменений уведомляют представления о том, что им нужно забрать данные (и обновляют свое собственное управляемое состояние). Это единственный поток данных, входящий в эти представления. Этот односторонний поток данных показан на рисунке 6.

Рисунок 6. Односторонний поток данных Flux

Код примера example3 по своей конструкции приблизительно повторяет схему Flux – с реализацией макета единственного хранилища. Компонент регистрирует все изменения данных в MockSiteStatsStore . Уведомление от хранилища – единственный способ изменения управляемого состояния .

Любое интерактивное изменение данных, выполненное в , пропускается как действие через диспетчер/хранилище посредством вызова MockSiteStatsAction.update() . Несмотря на то, что два компонента соседствуют в том же пользовательском интерфейсе, они не обмениваются состояниями напрямую. Односторонний поток данных проходит от через диспетчер в заинтересованный компонент MockSiteStatsStore , а затем через уведомления об изменении возвращается в .

Подробный анализ структуры приложения Flux выходит за рамки настоящей статьи. Подробнее см. в разделе Ресурсы.

Доступные инструменты для работы с React

В веб-магазине Chrome есть полезное расширение для браузера Chrome React Developer Tools. Оно позволяет в процессе отладки просматривать иерархию компонентов React приложения – вместо менее наглядного DOM-представления браузера. На рисунке 7 показано, как выглядит иерархия компонентов example3 при установленном React Developer Tools.

Рисунок 7. Иерархия компонентов в React Developer Tools

В качестве дополнения для работы кодом React также предлагается профилировщик.

Будущее экосистемы React

На конференции React.js в январе 2015 года были анонсированы расширения Relay для Flux и React Native. На момент написания этой статьи ни одно из них не выпущено в виде ПО с открытым исходным кодом.

Relay

Relay дополняет Flux возможностью извлечения данных с сервера. Ключевая идея Relay – возможность для каждого компонента React самостоятельно указывать свои собственные требования по извлечению данных. Как правило, это относится к данным, используемым для визуализации самого компонента. Relay позволят статически объявлять требования компонента к данным в том же файле (JSX), где находится логика пользовательского интерфейса. Это значительно сокращает характерный беспорядок в файлах при работе со сложными, полноценными приложениями. Это также позволяет немедленно проверять корректность и синхронизацию в процессе разработки, перезагружая браузер после редактирования файла JSX.

В Relay применяется важная технология GraphQL – свободно компонуемый декларативный язык описания запросов произвольно оформленных данных. (Facebook уже пару лет использует GraphQL в промышленном режиме.) GraphQL позволяет высокоуровневым компонентам составлять требования своих собственных компонентов — независимо от содержания самих требований — и собирать комбинированный запрос к серверу.

Результаты GraphQL-запросов хранятся в хранилище Flux general common , где подписавшиеся представления уведомляются об обновлении данных.

React Native

React Native заменит DOM браузера для платформы Android или iOS. Это позволит разработчикам React оптимизировать свои приложения для мобильных устройств.

В React Native код JavaScript выполняется в своем системном потоке с применением собственного интерпретатора. С нативной платформой код React соединяет так называемый высокопроизводительный асинхронной пакетный мост — согласовывая нативные компоненты UI с конкретной реализацией пользовательского интерфейса. Можно также создавать специальные нативные методы для доступа JavaScript через этот мост. HTML-элементы в React заменяются нативными представлениями и UI-виджетами на мобильной платформе. React Native будет поддерживать стилизацию нативных компонентов через подмножество CSS поверх JavaScript.

По словам разработчиков, приложения, созданные с помощью React Native, смогут точно воспроизводить тонкие нюансы интерфейса, которые у пользователей ассоциируются только с нативными приложениями — существующие сегодня альтернативы на основе WebViews или HTML5 не могут этого обеспечить.

Заключение

При создании пользовательских интерфейсов для своих проектов JavaScript-разработчики могут выбирать платформы и библиотеки с открытым исходным кодом из огромного разнообразия. Но лишь немногие из них прошли испытания в сложных проектах, где требуется высокая производительность; еще меньше снабжены мощными инструментами поддержки и сопровождаются проверенными практическими рекомендациями по программированию и проектированию при гарантированной перспективе будущего роста, которая распространяется на операции с данными на сервере и разработку для мобильных устройств. React предлагает все это и многое другое – при ширящейся активной поддержке сообщества. Сегодня самый подходящий момент для того, чтобы добавить React к своему набору инструментов разработки.

Ресурсы для скачивания

  • этот контент в PDF
  • Исходный код примеров для этой статьи (wa-react-intro.zip | 7,97 КБ)

Похожие темы

  • Оригинал статьи: React: Create maintainable, high-performance UI components.
  • React: посетите официальный сайт React, чтобы получить последнюю версию библиотеки и прочесть документацию.
  • Создание анализатора на базе IBM Watson с помощью React: приведите React в действие с помощью этого сопутствующего руководства.
  • Flux: ознакомьтесь с Flux (и ожидаемым расширением Relay) — расширенной архитектурой разработки приложений, которая легко взаимодействует с компонентами React.
  • Инструменты интеграции: как использовать прекомпилированный JSX для повышения производительности при развертывании в промышленной среде.
  • SyntheticEvent : прочтите о реализации React SyntheticEvent и посмотрите, как события распространяются через компоненты React.
  • jquery-bootstrap : приступайте к интеграции React в существующие проекты. В этом примере от разработчиков React показано, как добавить React в свой собственный проект jQuery-Bootstrap. А тем, кто уже использует jQuery Mobile UI, этот пример поможет добавить поддержку React.
  • Пример React-рендеринга на сервере: воспользуйтесь преимуществом высокой производительности виртуальной DOM-модели React для визуализации своего сайта на стороне сервера. Этот подход сохраняет все преимущества SEO статических сайтов при развертывании технологии компонентов React. Это демонстрируется на примере PHP-кода для сервера.
  • React Profiler: профилируйте производительность своего кода React с помощью расширения-профилировщика.
  • Видеозаписи с конференции React.js: смотрите, как группа разработчиков React представляет Relay, React Native и другие сопутствующие технологии в экосистеме React.
  • React: возьмите исходный код React из хранилища GitHub.
  • Загрузите последние обновления кода примеров для этого руководства из репозитория автора.

Комментарии

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии или подписаться на них.

React урок 1 Основы

React — это open-source библиотека созданная в Facebook. Предлагает новый подход к созданию пользовательских интерфейсов на JavaScript. Ес ли вы знакомы с партерном MVC, то React это V. Другими словами он отвечает за визуализацию и это кажется немного странным, с одним только слоем представления далеко не уедешь . Но не переживайте мы рассмотрим не только React, как таковой, но и другие прикладные архитектуры, которые применяются вместе с ним для построения полноценных веб приложений .

В этой статье мы рассмотрим несколько тем с минимальным набором знаний необходимых, чтобы начать создавать приложения:

  • Что такое React и обзор его преимуществ;
  • Как использовать JSX – расширение синтаксиса JavaScript используется в React для описания компонентов;
  • Как создавать компоненты, что такое реквизиты ( props) и состояние ( state);

Прежде чем мы начнем

Для работы нам потребуется Node.js и NPM. NPM поставляется вместе с Node.js надо только скачать и установить его c официально сайта https://nodejs.org/en/ . На нем имеется две версии LTS и Current, в принципе нам подойдет любая из них.

Чтобы четко понимать что такое React, хочу предложить такой вариант:

React это библиотека для создания компонент но- ориентированных пользовательских интерфейсов с помощью JavaScript и (необязательно) XML.

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

Компоненты могут быть описаны на JavaScript, но это можно сделать и на ХМ L с Н TML подобным синтаксисом называемым JSX.

React мож но использовать для построения компонентов в браузере, так и на стороне сервера, то есть итоговый HTML будет формироваться не на клиенте, а на сервере, что позволяет строить, так называемые изоморфные приложения + позволяет избежать проблем с SEO присущих одно-страничным приложениям. Но и это еще не все, с помощью React можно создать нативные мобильные интерфейсы ( React Native ) .

Реактивный рендеринг

До появления Ajax на любое действие пользователя для отображения новых данных перезагружалась вся веб страница. Что было не слишком эффективным решением, когда требуется обновить только часть данных. С появлением Ajax можно было обновлять данные на странице частями. Появились так называемые одно-страничные приложения, когда загружалась только одна страница и все последующие запросы обрабатывались без полной перезагрузки страницы.

Поскольку интерфейсы становятся все более сложными, возрастает и сложность управления состоянием данных приложений. Многие библиотеки используют двухстороннею привязку данных к интерфейсу и манипулируют DOM деревом напрямую. Но такой подход проигрывает в плане скорости.

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

Компонент-ориентированная разработка

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

Гибкая абстракция модели документа

React имеет свое собственное представление пользовательского интерфейса, которое абстрагирует базовую модель документа. Наиболее заметным преимуществом этого подхода заключается в том, что она позволяет использовать те же принципы для визуализации HTML, так и например нативных пользовательских интерфейсов IOS и Andro >А еще это дает следующие преимущества:

События ведут себя в соответствии со стандартами образом во всех браузерах и устройствах;

Итоговый HTML React компонентов может быть построен на стороне сервера, что позволяет избежать проблем с SEO и строить изоморфные приложения;

Почему стоит использовать React JS при разработке приложений

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

Библиотека React была впервые выпущена компанией Facebook в 2013 году. Для того, чтобы понять, насколько популярной эта технология стала за прошедшее время, давайте обратимся к опросу разработчиков, проведенному сайтом StackOverflow в этом году. Более 50 000 разработчиков поделились информацией о своей работе и профессиональных предпочтениях. Помимо более или менее предсказуемых результатов, которые обрисовывают состоянии IT-индустрии на сегодняшний день, есть также и кое-что любопытное относительно непосредственно React. Эта библиотека стала одной из самых любимых и востребованных технологий, а также самой трендовой технологией на StackOverflow:

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

Что такое React JS. Краткий обзор

React это библиотека для создания пользовательских интерфейсов. Одной из ее отличительных особенностей является возможность использовать JSX, язык программирования с близким к HTML синтаксисом, который компилируется в JavaScript. Разработчики могут добиваться высокой производительности приложений с помощью Virtual DOM. C React вы можете создавать изоморфные приложения, которые помогут вам избавиться от неприятной ситуации, когда пользователь с нетерпением ожидает, когда же наконец завершится загрузка данных и на экране его компьютера наконец появится что-то помимо анимации загрузки. Созданные компоненты могут быть с легкостью изменены и использованы заново в новых проектах. Высокий процент переиспользования кода повышает покрываемость тестами, что, в свою очередь, приводит к более высокому уровню контроля качества. Используя React Native мобильные приложения для Android и iOS, используя опыт JavaScript и React разработки.

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

Какую пользу из React может извлечь заказчик?
Итак, давайте разбираться:

  • Virtual DOM может повысить производительность высоконагруженных приложений, что может снизить вероятность возникновения возможных неудобств и улучшает пользовательский опыт;
  • Использование изоморфного подхода помогает производить рендеринг страниц быстрее, тем самым позволяя пользователям чувствовать себя более комфортно во время работы с вашим приложением. Поисковые системы индексируют такие страницы лучше. Поскольку один и тот же код может быть использован как в клиентской, так и в серверной части приложения, нет необходимости в дублировании одного и того же функционала. В результате время разработки и затраты снижаются;
  • Благодаря переиспользованию кода стало гораздо проще создавать мобильные приложения. Код, который был написан во время создания сайта, может быть снова использован для создания мобильного приложения. Если вы планируете использовать не только сайт, но и мобильное приложение, нет необходимости нанимать две большие команды разработчиков.

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

  1. Улучшения пользовательского опыта ваших сайтов и приложений
  2. Увеличения скорости разработки
  3. Использования наиболее трендовых технологий разработки

Изоморфные приложения. Поймать двух зайцев

Когда мы говорим об изоморфных приложениях или об изоморфном JavaScript, мы имеем в виду, что мы можем использовать один и тот же код как в серверной, так и в клиентской части приложения. Когда пользователь открывает сайт в своем браузере, содержимое страницы должно быть загружено с сервера. В случае с SPA-приложениями (Single Page Application), это может занять некоторое время. Во время загрузки пользователи видят либо пустую страницу, либо анимацию загрузки. Учитывая, что по современным стандартам ожидание в течение более чем двух секунд может быть весьма заметным неудобством для пользователя, сокращение времени загрузки может оказаться крайне важным. А вот еще одна весомая проблема: поисковые машины не индексируют такие страницы так хорошо, как нам хотелось бы. Исполнение JavaScript кода на стороне сервера помогает исправить подобные проблемы. Если вы создаете изоморфные приложения, вы можете извлечь заметную выгоду, производя рендеринг на стороне сервера. После загрузки страницы вы все еще можете продолжать рендеринг компонентов. Такая возможность рендеринга страниц как на сервере, так и на клиенте приводит к заметным преимуществам, таким как возможность лучшего индексирования страниц поисковыми машинами и улучшение пользовательского опыта. Более того, такой подход позволяет снизить время, затрачиваемое на разработку. При использовании некоторых современных фреймворков, вы должны создавать компоненты, которые должны рендериться на стороне сервера, а также шаблоны для клиентской стороны приложения. React разработчики могут создавать компоненты, которые работают на обеих сторонах.

Virtual DOM. Просто потому, что так быстрее

Document Object Model, или DOM, — это способ представления и взаимодействия с объектами в HTML, XHTML и XML документах. Согласно этой модели, каждый такой документ представляет собой иерархическое дерево элементов, называемое DOM-деревом. Используя специальные методы, мы можем получит доступ к определенным элементам нашего документа и изменять их так, как мы хотим. Когда мы создаем динамичную интерактивную веб-страницу, мы хотим, чтобы DOM обновлялся так быстро, как это возможно после изменения состояния определенного элемента. Для данной задачи некоторые фреймворки используют прием, который называется «dirty checking» и заключается в регулярном опросе состояния документа и проверке изменений в структуре данных. Как вы можете догадаться, подобная задача может стать самой настоящей головной болью в случае высоконагруженных приложений. Virtual DOM, в свою очередь, хранится в памяти. Именно поэтому в момент, когда «настоящий» DOM меняется, React может изменять Virtual DOM в мгновение ока. React «собирает» такие изменения сравнивает их с состоянием DOM, а затем перерисовывает изменившиеся компоненты.

При данном подходе вы не производите регулярное обновление DOM. Именно поэтому может быть достигнута более высокая производительность React приложений. Второе следствие вытекает из изоморфной природы React: вы можете производить рендеринг на стороне сервера совсем как на стороне клиента.

Как переиспользование кода помогает разрабатывать и тестировать приложения более эффективно

Мобильные приложения имеют некоторые преимущества по сравнению с сайтами. Их можно использовать без соединения с Интернетом. Они имеют доступ к таким возможностям устройства, как всплывающие уведомления. Также они позволяют быть в контакте с вашими пользователями в режиме 24/7. React Native — это фреймворк, который позволяет вам создавать мобильные приложения, используя React. Логика приложения пишется на JavaScript, таким образом, программисту не нужно отказываться от привычных приемов веб-разработчика. Все что нужно — научиться писать специфичный для устройства код, который адаптирует компоненты, ранее созданные для веб-сайта к новой среде обитания.

Если мы сравним затраты на разработку разных видов мобильных приложений, мы получим примерно следующие результаты:

  • В случае с нативными приложениями вы можете надеяться на довольно высокую производительность, но стоимость разработки будет довольно высокой;
  • Если вы предпочтете фреймворки, которые позволяют использовать HTML5, CSS3 и JavaScript, например PhoneGap, вы можете снизить стоимость. Но в этом случае уровень производиетльности будет гораздо ниже;
  • В случае React вы можете достигнуть уровня производительности, сравнимого с нативными приложениями. При этом стоимость разработки сравнима с предыдущим примером.

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

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

Заключение

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

Топ-пост этого месяца:  Тенденции веб-дизайна-2020
Добавить комментарий