Реакция (программное обеспечение)
Библиотека JavaScript для создания пользовательских интерфейсов
Реагировать
Оригинальный автор(ы)Джордан Уолк
Разработчик(и)Мета и сообщество
Первоначальный выпуск29 мая 2013 г. ; 11 лет назад [1] [2] ( 2013-05-29 )
Стабильный релиз(ы)
19.0.0 [3]  / 5 декабря 2024 г. ; 55 дней назад ( 5 декабря 2024 г. )
Предварительный просмотр релиза(ов)
19.0.0-rc.1 / 14 ноября 2024 г. ; 2 месяца назад [4] ( 2024-11-14 )
Репозиторий
  • github.com/facebook/реакция
Написано вJavaScript
ПлатформаВеб-платформа
ТипБиблиотека JavaScript
ЛицензияЛицензия Массачусетского технологического института
Веб-сайтреагировать.dev 

React (также известный как React.js или ReactJS ) — это бесплатная и открытая библиотека JavaScript для фронтенда [5] [6] , которая направлена ​​на то, чтобы сделать создание пользовательских интерфейсов на основе компонентов более «бесшовным». [5] Она поддерживается Meta (ранее Facebook) и сообществом отдельных разработчиков и компаний. [7] [8] [9]

React можно использовать для разработки одностраничных , мобильных или серверных приложений с использованием таких фреймворков, как Next.js и Remix [a] . Поскольку React занимается только пользовательским интерфейсом и отображением компонентов в DOM , приложения React часто полагаются на библиотеки для маршрутизации и других клиентских функций. [11] [12] Ключевым преимуществом React является то, что он повторно отображает только те части страницы, которые были изменены, избегая ненужной повторной визуализации неизмененных элементов DOM.

Примечательные особенности

Декларативный

[13] React придерживается парадигмы декларативного программирования . [14] : 76  разработчиков проектируют представления для каждого состояния приложения, а React обновляет и отображает компоненты при изменении данных. Это контрастирует с императивным программированием . [15]

Компоненты

Код React состоит из сущностей, называемых компонентами . [14] : 10–12  Эти компоненты являются модульными и могут использоваться повторно. [14] : 70  Приложения React обычно состоят из многих слоев компонентов. Компоненты визуализируются в корневом элементе DOM с помощью библиотеки React DOM. При визуализации компонента значения передаются между компонентами через props (сокращение от «properties») . Значения, внутренние для компонента, называются его состоянием. [16]

Два основных способа объявления компонентов в React — это компоненты-функции и компоненты-классы. [14] : 118  [17] : 10 

Компоненты функции

Компоненты функций объявляются с помощью функции (используя синтаксис функций JavaScript или выражение стрелочной функции ), которая принимает один аргумент "props" и возвращает JSX. Начиная с React v16.8, компоненты функций могут использовать состояние с useStateхуком.

Реакция Хуков

16 февраля 2019 года React 16.8 был выпущен для широкой публики, представив React Hooks. [18] Хуки — это функции, которые позволяют разработчикам «подключаться» к состоянию React и функциям жизненного цикла из компонентов функций. [19] Примечательно, что хуки не работают внутри классов — они позволяют разработчикам использовать больше функций React без классов. [20]

React предоставляет несколько встроенных хуков, таких как useState, [21] [17] : 37  useContext , [14] : 11  [22] [17] : 12  useReducer , [14] : 92  [22] [17] : 65–66  useMemo [14] : 154  [22] [17] : 162  и useEffect. [23] [17] : 93–95  Другие описаны в Справочнике API хуков. [24] [14] : 62  useState и useEffect, которые используются чаще всего, предназначены для управления состоянием [14] : 37  и побочными эффектами [14] : 61  соответственно.

Правила крючков

Существует два правила хуков [25] , которые описывают характерные шаблоны кода, на которые опираются хуки:

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

Хотя эти правила не могут быть реализованы во время выполнения, инструменты анализа кода, такие как линтеры, могут быть настроены для обнаружения множества ошибок во время разработки. Правила применяются как к использованию хуков, так и к реализации пользовательских хуков, [26] которые могут вызывать другие хуки.

Компоненты сервера

Компоненты сервера React (RSC) [27] — это функциональные компоненты, которые работают исключительно на сервере. Эта концепция была впервые представлена ​​в докладе «Извлечение данных с помощью серверных компонентов». [28] Хотя концепция похожа на рендеринг на стороне сервера, 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 при создании новых приложений или рефакторинге существующих. [29]

Маршрутизация

Сам React не имеет встроенной поддержки маршрутизации . React — это в первую очередь библиотека для создания пользовательских интерфейсов, и она не включает в себя полноценное решение маршрутизации из коробки. Для обработки маршрутизации в приложениях React можно использовать сторонние библиотеки. [30] Это позволяет разработчику определять маршруты, управлять навигацией и обрабатывать изменения URL-адресов в дружественном к React способе.

Существует виртуальный DOM, который используется для реализации реального DOM.

Виртуальный ДОМ

Еще одной примечательной особенностью является использование виртуальной модели объекта документа , или Virtual DOM . React создает кэш структуры данных в памяти , вычисляет полученные различия, а затем эффективно обновляет отображаемый DOM браузера. [31] Этот процесс называется согласованием . Это позволяет программисту писать код так, как будто вся страница отображается при каждом изменении, в то время как React отображает только те компоненты, которые действительно изменяются. Этот выборочный рендеринг обеспечивает значительный прирост производительности. [32] [33]

Обновления

Когда ReactDOM.render[34] вызывается снова для того же компонента и цели, React представляет новое состояние пользовательского интерфейса в Virtual DOM и определяет, какие части (если таковые имеются) активного DOM необходимо изменить. [35]

Обновления realDOM подлежат virtualDOM
VirtualDOM обновит realDOM в режиме реального времени без особых усилий.

Методы жизненного цикла

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

  • ShouldComponentUpdateпозволяет разработчику предотвратить ненужную повторную отрисовку компонента, возвращая false, если отрисовка не требуется.
  • componentDidMountвызывается после того, как компонент «смонтирован» (компонент создан в пользовательском интерфейсе, часто путем связывания его с узлом DOM ). Обычно это используется для запуска загрузки данных из удаленного источника через API .
  • componentDidUpdateвызывается сразу после обновления. [36]
  • componentWillUnmountвызывается непосредственно перед тем, как компонент будет снесен или "размонтирован". Обычно это используется для очистки ресурсоемких зависимостей компонента, которые не будут просто удалены при размонтировании компонента (например, удаление любых setInterval()экземпляров, связанных с компонентом, или " eventListener ", установленного на "документе" из-за наличия компонента)
  • renderявляется наиболее важным методом жизненного цикла и единственным обязательным в любом компоненте. Обычно он вызывается каждый раз, когда обновляется состояние компонента, что должно отражаться в пользовательском интерфейсе.

JSX

JSX , или JavaScript XML, является расширением синтаксиса языка JavaScript. [37] Похожий по внешнему виду на HTML, [14] : 11  JSX предоставляет способ структурирования рендеринга компонентов с использованием синтаксиса, знакомого [14] : 15  многим разработчикам. Компоненты React обычно пишутся с использованием JSX, хотя это не обязательно (компоненты также могут быть написаны на чистом JavaScript). JSX похож на другой синтаксис расширения, созданный Facebook для PHP, который называется XHP .

Пример кода JSX:

class App extends React.Component { render ( ) { return ( <div> <p> Заголовок </p> <p> Содержимое </p> <p> Нижний колонтитул </p> </div> ) ; } }​​​​​​​​​​​​​​​

Архитектура за пределами HTML

Базовая архитектура React применяется не только для рендеринга HTML в браузере. Например, Facebook имеет динамические диаграммы, которые рендерятся по <canvas>тегам, [38] а Netflix и PayPal используют универсальную загрузку для рендеринга идентичного HTML как на сервере, так и на клиенте. [39] [40]

Рендеринг на стороне сервера

Рендеринг на стороне сервера (SSR) относится к процессу рендеринга клиентского приложения JavaScript на сервере, а не в браузере. Это может улучшить производительность приложения, особенно для пользователей с более медленными соединениями или устройствами.

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

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

Распространенные идиомы

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

Однонаправленный поток данных

Для поддержки концепции однонаправленного потока данных React (которую можно противопоставить двунаправленному потоку AngularJS ), архитектура Flux была разработана как альтернатива популярной архитектуре модель–представление–контроллер . Flux представляет действия , которые отправляются через центральный диспетчер в хранилище , а изменения в хранилище распространяются обратно в представление. [41] При использовании с React это распространение осуществляется через свойства компонентов. С момента своего замысла Flux был заменен такими библиотеками, как Redux и MobX. [42]

Поток можно считать вариантом модели наблюдателя . [43]

Компонент React в архитектуре Flux не должен напрямую изменять какие-либо переданные ему свойства, но должен передавать функции обратного вызова , которые создают действия , отправляемые диспетчером для изменения хранилища. Действие — это объект, обязанность которого — описывать то, что произошло: например, действие, описывающее одного пользователя, «следующего» за другим, может содержать идентификатор пользователя, идентификатор целевого пользователя и тип USER_FOLLOWED_ANOTHER_USER. [44] Хранилища, которые можно рассматривать как модели, могут изменять себя в ответ на действия, полученные от диспетчера.

Этот шаблон иногда выражается как «свойства текут вниз, действия текут вверх». С момента его создания было создано множество реализаций Flux, возможно, наиболее известной из которых является Redux , в котором есть единое хранилище, часто называемое единым источником истины . [45]

В феврале 2019 года useReducerбыл представлен как React hook в выпуске 16.8. Он предоставляет API, который согласуется с Redux, позволяя разработчикам создавать хранилища, подобные Redux, которые являются локальными для состояний компонентов. [46]

Будущее развитие

Статус проекта можно отслеживать на форуме обсуждения основной команды. [47] Однако основные изменения в React проходят через репозиторий Future of React и запросы на извлечение . [48] [49] Это позволяет сообществу React предоставлять отзывы о новых потенциальных функциях, экспериментальных API и улучшениях синтаксиса JavaScript.

История

React был создан Джорданом Уолком, инженером-программистом из Meta , который изначально разработал прототип под названием «F-Bolt» [50], а затем переименовал его в «FaxJS». Эта ранняя версия задокументирована в репозитории GitHub Джордана Уолка. [1] На проект оказали влияние XHP , библиотека HTML- компонентов для PHP .

React был впервые развернут в ленте новостей Facebook в 2011 году, а затем интегрирован в Instagram в 2012 году . [51] В мае 2013 года на JSConf US проект был официально открыт с открытым исходным кодом, что стало важным поворотным моментом в его принятии и росте. [2]

React Native , который позволяет разрабатывать собственные приложения для Android , iOS и UWP с помощью React, был анонсирован на конференции React Conf в Facebook в феврале 2015 года и открыт для доступа в марте 2015 года.

18 апреля 2017 года Facebook анонсировала React Fiber, новый набор внутренних алгоритмов для рендеринга, в отличие от старого алгоритма рендеринга React, Stack. [52] React Fiber должен был стать основой для любых будущих улучшений и разработки функций библиотеки React. [53] [ требуется обновление ] Фактический синтаксис для программирования с React не меняется; изменился только способ выполнения синтаксиса. [54] Старая система рендеринга React, Stack, была разработана в то время, когда не было понимания фокуса системы на динамических изменениях. Stack медленно отрисовывал сложную анимацию, например, пытаясь выполнить все это за один отрезок. Fiber разбивает анимацию на сегменты, которые можно распределить по нескольким кадрам. Аналогично, структуру страницы можно разбить на сегменты, которые можно поддерживать и обновлять отдельно. Функции JavaScript и виртуальные объекты DOM называются «волокнами», и каждое из них можно использовать и обновлять отдельно, что обеспечивает более плавный рендеринг на экране. [55]

26 сентября 2017 года React 16.0 был выпущен для публики. [56]

20 октября 2020 года команда React выпустила React v17.0, примечательную как первый крупный релиз без существенных изменений в API React, ориентированном на разработчиков. [57]

29 марта 2022 года был выпущен React 18, в котором был представлен новый параллельный рендерер, автоматическое пакетирование и поддержка рендеринга на стороне сервера с помощью Suspense. [58]

5 декабря 2024 года был выпущен React 19. В этом выпуске были представлены действия, которые упрощают процесс обновления состояния с помощью асинхронных функций, а не необходимость вручную обрабатывать ожидающие состояния, ошибки и оптимистичные обновления. React 19 также включал поддержку серверных компонентов и улучшенную генерацию статического сайта. [59]

История версий React
ВерсияДата выпускаИзменения
0.3.029 мая 2013 г.Первоначальный публичный релиз
0.4.020 июля 2013 г.Поддержка узлов комментариев <div>{/* */}</div>, улучшенные API рендеринга на стороне сервера, удален React.autoBind, поддержка свойства key, улучшения форм, исправленные ошибки.
0.5.020 октября 2013 г.Улучшено использование памяти, поддержка событий выбора и композиции, поддержка getInitialState и getDefaultProps в миксинах, добавлены React.version и React.isValidClass, улучшена совместимость с Windows.
0.8.020 декабря 2013 г.Добавлена ​​поддержка строк и столбцов, defer и async, цикла для <audio>& <video>, атрибутов autoCorrect. Добавлены события onContextMenu, обновлены инструменты jstransform и esprima-fb, обновлен браузерify.
0.9.020 февраля 2014 г.Добавлена ​​поддержка crossOrigin, download и hrefLang, mediaGroup и muted, sandbox, Seamless и srcDoc, атрибутов scope. Добавлены any, arrayOf, component, oneOfType, renderable, shape в React.PropTypes. Добавлена ​​поддержка событий onMouseOver и onMouseOut. Добавлена ​​поддержка onLoad и onError для <img>элементов.
0.10.021 марта 2014 г.Добавлена ​​поддержка атрибутов srcSet и textAnchor, добавлена ​​функция обновления для неизменяемых данных, гарантируется, что все элементы void не вставляют закрывающий тег.
0.11.017 июля 2014 г.Улучшенная поддержка SVG, нормализованное событие e.view, обновленная команда $apply, добавлена ​​поддержка пространств имен, добавлен новый API transformWithDetails, включает предварительно созданные пакеты в dist/, MyComponent() теперь возвращает дескриптор, а не экземпляр.
0.12.021 ноября 2014 г.Добавлены новые функции. Введен оператор распространения ({...}) для отмены this.transferPropsTo. Добавлена ​​поддержка acceptCharset, classID, атрибутов HTML manifest. В API добавлен React.addons.batchedUpdates. @jsx React.DOM больше не требуется. Исправлены проблемы с CSS-переходами.
0.13.010 марта 2015 г.Устаревшие шаблоны, выдававшие предупреждение в версии 0.12, больше не работают, порядок разрешения ссылок изменился, удалены свойства this._pendingState и this._rootNodeID, поддерживается классы ES6, добавлен API React.findDOMNode(component), поддерживается итераторы и последовательности immutable-js, добавлены новые функции React.addons.createFragment, устаревший React.addons.classSet.
15.0.07 апреля 2016 г.Первоначальный рендеринг теперь использует document.createElement вместо генерации HTML, больше никаких дополнительных <span>s, улучшенная поддержка SVG, ReactPerf.getLastMeasurements()непрозрачность, введены новые устаревшие элементы с предупреждением, исправлено несколько небольших утечек памяти, React DOM теперь поддерживает HTML-атрибуты cite и profile, а также свойства CSS cssFloat, gridRow и gridColumn.
15.1.020 мая 2016 г.Исправлена ​​ошибка пакетной обработки, обеспечено использование последней версии назначения объектов, исправлена ​​регрессия, удалено использование утилиты слияния, переименованы некоторые модули.
15.2.01 июля 2016 г.Включить информацию о стеке компонентов, остановить проверку свойств во время монтирования, добавить React.PropTypes.symbol, добавить обработку onLoad <link>и обработку onError к <source>элементу, добавить isRunning()API, исправить снижение производительности.
15.3.030 июля 2016 г.Добавлен React.PureComponent, исправлена ​​проблема с вложенным серверным рендерингом, добавлены xmlns, xmlnsXlink для поддержки атрибутов SVG и referrerPolicy к атрибутам HTML, обновлено дополнение React Perf, исправлена ​​проблема с ref.
15.4.016 ноября 2016 г.Пакет React и сборка браузера больше не включают React DOM, улучшена производительность разработки, исправлены случайные сбои тестирования, обновлен API batchedUpdates, React Perf и ReactTestRenderer.create().
15.5.07 апреля 2017 г.Добавлен react-dom/test-utils, удалены peerDependencies, исправлена ​​проблема с Closure Compiler, добавлено предупреждение об устаревании React.createClass и React.PropTypes, исправлена ​​ошибка Chrome.
15.6.013 июня 2017 г.Добавить поддержку переменных CSS в атрибуте стиля и свойствах стиля сетки, исправить поддержку AMD для дополнений, зависящих от React, удалить ненужные зависимости, добавить предупреждение об устаревании для вспомогательных функций фабрики React.createClass и React.DOM.
16.0.026 сентября 2017 г.Улучшена обработка ошибок с введением «границ ошибок», React DOM позволяет передавать нестандартные атрибуты, Незначительные изменения в поведении setState, удалена сборка react-with-addons.js, Добавлен React.createClass как create-react-class, React.PropTypes как prop-types, React.DOM как react-dom-factories, изменения в поведении методов планирования и жизненного цикла.
16.1.09 ноября 2017 г.Прекращение поддержки релизов Bower, исправление случайной дополнительной глобальной переменной в сборках UMD, исправление срабатывания onMouseEnter и onMouseLeave, исправление заполнителя <textarea>, удаление неиспользуемого кода, добавление отсутствующей зависимости package.json, добавление поддержки React DevTools.
16.3.029 марта 2018 г.Добавить новый официально поддерживаемый контекстный API, Добавить новый пакет Предотвратить бесконечный цикл при попытке отрисовки порталов с помощью SSR, Исправлена ​​проблема с this.state, Исправлена ​​проблема IE/Edge.
16.4.024 мая 2018 г.Добавить поддержку спецификации Pointer Events, Добавить возможность указывать propTypes, Исправлен контекст чтения, Исправлена ​​поддержка getDerivedStateFromProps(), Исправлен сбой testInstance.parent, Добавить компонент React.unstable_Profiler для измерения производительности, Изменены имена внутренних событий.
16.5.05 сентября 2018 г.Добавить поддержку React DevTools Profiler, изящно обрабатывать ошибки в более пограничных случаях, добавить react-dom/profiling, добавить событие onAuxClick для браузеров, добавить поля movementX и movementY к событиям мыши, добавить поля tangentialPressure и twist к событию указателя.
16.6.023 октября 2018 г.Добавить поддержку contextType, Поддержать уровни приоритета, продолжения и обернутые обратные вызовы, Улучшить механизм отката, Исправлено серое наложение в iOS Safari, Добавить React.lazy()компоненты для разделения кода.
16.7.020 декабря 2018 г.Исправление производительности React.lazy для лениво загружаемых компонентов, очистка полей при размонтировании для предотвращения утечек памяти, исправление ошибки с SSR, устранение снижения производительности.
16.8.06 февраля 2019 г.Добавить хуки, добавить ReactTestRenderer.act()и ReactTestUtils.act()для пакетных обновлений, поддержать синхронные thenables, передаваемые в React.lazy(), улучшить API ленивой инициализации useReducer Hook.
16.9.09 августа 2019 г.Добавить API React.Profiler для программного сбора показателей производительности. Удалить stable_ConcurrentMode в пользу stable_createRoot
16.10.027 сентября 2019 г.Исправлен пограничный случай, когда обновление хука не запоминалось. Исправлена ​​эвристика для определения того, когда следует гидратировать, чтобы мы не выполняли неправильную гидратацию во время обновления. Очистите дополнительные поля волокон во время размонтирования для экономии памяти. Исправлена ​​ошибка с обязательными текстовыми полями в Firefox. Предпочитайте Object.is вместо встроенного полифилла, если он доступен. Исправлена ​​ошибка при смешивании Suspense и обработки ошибок.
16.11.022 октября 2019 г.Исправлена ​​ошибка, из-за которой обработчики mouseenter не срабатывали дважды внутри вложенных контейнеров React. Удалите экспериментальные API-интерфейсы stable_createRoot и stable_createSyncRoot. (Они доступны в экспериментальном канале как createRoot и createSyncRoot.)
16.12.014 ноября 2019 г.React DOM – Исправление пассивных эффектов ( useEffect), которые не срабатывали в многокорневом приложении. React Is – Исправление lazyи memoтипы считались элементами вместо компонентов
16.13.026 февраля 2020 г.Добавлены функции в React Concurrent mode. Исправлены регрессии в React core library и React Dom.
16.14.014 октября 2020 г.Добавить поддержку нового преобразования JSX.
17.0.020 октября 2020 г.«Нет новых функций» позволяет постепенно обновлять React со старых версий. Добавить новое преобразование JSX, изменения в делегировании событий
18.0.029 марта 2022 г.Параллельный React, автоматическое пакетирование, новые функции Suspense, переходы, API клиентского и серверного рендеринга, новое поведение строгого режима, новые хуки [60]
18.1.026 апреля 2022 г.Множество исправлений и улучшений производительности
18.2.014 июня 2022 г.Множество других исправлений и улучшений производительности.
18.3.025 апреля 2024 г.Добавляет предупреждения об устаревании функций в React 19.
19.0.05 декабря 2024 г.Действия, новые хуки (useActionState, useFormStatus, useOptimistic), использование API, серверные компоненты, серверные действия, передача ссылок как обычного свойства, улучшенные различия гидратации, улучшенный контекстный API, функции очистки ссылок, улучшенный useDeferredValue API, поддержка метаданных документа, поддержка таблиц стилей, поддержка асинхронных скриптов, поддержка предварительной загрузки ресурсов, улучшенные сообщения об ошибках и поддержка пользовательских элементов.

Лицензирование

Первоначальный публичный релиз React в мае 2013 года использовал Apache License 2.0 . В октябре 2014 года React 0.12.00 заменил ее на лицензию BSD из 3 пунктов и добавил отдельный текстовый файл PATENTS, который разрешает использование любых патентов Facebook, связанных с программным обеспечением: [61]

Лицензия, предоставленная по настоящему Соглашению, будет автоматически и без уведомления прекращена для любого лица, которое предъявит иск (включая подачу иска, заявления или иного иска), утверждающий (a) прямое, косвенное или косвенное нарушение или побуждение к нарушению любого патента: (i) со стороны Facebook или любой из ее дочерних компаний или филиалов, независимо от того, связано ли такое требование с Программным обеспечением, (ii) любой стороны, если такое требование возникает полностью или частично из любого программного обеспечения, продукта или услуги Facebook или любой из ее дочерних компаний или филиалов, независимо от того, связано ли такое требование с Программным обеспечением, или (iii) любой стороны, связанной с Программным обеспечением; или (b) что любое право в любой патентной претензии Facebook является недействительным или неисполнимым.

Этот нетрадиционный пункт вызвал некоторые противоречия и дебаты в сообществе пользователей React, поскольку его можно было бы интерпретировать как наделение Facebook полномочиями отзывать лицензию во многих сценариях, например, если Facebook подает в суд на лицензиата, побуждая его предпринять «другие действия», опубликовав действие в блоге или в другом месте. Многие выразили опасения, что Facebook может несправедливо использовать пункт о прекращении или что интеграция React в продукт может усложнить будущее приобретение стартап-компании. [62]

На основе отзывов сообщества Facebook обновил условия выдачи патента в апреле 2015 года, сделав их менее двусмысленными и более разрешительными: [63]

Лицензия, предоставленная по настоящему Соглашению, будет автоматически и без уведомления прекращена, если вы (или любая из ваших дочерних компаний, корпоративных филиалов или агентов) инициируете прямо или косвенно или принимаете прямую финансовую заинтересованность в любой Патентной претензии: (i) против Facebook или любой из ее дочерних компаний или корпоративных филиалов, (ii) против любой стороны, если такая Патентная претензия возникает полностью или частично из любого программного обеспечения, технологии, продукта или услуги Facebook или любой из ее дочерних компаний или корпоративных филиалов, или (iii) против любой стороны, связанной с Программным обеспечением. [...] «Патентная претензия» — это любой иск или иное действие, утверждающее прямое, косвенное или косвенное нарушение или побуждение к нарушению любого патента, включая перекрестный иск или встречный иск. [64]

Apache Software Foundation посчитала это лицензионное соглашение несовместимым с ее политикой лицензирования, поскольку оно «переносит риск на последующих потребителей нашего программного обеспечения, несбалансированно в пользу лицензиара, а не лицензиата, тем самым нарушая нашу юридическую политику Apache как универсального донора», и «не являются подмножеством тех, которые содержатся в [Apache License 2.0], и они не могут быть сублицензированы как [Apache License 2.0]». [65] В августе 2017 года Facebook отклонил последующие опасения Apache Foundation и отказался пересматривать свою лицензию. [66] [67] В следующем месяце WordPress решила переключить свои проекты Gutenberg и Calypso с React. [68]

23 сентября 2017 года Facebook объявила, что на следующей неделе она повторно лицензирует Flow, Jest, React и Immutable.js в соответствии со стандартной лицензией MIT ; компания заявила, что React является «основой широкой экосистемы программного обеспечения с открытым исходным кодом для Интернета», и что они не хотят «сдерживать прогресс по нетехническим причинам». [69]

26 сентября 2017 года React 16.0.0 был выпущен с лицензией MIT. [70] Изменение лицензии MIT также было перенесено в линейку релизов 15.x с React 15.6.2. [71]

Сравнение с другими фреймворками

JavaScript-фреймворки веб-приложений, такие как React, предоставляют обширные возможности, но идут на соответствующие компромиссы. Эти фреймворки часто расширяют или улучшают функции, доступные через собственные веб-технологии, такие как маршрутизация, компонентная разработка и управление состоянием. В то время как собственные веб-стандарты, включая веб-компоненты, современные JavaScript API, такие как Fetch и ES Modules, и возможности браузера, такие как Shadow DOM, значительно продвинулись вперед, фреймворки по-прежнему широко используются из-за их способности повышать производительность разработчиков, предлагать структурированные шаблоны для крупномасштабных приложений, упрощать обработку крайних случаев и предоставлять инструменты для оптимизации производительности. [72] [73] [74]

Фреймворки могут вводить слои абстракции, которые могут способствовать накладным расходам производительности, большим размерам пакетов и повышенной сложности. Современные фреймворки, такие как React 18, решают эти проблемы с помощью таких функций, как параллельный рендеринг, tree-shaking и выборочная гидратация. Хотя эти усовершенствования повышают эффективность рендеринга и управление ресурсами, их преимущества зависят от конкретного приложения и контекста реализации. Легкие фреймворки, такие как Svelte и Preact, используют различные архитектурные подходы, при этом Svelte полностью устраняет виртуальный DOM в пользу компиляции компонентов в эффективный код JavaScript, а Preact предлагает минимальную, совместимую альтернативу React. Выбор фреймворка зависит от требований приложения, включая опыт команды, цели производительности и приоритеты разработки. [72] [73] [74]

Новая категория веб-фреймворков, включая enhance.dev, Astro и Fresh, использует собственные веб-стандарты, минимизируя абстракции и инструменты разработки. [75] [76] [77] Эти решения подчеркивают прогрессивное улучшение , серверный рендеринг и оптимизацию производительности. Astro по умолчанию рендерит статический HTML, гидратируя только интерактивные части. Fresh фокусируется на серверном рендеринге с нулевыми издержками времени выполнения. Enhance.dev отдает приоритет шаблонам прогрессивного улучшения с использованием веб-компонентов. Хотя эти инструменты уменьшают зависимость от клиентского JavaScript, перенося логику на время сборки или выполнение на стороне сервера, они по-прежнему используют JavaScript там, где это необходимо для интерактивности. Такой подход делает их особенно подходящими для приложений, критически важных для производительности и ориентированных на контент. [72] [73] [74]

Смотрите также

Примечания

  1. ^ Включено в React Router начиная с React Router v7 [10]

Ссылки

  1. ^ Оккино, Том; Уолк, Джордан (5 августа 2013 г.). «JS Apps at Facebook». YouTube . Архивировано из оригинала 31 мая 2022 г. Получено 22 октября 2018 г.
  2. ^ «React — это библиотека или фреймворк? Вот почему это важно». freeCodeCamp.org . 2021-04-12 . Получено 2024-10-12 .
  3. ^ "React v19". 5 декабря 2024 г. Получено 5 декабря 2024 г.
  4. ^ "Что нового в React 19". Архивировано из оригинала 2024-05-12 . Получено 2024-05-12 .
  5. ^ abc "React – библиотека JavaScript для создания пользовательских интерфейсов". reactjs.org . Архивировано из оригинала 8 апреля 2018 г. . Получено 7 апреля 2018 г. .
  6. ^ "Глава 1. Что такое React? - Что такое React и почему это важно [Книга]". www.oreilly.com . Архивировано из оригинала 6 мая 2023 г. . Получено 2023-05-06 .
  7. ^ Крилл, Пол (15 мая 2014 г.). «React: Making faster, smoother UIs for data-driven Web apps». InfoWorld . Архивировано из оригинала 2018-06-12 . Получено 2021-02-23 .
  8. ^ Хемел, Зеф (3 июня 2013 г.). «Библиотека пользовательских интерфейсов React JavaScript от Facebook получила смешанные отзывы». infoq.com . Архивировано из оригинала 26 мая 2022 г. . Получено 11 января 2022 г.
  9. ^ Доусон, Крис (25 июля 2014 г.). «История JavaScript и как она привела к ReactJS». The New Stack . Архивировано из оригинала 6 августа 2020 г. Получено 19 июля 2020 г.
  10. ^ Lybrand, Brooks (2024-05-15). «Объединение Remix и React Router». remix.run . Получено 2024-12-25 .
  11. ^ Дере 2017.
  12. ^ Панчал 2022.
  13. ^ "Введение в React". GeeksforGeeks . 2017-09-27 . Получено 2024-10-12 .
  14. ^ abcdefghijkl Wieruch 2020.
  15. ^ Шварцмюллер 2018.
  16. ^ "Components and Props". React . Facebook. Архивировано из оригинала 7 апреля 2018 г. Получено 7 апреля 2018 г.
  17. ^ abcdef Ларсен 2021.
  18. ^ "Введение в хуки". react.js. Архивировано из оригинала 2018-10-25 . Получено 2019-05-20 .
  19. ^ "Hooks at a Glance – React". reactjs.org . Архивировано из оригинала 2023-03-15 . Получено 2019-08-08 .
  20. ^ "Что за чертовщина React Hooks?". Soshace . 2020-01-16. Архивировано из оригинала 2022-05-31 . Получено 2020-01-24 .
  21. ^ "Использование State Hook – React". reactjs.org . Архивировано из оригинала 2022-07-30 . Получено 2020-01-24 .
  22. ^ abc "Использование State Hook – React". reactjs.org . Архивировано из оригинала 2022-07-30 . Получено 2020-01-24 .
  23. ^ "Использование эффекта Hook – React". reactjs.org . Архивировано из оригинала 2022-08-01 . Получено 2020-01-24 .
  24. ^ "Hooks API Reference – React". reactjs.org . Архивировано из оригинала 2022-08-05 . Получено 2020-01-24 .
  25. ^ "Rules of Hooks – React". reactjs.org . Архивировано из оригинала 2021-06-06 . Получено 2020-01-24 .
  26. ^ "Building Your Own Hooks – React". reactjs.org . Архивировано из оригинала 2022-07-17 . Получено 2020-01-24 .
  27. ^ "React Labs: Над чем мы работаем – март 2023 г.". react.dev . Архивировано из оригинала 2023-07-26 . Получено 2023-07-23 .
  28. ^ Абрамов, Дэн; Тан, Лорен; Савона, Джозеф; Маркбоге, Себастьян (21.12.2020). «Введение в компоненты сервера React Zero-Bundle-Size». react.dev . Получено 28.09.2024 .
  29. ^ Chourasia, Rawnak (2023-03-08). "Преобразовать компонент класса в компонент функции (стрелки) – React". Code Part Time . Архивировано из оригинала 2023-08-15 . Получено 2023-08-15 .
  30. ^ "Mastering React Router – The Ultimate Guide". 2023-07-12. Архивировано из оригинала 2023-07-26 . Получено 2023-07-26 .
  31. ^ "Refs and the DOM". React Blog . Архивировано из оригинала 2022-08-07 . Получено 2021-07-19 .
  32. ^ "React: The Virtual DOM". Codecademy . Архивировано из оригинала 2021-10-28 . Получено 2021-10-14 .
  33. ^ Аггарвал, Санчит (март 2018 г.). «Современная веб-разработка с использованием ReactJS» (PDF) . International Journal of Recent Research Aspects . стр.  133–137 . Архивировано (PDF) из оригинала 17 апреля 2024 г. . Получено 11 декабря 2024 г. .
  34. ^ "ReactDOM – React". reactjs.org . Архивировано из оригинала 2023-01-08 . Получено 2023-01-08 .
  35. ^ "Reconciliation – React". reactjs.org . Архивировано из оригинала 2023-01-08 . Получено 2023-01-08 .
  36. ^ "React.Component – ​​React". legacy.reactjs.org . Архивировано из оригинала 2024-04-09 . Получено 2024-04-09 .
  37. ^ "Draft: JSX Specification". JSX . Facebook. 2022-03-08. Архивировано из оригинала 2022-04-02 . Получено 7 апреля 2018 .
  38. ^ Хант, Пит (2013-06-05). «Почему мы создали React? – Блог React». reactjs.org . Архивировано из оригинала 2015-04-06 . Получено 2022-02-17 .
  39. ^ "PayPal Isomorphic React". medium.com . 2015-04-27. Архивировано из оригинала 2019-02-08 . Получено 2019-02-08 .
  40. ^ "Netflix Isomorphic React". netflixtechblog.com . 2015-01-28. Архивировано из оригинала 2016-12-17 . Получено 2022-02-14 .
  41. ^ "In Depth OverView". Flux . Facebook. Архивировано из оригинала 7 августа 2022 г. Получено 7 апреля 2018 г.
  42. ^ "Flux Release 4.0". Github . Архивировано из оригинала 31 мая 2022 г. Получено 26 февраля 2021 г.
  43. ^ Джонсон, Николас. «Введение в Flux – Упражнение React». Николас Джонсон . Архивировано из оригинала 31 мая 2022 года . Получено 7 апреля 2018 года .
  44. ^ Абрамов, Дэн. «История React и Flux с Дэном Абрамовым». Three Devs and a Maybe . Архивировано из оригинала 19 апреля 2018 года . Получено 7 апреля 2018 года .
  45. ^ "State Management Tools – Results". The State of JavaScript . Архивировано из оригинала 31 мая 2022 г. Получено 29 октября 2021 г.
  46. ^ "React v16.8: The One with Hooks". Архивировано из оригинала 2023-01-08 . Получено 2023-01-08 .
  47. ^ "Meeting Notes". React Discuss . Архивировано из оригинала 2015-12-22 . Получено 2015-12-13 .
  48. ^ "reactjs/react-future – Будущее React". GitHub . Архивировано из оригинала 2022-07-13 . Получено 2015-12-13 .
  49. ^ "facebook/react – Проблемы с запросами функций". GitHub . Архивировано из оригинала 2022-07-09 . Получено 2015-12-13 .
  50. ^ "React.js: The Documentary". Youtube . Honeypot. 10 февраля 2023 г. Архивировано из оригинала 2024-01-19 . Получено 2024-05-27 .
  51. ^ Лопес, Марни (13 мая 2024 г.). «Почему React так широко принят веб-разработчиками?». Devlane . Архивировано из оригинала 20 июня 2024 г. Получено 11 декабря 2024 г.
  52. ^ Лардинойс 2017.
  53. ^ "React Fiber Architecture". Github . Архивировано из оригинала 10 мая 2018 г. Получено 19 апреля 2017 г.
  54. ^ "Facebook анонсирует React Fiber, переписанный фреймворк React". TechCrunch . 18 апреля 2017 г. Архивировано из оригинала 2018-06-14 . Получено 2018-10-19 .
  55. ^ "GitHub – acdlite/react-fiber-architecture: Описание нового основного алгоритма React, React Fiber". github.com . Архивировано из оригинала 2018-05-10 . Получено 2018-10-19 .
  56. ^ "React v16.0". react.js. 2017-09-26. Архивировано из оригинала 2017-10-03 . Получено 2019-05-20 .
  57. ^ url=https://reactjs.org/blog/2020/08/10/react-v17-rc.html Архивировано 10.08.2020 на Wayback Machine
  58. ^ "React 18". React . Получено 7 декабря 2024 г. .
  59. ^ "React 19". React . Получено 7 декабря 2024 г. .
  60. ^ "React v18.0". reactjs.org . Архивировано из оригинала 2022-03-29 . Получено 2022-04-12 .
  61. ^ "React CHANGELOG.md". GitHub . Архивировано из оригинала 2020-04-28 . Получено 2015-12-09 .
  62. ^ Лю, Остин. "Убедительная причина не использовать ReactJS". Medium . Архивировано из оригинала 2022-05-31 . Получено 2015-12-09 .
  63. ^ "Обновление нашего патента на программное обеспечение с открытым исходным кодом". Архивировано из оригинала 2020-11-08 . Получено 2015-12-09 .
  64. ^ "Дополнительное предоставление патентных прав, версия 2". GitHub . Архивировано из оригинала 2022-05-31 . Получено 2015-12-09 .
  65. ^ "ASF Legal Previously Asked Questions". Apache Software Foundation. Архивировано из оригинала 2018-02-06 . Получено 2017-07-16 .
  66. ^ "Explaining React's License". Facebook . Архивировано из оригинала 2021-05-06 . Получено 2017-08-18 .
  67. ^ "Рассмотрите возможность повторного лицензирования AL v2.0, как это только что сделала RocksDB". Github . Архивировано из оригинала 2022-07-27 . Получено 2017-08-18 .
  68. ^ "WordPress отказывается от библиотеки React из-за риска патентной оговорки Facebook". TechCrunch . 15 сентября 2017 г. Архивировано из оригинала 2022-05-31 . Получено 2017-09-16 .
  69. ^ «Повторное лицензирование React, Jest, Flow и Immutable.js». Facebook Code . 2017-09-23. Архивировано из оригинала 2020-12-06 . Получено 2017-09-23 .
  70. ^ Кларк, Эндрю (26 сентября 2017 г.). «React v16.0§лицензирован MIT». Блог React . Архивировано из оригинала 3 октября 2017 г. Получено 18 октября 2017 г.
  71. ^ Hunzaker, Nathan (25 сентября 2017 г.). "React v15.6.2". React Blog . Архивировано из оригинала 31 мая 2022 г. Получено 18 октября 2017 г.
  72. ^ abc Uzayr, Sufyan bin; Cloud, Nicholas; Ambler, Tim (ноябрь 2019 г.). JavaScript Frameworks for Modern Web Development: The Essential Frameworks, Libraries, and Tools to Learn Right Now . Apress. ISBN 978-1484249949.
  73. ^ abc Создание собственных веб-компонентов: разработка интерфейса с использованием Polymer и Vue.js . ISBN 978-1484259047.
  74. ^ abc Практический курс по высокой производительности JavaScript: создание более быстрых веб-приложений с использованием Node.js, Svelte.js и WebAssembly . ISBN 978-1838821098.
  75. ^ "Улучшить". GitHub .
  76. ^ "Astro Framework". GitHub .
  77. ^ "Свежий". GitHub .

Библиография

  • Ларсен, Джон (2021). React Hooks в действии с саспенсом и параллельным режимом . Мэннинг. ISBN 978-1-72004-399-7.
  • Шварцмюллер, Макс (01.05.2018). React – Полное руководство (включая хуки, React Router и Redux) . Packt Publishing .
  • Вирух, Робин (2020). Дорога к Реакции . Leanpub. ISBN 978-1-72004-399-7.
  • Дере, Мохан (21.12.2017). «Как интегрировать create-react-app со всеми библиотеками, необходимыми для создания отличного приложения». freeCodeCamp . Получено 14.06.2018 .
  • Panchal, Krunal (2022-04-26). "Подробное сравнение Angular и React". SitePoint . Архивировано из оригинала 2023-03-30 . Получено 2023-06-05 .
  • Hámori, Fenerec (2022-05-31). "История React.js на временной шкале". RisingStack . Архивировано из оригинала 2022-05-31 . Получено 2023-06-05 .
  • Лардинуа, Фредерик (18.04.2017). "Facebook анонсирует React Fiber, переписанный фреймворк React". TechCrunch . Получено 31.12.2024 .
  • Официальный сайт
  • Гитхаб
  • Раскрытие совершенства разработки React


Retrieved from "https://en.wikipedia.org/w/index.php?title=React_(software)&oldid=1272547710"