React (также известный как React.js или ReactJS ) — это бесплатная и открытая библиотека JavaScript [4] [5] для создания пользовательских интерфейсов на основе компонентов от Facebook Inc. Она поддерживается Meta (ранее Facebook) и сообществом отдельных разработчиков и компаний. [6] [7] [8]
React можно использовать для разработки одностраничных , мобильных или серверных приложений с использованием фреймворков вроде Next.js. Поскольку React занимается только пользовательским интерфейсом и отображением компонентов в DOM , приложения React часто полагаются на библиотеки для маршрутизации и других клиентских функций. [9] [10] Ключевым преимуществом React является то, что он перерисовывает только те части страницы, которые изменились, избегая ненужной перерисовки неизмененных элементов DOM. Впервые он был запущен 29 мая 2013 года. [11]
[12] React придерживается парадигмы декларативного программирования . [13] : 76 разработчиков проектируют представления для каждого состояния приложения, а React обновляет и отображает компоненты при изменении данных. Это контрастирует с императивным программированием . [14]
Код React состоит из сущностей, называемых компонентами . [13] : 10–12 Эти компоненты являются модульными и могут использоваться повторно. [13] : 70 Приложения React обычно состоят из многих слоев компонентов. Компоненты визуализируются в корневом элементе DOM с помощью библиотеки React DOM. При визуализации компонента значения передаются между компонентами через props (сокращение от «properties») . Значения, внутренние для компонента, называются его состоянием. [15]
Два основных способа объявления компонентов в React — это компоненты-функции и компоненты-классы. [13] : 118 [16] : 10
Компоненты функций объявляются с помощью функции (используя синтаксис функций JavaScript или выражение стрелочной функции ), которая принимает один аргумент "props" и возвращает JSX. Начиная с React v16.8, компоненты функций могут использовать состояние с useStateхуком.
16 февраля 2019 года React 16.8 был выпущен для широкой публики, представив React Hooks. [17] Хуки — это функции, которые позволяют разработчикам «подключаться» к состоянию React и функциям жизненного цикла из компонентов функций. [18] Примечательно, что хуки не работают внутри классов — они позволяют разработчикам использовать больше функций React без классов. [19]
React предоставляет несколько встроенных хуков, таких как useState, [20] [16] : 37 useContext , [13] : 11 [21] [16] : 12 useReducer , [13] : 92 [21] [16] : 65–66 useMemo [13] : 154 [21] [16] : 162 и useEffect. [22] [16] : 93–95 Другие описаны в Справочнике API хуков. [23] [13] : 62 useState и useEffect, которые используются чаще всего, предназначены для управления состоянием [13] : 37 и побочными эффектами [13] : 61 соответственно.
Существует два правила хуков [24] , которые описывают характерные шаблоны кода, на которые опираются хуки:
Хотя эти правила не могут быть реализованы во время выполнения, инструменты анализа кода, такие как линтеры, могут быть настроены для обнаружения множества ошибок во время разработки. Правила применяются как к использованию хуков, так и к реализации пользовательских хуков, [25] которые могут вызывать другие хуки.
Компоненты сервера React (RSC) [26] — это функциональные компоненты, которые работают исключительно на сервере. Эта концепция была впервые представлена в докладе «Извлечение данных с помощью серверных компонентов». [27] Хотя концепция похожа на рендеринг на стороне сервера, RSC не отправляют соответствующий JavaScript клиенту, поскольку гидратации не происходит. В результате у них нет доступа к хукам. Однако они могут быть асинхронными функциями , что позволяет им напрямую выполнять асинхронные операции:
асинхронная функция MyComponent () { const message = await fetchMessageFromDb (); возвращаться ( < div > Сообщение : { message }</ div > );}В настоящее время серверные компоненты наиболее удобны для использования с Next.js.
Компоненты класса объявляются с использованием классов ES6 . Они ведут себя так же, как компоненты-функции, но вместо использования хуков для управления состоянием и событиями жизненного цикла они используют методы жизненного цикла базового React.Component класса .
класс ParentComponent расширяет React.Component { состояние = { цвет : 'зеленый' }; оказывать () { возвращаться ( < ChildComponent color = { this.state.color } / > ); }}Появление React Hooks в React 16.8 в феврале 2019 года позволило разработчикам управлять состоянием и поведением жизненного цикла в функциональных компонентах, снижая зависимость от компонентов класса.
Эта тенденция соответствует более широкому движению отрасли к функциональному программированию и модульному дизайну. Поскольку React продолжает развиваться, разработчикам важно учитывать преимущества функциональных компонентов и React Hooks при создании новых приложений или рефакторинге существующих. [28]
Сам React не имеет встроенной поддержки маршрутизации . React — это в первую очередь библиотека для создания пользовательских интерфейсов, и она не включает в себя полноценное решение маршрутизации из коробки. Для обработки маршрутизации в приложениях React можно использовать сторонние библиотеки. [29] Это позволяет разработчику определять маршруты, управлять навигацией и обрабатывать изменения URL-адресов в дружественном к React способе.
Еще одной примечательной особенностью является использование виртуальной модели объекта документа , или Virtual DOM . React создает кэш структуры данных в памяти , вычисляет полученные различия, а затем эффективно обновляет отображаемый DOM браузера. [30] Этот процесс называется согласованием . Это позволяет программисту писать код так, как будто вся страница отображается при каждом изменении, в то время как React отображает только те компоненты, которые действительно изменяются. Этот выборочный рендеринг обеспечивает значительный прирост производительности. [31]
Когда ReactDOM.render[32] вызывается снова для того же компонента и цели, React представляет новое состояние пользовательского интерфейса в Virtual DOM и определяет, какие части (если таковые имеются) активного DOM необходимо изменить. [33]
Методы жизненного цикла для компонентов на основе классов используют форму подключения , которая позволяет выполнять код в заданных точках в течение жизненного цикла компонента.
ShouldComponentUpdateпозволяет разработчику предотвратить ненужную повторную отрисовку компонента, возвращая false, если отрисовка не требуется.componentDidMountвызывается после того, как компонент «смонтирован» (компонент создан в пользовательском интерфейсе, часто путем связывания его с узлом DOM ). Обычно это используется для запуска загрузки данных из удаленного источника через API .componentDidUpdateвызывается сразу после обновления. [34]componentWillUnmountвызывается непосредственно перед тем, как компонент будет снесен или "размонтирован". Обычно это используется для очистки ресурсоемких зависимостей компонента, которые не будут просто удалены при размонтировании компонента (например, удаление любых setInterval()экземпляров, связанных с компонентом, или " eventListener ", установленного на "документе" из-за наличия компонента)renderявляется наиболее важным методом жизненного цикла и единственным обязательным в любом компоненте. Обычно он вызывается каждый раз, когда обновляется состояние компонента, что должно отражаться в пользовательском интерфейсе.JSX , или JavaScript XML, является расширением синтаксиса языка JavaScript. [35] Похожий по внешнему виду на HTML, [13] : 11 JSX предоставляет способ структурировать рендеринг компонентов с использованием синтаксиса, знакомого [13] : 15 многим разработчикам. Компоненты React обычно пишутся с использованием JSX, хотя это не обязательно (компоненты также могут быть написаны на чистом JavaScript). JSX похож на другой синтаксис расширения, созданный Facebook для PHP, который называется XHP .
Пример кода JSX:
class App extends React.Component { render ( ) { return ( <div> <p> Заголовок </p> <p> Содержимое </p> <p> Нижний колонтитул </p> </div> ) ; } } Базовая архитектура React применяется не только для рендеринга HTML в браузере. Например, Facebook имеет динамические диаграммы, которые рендерятся по <canvas>тегам, [36] а Netflix и PayPal используют универсальную загрузку для рендеринга идентичного HTML как на сервере, так и на клиенте. [37] [38]
Рендеринг на стороне сервера (SSR) относится к процессу рендеринга клиентского приложения JavaScript на сервере, а не в браузере. Это может улучшить производительность приложения, особенно для пользователей с более медленными соединениями или устройствами.
С SSR исходный HTML, отправляемый клиенту, включает полностью отрисованный UI приложения. Это позволяет браузеру клиента отображать UI немедленно, а не ждать загрузки и выполнения JavaScript перед отрисовкой UI.
React поддерживает SSR, что позволяет разработчикам отображать компоненты React на сервере и отправлять полученный HTML клиенту. Это может быть полезно для повышения производительности приложения, а также для целей поисковой оптимизации .
React не пытается предоставить полную библиотеку приложений. Он разработан специально для создания пользовательских интерфейсов [4] и поэтому не включает в себя многие инструменты, которые некоторые разработчики могут посчитать необходимыми для создания приложения. Это позволяет разработчику выбирать библиотеки, которые он предпочитает для выполнения таких задач, как сетевой доступ или локальное хранение данных. По мере развития библиотеки появились общие шаблоны использования.
Для поддержки концепции однонаправленного потока данных React (которую можно противопоставить двунаправленному потоку AngularJS ) была разработана архитектура Flux как альтернатива популярной архитектуре модель–представление–контроллер . Flux включает действия , которые отправляются через центральный диспетчер в хранилище , а изменения в хранилище распространяются обратно в представление. [39] При использовании с React это распространение осуществляется через свойства компонентов. С момента своего замысла Flux был заменен такими библиотеками, как Redux и MobX. [40]
Поток можно считать вариантом модели наблюдателя . [41]
Компонент React в архитектуре Flux не должен напрямую изменять какие-либо переданные ему props, но должен передавать функции обратного вызова , которые создают действия , отправляемые диспетчером для изменения хранилища. Действие — это объект, обязанность которого — описывать то, что произошло: например, действие, описывающее одного пользователя, «следующего» за другим, может содержать идентификатор пользователя, идентификатор целевого пользователя и тип USER_FOLLOWED_ANOTHER_USER. [42] Хранилища, которые можно рассматривать как модели, могут изменять себя в ответ на действия, полученные от диспетчера.
Этот шаблон иногда выражается как «свойства текут вниз, действия текут вверх». С момента его создания было создано множество реализаций Flux, возможно, наиболее известной из которых является Redux , в котором есть единое хранилище, часто называемое единым источником истины . [43]
В феврале 2019 года useReducerбыл представлен как React hook в выпуске 16.8. Он предоставляет API, который согласуется с Redux, позволяя разработчикам создавать хранилища, подобные Redux, которые являются локальными для состояний компонентов. [44]
Статус проекта можно отслеживать на форуме обсуждения основной команды. [45] Однако основные изменения в React проходят через репозиторий Future of React и запросы на извлечение . [46] [47] Это позволяет сообществу React предоставлять отзывы о новых потенциальных функциях, экспериментальных API и улучшениях синтаксиса JavaScript.
React был создан Джорданом Уолком, инженером-программистом из Meta , который изначально разработал прототип под названием «F-Bolt» [48], а затем переименовал его в «FaxJS». Эта ранняя версия задокументирована в репозитории GitHub Джордана Уолка. [1] На проект оказали влияние XHP , библиотека HTML- компонентов для PHP .
React был впервые развернут в новостной ленте Facebook в 2011 году и впоследствии интегрирован в Instagram в 2012 году [ требуется ссылка ] . В мае 2013 года на JSConf US проект был официально открыт с открытым исходным кодом, что стало важным поворотным моментом в его принятии и росте. [2]
React Native , который позволяет разрабатывать собственные приложения для Android , iOS и UWP с помощью React, был анонсирован на конференции React Conf в Facebook в феврале 2015 года и открыт для доступа в марте 2015 года.
18 апреля 2017 года Facebook анонсировала React Fiber, новый набор внутренних алгоритмов для рендеринга, в отличие от старого алгоритма рендеринга React, Stack. [49] React Fiber должен был стать основой для любых будущих улучшений и разработки функций библиотеки React. [50] [ требуется обновление ] Фактический синтаксис для программирования с React не меняется; изменился только способ выполнения синтаксиса. [51] Старая система рендеринга React, Stack, была разработана в то время, когда не было понимания фокуса системы на динамических изменениях. Stack медленно отрисовывал сложную анимацию, например, пытаясь выполнить все это за один отрезок. Fiber разбивает анимацию на сегменты, которые можно распределить по нескольким кадрам. Аналогично, структуру страницы можно разбить на сегменты, которые можно поддерживать и обновлять отдельно. Функции JavaScript и виртуальные объекты DOM называются «волокнами», и каждое из них можно использовать и обновлять отдельно, что обеспечивает более плавный рендеринг на экране. [52]
26 сентября 2017 года React 16.0 был выпущен для публики. [53]
10 августа 2020 года команда React анонсировала первый релиз-кандидат для React v17.0, примечательный как первый крупный релиз без существенных изменений в API React, ориентированном на разработчиков. [54]
29 марта 2022 года был выпущен React 18, в котором был представлен новый параллельный рендерер, автоматическое пакетирование и поддержка рендеринга на стороне сервера с помощью Suspense. [55]
Первоначальный публичный релиз React в мае 2013 года использовал Apache License 2.0 . В октябре 2014 года React 0.12.00 заменил ее на лицензию BSD из 3 пунктов и добавил отдельный текстовый файл PATENTS, который разрешает использование любых патентов Facebook, связанных с программным обеспечением: [56]
Лицензия, предоставленная по настоящему Соглашению, будет автоматически и без уведомления прекращена для любого лица, которое предъявит иск (включая подачу иска, заявления или иного иска), утверждающий (a) прямое, косвенное или косвенное нарушение или побуждение к нарушению любого патента: (i) со стороны Facebook или любой из ее дочерних компаний или филиалов, независимо от того, связано ли такое требование с Программным обеспечением, (ii) любой стороны, если такое требование возникает полностью или частично из любого программного обеспечения, продукта или услуги Facebook или любой из ее дочерних компаний или филиалов, независимо от того, связано ли такое требование с Программным обеспечением, или (iii) любой стороны, связанной с Программным обеспечением; или (b) что любое право в любой патентной претензии Facebook является недействительным или неисполнимым.
Этот нетрадиционный пункт вызвал некоторые противоречия и дебаты в сообществе пользователей React, поскольку его можно было бы интерпретировать как наделение Facebook полномочиями отзывать лицензию во многих сценариях, например, если Facebook подаст в суд на лицензиата, побуждая его предпринять «другие действия», опубликовав действие в блоге или в другом месте. Многие выразили опасения, что Facebook может несправедливо использовать пункт о прекращении или что интеграция React в продукт может усложнить будущее приобретение стартап-компании. [57]
На основе отзывов сообщества Facebook обновил условия выдачи патента в апреле 2015 года, сделав их менее двусмысленными и более разрешительными: [58]
Лицензия, предоставленная по настоящему Соглашению, будет автоматически и без уведомления прекращена, если вы (или любая из ваших дочерних компаний, корпоративных филиалов или агентов) инициируете прямо или косвенно или принимаете прямую финансовую заинтересованность в любой Патентной претензии: (i) против Facebook или любой из ее дочерних компаний или корпоративных филиалов, (ii) против любой стороны, если такая Патентная претензия возникает полностью или частично из любого программного обеспечения, технологии, продукта или услуги Facebook или любой из ее дочерних компаний или корпоративных филиалов, или (iii) против любой стороны, связанной с Программным обеспечением. [...] «Патентная претензия» — это любой судебный иск или иное действие, утверждающее прямое, косвенное или косвенное нарушение или побуждение к нарушению любого патента, включая перекрестный иск или встречный иск. [59]
Apache Software Foundation посчитала это лицензионное соглашение несовместимым с ее политикой лицензирования, поскольку оно «переносит риск на последующих потребителей нашего программного обеспечения, несбалансированно в пользу лицензиара, а не лицензиата, тем самым нарушая нашу юридическую политику Apache как универсального донора», и «не являются подмножеством тех, которые содержатся в [Apache License 2.0], и они не могут быть сублицензированы как [Apache License 2.0]». [60] В августе 2017 года Facebook отклонил последующие опасения Apache Foundation и отказался пересматривать свою лицензию. [61] [62] В следующем месяце WordPress решила переключить свои проекты Gutenberg и Calypso с React. [63]
23 сентября 2017 года Facebook объявила, что на следующей неделе она повторно лицензирует Flow, Jest, React и Immutable.js в соответствии со стандартной лицензией MIT ; компания заявила, что React является «основой широкой экосистемы программного обеспечения с открытым исходным кодом для Интернета», и что они не хотят «сдерживать прогресс по нетехническим причинам». [64]
26 сентября 2017 года React 16.0.0 был выпущен с лицензией MIT. [65] Изменение лицензии MIT также было перенесено в линейку релизов 15.x с React 15.6.2. [66]
.svg/1280px-Free_and_open-source_software_logo_(2009).svg.png){kind=logo}
{{cite web}}: Отсутствует или пусто |title=( помощь )