В настоящее время пользователи ожидают гладкие, эффективные веб-приложения, которые ведут себя все больше и больше как нативные приложения. Были разработаны методы, позволяющие сократить время ожидания загрузки веб-сайта при первом посещении пользователя. Однако в веб-приложениях, которые обеспечивают большую интерактивность, также важно время, которое проходит между действием пользователя и реакцией приложения. Родные приложения чувствуют себя быстрыми, и ожидается, что веб-приложения будут вести себя одинаково даже при не идеальных интернет-соединениях.
Появился ряд современных JavaScript-фреймворков, которые могут быть очень эффективными для решения этой проблемы. React можно смело считать одной из самых популярных и надежных библиотек JavaScript, которые можно использовать для создания быстрых интерактивных пользовательских интерфейсов для веб-приложений.
В этой статье я расскажу о том, в чем хорош React и что заставляет его работать, что должно предоставить вам некоторый контекст, чтобы помочь вам решить, подойдет ли эта библиотека для вашего следующего проекта.
Что такое реакция?
React — это создание Facebook, которое просто помечает себя как библиотеку JavaScript для создания пользовательских интерфейсов
.
Это проект с открытым исходным кодом, который на сегодняшний день набрал более 74 000 звезд на GitHub.
Реагировать это:
- Декларативный : вам нужно только разработать простые представления для каждого состояния в вашем приложении , и React будет эффективно обновлять и отображать только нужные компоненты при изменении ваших данных.
- На основе компонентов : вы создаете свои приложения на основе React, собирая несколько инкапсулированных компонентов, каждый из которых управляет своим собственным состоянием.
- Учись один раз, пиши где угодно : React — это не полноценный фреймворк; это просто библиотека для рендеринга представлений.
Как работает Virtual DOM?
Виртуальный DOM лежит в основе того, что делает React быстрым при рендеринге элементов пользовательского интерфейса и их изменениях. Давайте посмотрим ближе на его механизм.
Объектная модель документа HTML или DOM является
интерфейс программирования для документов HTML и XML. … DOM обеспечивает представление документа в виде структурированной группы узлов и объектов, которые имеют свойства и методы. По сути, он соединяет веб-страницы со скриптами или языками программирования. — MDN
Всякий раз, когда вы хотите программно изменить любую часть веб-страницы, вам необходимо изменить DOM. В зависимости от сложности и размера документа, обход DOM и его обновление может занять больше времени, чем пользователи могут принять, особенно если учесть работу, которую должны выполнять браузеры, когда что-то в DOM меняется. Фактически, каждый раз, когда DOM обновляется, браузеры должны пересчитывать CSS и выполнять операции макета и перерисовки на веб-странице.
React позволяет разработчикам вносить изменения в веб-страницу, не имея непосредственного отношения к DOM. Это делается через Virtual DOM .
Virtual DOM — это легкая, абстрактная модель DOM. React использует метод render
Каждый раз, когда в приложении React происходят изменения в базовых данных, React создает новое представление пользовательского интерфейса Virtual DOM.
Обновление изменений пользовательского интерфейса с помощью Virtual DOM
Когда дело доходит до обновления DOM браузера, React примерно выполняет следующие шаги:
- Всякий раз, когда что-то меняется, React повторно отображает весь пользовательский интерфейс в представлении Virtual DOM.
- Затем React вычисляет разницу между предыдущим представлением Virtual DOM и новым.
- Наконец, React исправляет реальный DOM с тем, что на самом деле изменилось. Если ничего не изменилось, React вообще не будет иметь дело с HTML DOM.
Можно было бы подумать, что такой процесс, который включает в себя хранение двух представлений Виртуального DOM в памяти и сравнение их, может быть медленнее, чем непосредственное обращение к реальному DOM. Именно здесь эффективные алгоритмы сравнения, пакетные операции чтения / записи DOM и ограничение изменений DOM до необходимого минимума делают использование React и его Virtual DOM отличным выбором для создания эффективных приложений.
React хорош для каждого проекта?
Как следует из названия, React отлично подходит для создания сверхреактивных пользовательских интерфейсов, то есть пользовательских интерфейсов, которые очень быстро реагируют на события и последующие изменения данных. Этот комментарий о названии React, сделанном Джорданом Уолке , инженером Facebook, освещает:
Этот API реагирует на любые изменения состояния или свойства и работает с данными любой формы (такими же глубоко структурированными, как и сам график), поэтому я думаю, что название подходит. — Vjeux, « Наши первые 50 000 звезд »
Хотя некоторые утверждают, что React нужен всем проектам , я думаю, что неоспоримо утверждать, что React идеально подходит для веб-приложений, в которых необходимо синхронизировать сложный интерактивный интерфейс пользователя с частыми изменениями в базовой модели данных.
React предназначен для эффективной работы с компонентами с отслеживанием состояния (что не означает, что разработчикам не нужно оптимизировать свой код). Таким образом, проекты, которые выиграют от этой возможности, могут считаться хорошими кандидатами на React.
Крис Койер обрисовывает в общих чертах следующие взаимосвязанные ситуации, связанные с достижением React , с которыми я склонен согласиться:
- Много государственного управления и манипулирования DOM . То есть включение и отключение кнопок, активация ссылок, изменение значений ввода, закрытие и расширение меню и т. Д. В этом типе проектов React делает управление компонентами с сохранением состояния быстрее и проще. Как метко написал Майкл Джексон , соавтор React Router, в твиттере :
Дело в том, что React позаботится о том, чтобы понять, какие изменения действительно должны произойти с DOM, а не со мной. Это * бесценно *
- Боевые спагетти . Отслеживание сложного состояния путем непосредственной модификации DOM может привести к появлению спагетти-кода, по крайней мере, если дополнительное внимание не уделяется организации и структуре кода.
Ресурсы
Если вам интересно, как работает React и его Virtual DOM, вот где вы можете узнать больше:
- Узнайте React с помощью всеобъемлющего центра React SitePoint.
- Реагируйте на видео от инженеров Facebook
- « Реальные преимущества виртуального DOM в React.js », Крис Минник
- « Разница между виртуальным DOM и DOM », Бартош Крайка
- « Реагируйте медленно, реагируйте быстро: на практике оптимизируйте приложения React », Франсуа Занинотто
- « Как правильно выбрать клиентскую среду для вашей компании », Крис Лиенерт
Вывод
React и другие подобные библиотеки JavaScript облегчают разработку быстрых, управляемых событиями пользовательских интерфейсов, которые быстро реагируют на изменения состояния. Одна основная цель может быть определена в стремлении преодолеть разрыв между веб-приложениями и нативными приложениями: пользователи ожидают, что веб-приложения будут чувствовать себя гладкими и плавными, как нативные приложения.
Это направление, в котором движется современная веб-разработка. Не случайно, что последнее обновление Create React App , проекта, позволяющего создавать приложения React с нулевой конфигурацией, по умолчанию включает функциональность создания прогрессивных веб-приложений (PWA) . Это приложения, которые используют сервисных работников и кэширование в автономном режиме, чтобы минимизировать задержки и заставить веб-приложения работать в автономном режиме.
Мы объединились с Open SourceCraft, чтобы предложить вам 6 профессиональных советов от разработчиков React . Для более открытого контента, проверьте Open SourceCraft .