React (веб-фреймворк) - React (web framework)

Реагировать
React-icon.svg
Оригинальный автор (ы)Джордан Уолк
Разработчики)Facebook и сообщество
изначальный выпуск29 мая, 2013; 7 лет назад (2013-05-29)[1]
Стабильный выпуск
17.0.0[2] Отредактируйте это в Викиданных / 20 октября 2020; 2 месяца назад (20 октября 2020 г.)
Репозиторий
Отредактируйте это в Викиданных
Написано вJavaScript
ПлатформаВеб-платформа
ТипБиблиотека JavaScript
ЛицензияЛицензия MIT
Интернет сайтreactjs.org Отредактируйте это в Викиданных

Реагировать (также известный как React.js или же ReactJS) является Открытый исходный код, внешний интерфейс, Библиотека JavaScript[3] для строительства пользовательские интерфейсы или компоненты пользовательского интерфейса. Он поддерживается Facebook и сообщество отдельных разработчиков и компаний.[4][5][6]React можно использовать как основу при разработке одна страница или мобильные приложения. Однако React занимается только отображением данных в ДОМ, поэтому создание приложений React обычно требует использования дополнительных библиотек для государственное управление и маршрутизация.[7][8] Redux[9] и React Router[10] являются соответствующими примерами таких библиотек.

Основное использование

Ниже приведен элементарный пример использования React в HTML с JSX и JavaScript.

1<div я бы="myReactApp"></div>23<сценарий тип="текст / бабель">4  функция Приветствующий(реквизит) {5    возвращаться <h1>{реквизит.приветствие}</ h1>6  }7  вар Приложение = <Приветствующий приветствие="Привет, мир!" />;8  ReactDOM.оказывать(Приложение, документ.getElementById('myReactApp'));9</сценарий>

В Приветствующий функция - это компонент React, который принимает свойство приветствие. Переменная Приложение является примером Приветствующий компонент, где приветствие свойство установлено на 'Привет, мир!'. В ReactDOM.render затем отображает наш компонент Greeter внутри ДОМ элемент с идентификатором myReactApp.

При отображении в веб-браузере результат будет

<div я бы="myReactApp">  <h1>Привет, мир!</h1></div>

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

Составные части

Код React состоит из сущностей, называемых компонентами. Компоненты могут отображаться для определенного элемента в ДОМ с помощью библиотеки React DOM. При рендеринге компонента можно передавать значения, известные как «свойства».[11]:

ReactDOM.оказывать(<Приветствующий приветствие="Привет, мир!" />, документ.getElementById('myReactApp'));

Два основных способа объявления компонентов в React - через функциональные компоненты и компоненты на основе классов.

Функциональные компоненты

Функциональные компоненты объявляются с функцией, которая затем возвращает некоторый JSX.

const Приветствие = (реквизит) => <div>Привет, {реквизит.имя}!</ div>;

Компоненты на основе классов

Компоненты на основе классов объявляются с использованием ES6 классы.

учебный класс Родительский компонент расширяет Реагировать.Компонент {  государственный = { цвет: 'зеленый' };  оказывать() {    возвращаться (      <ChildComponent цвет={это.государственный.цвет} />    );  }}

Виртуальный DOM

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

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

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

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

JSX

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

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

 1учебный класс Приложение расширяет Реагировать.Компонент { 2  оказывать() { 3    возвращаться ( 4      <div> 5        <п>Заголовок</ p> 6        <п>Содержание</ p> 7        <п>Нижний колонтитул</ p> 8      </ div> 9    );10  }11}
Вложенные элементы

Несколько элементов на одном уровне нужно заключить в один элемент React, например <div> элемент, показанный выше, фрагмент, обозначенный <Fragment> или в сокращенной форме <>, или возвращается как массив.[14][15]


Атрибуты

JSX предоставляет ряд атрибутов элементов, предназначенных для отражения атрибутов, предоставляемых HTML. Пользовательские атрибуты также могут быть переданы компоненту.[16] Все атрибуты будут получены компонентом как реквизиты.

Выражения JavaScript

JavaScript выражения (но нет заявления ) можно использовать внутри JSX с фигурными скобками {}:

  <h1>{10+1}</ h1>

В приведенном выше примере будет отображаться 

  <h1>11</h1>
Условные утверждения

Операторы if – else нельзя использовать внутри JSX, но вместо этого можно использовать условные выражения. Пример ниже будет отображать {i === 1? 'истина': 'ложь'} как строка 'истинный' потому что я равно 1.

 1учебный класс Приложение расширяет Реагировать.Компонент { 2  оказывать() { 3    const я = 1; 4    возвращаться ( 5      <div> 6        <h1>{ я === 1 ? 'истинный' : 'ложный' }</ h1> 7      </ div> 8    ); 9  }10}

Вышеуказанное будет отображать:

<div>  <h1>истинный</h1></div>

Функции и JSX можно использовать в условных выражениях:

 1учебный класс Приложение расширяет Реагировать.Компонент { 2  оказывать() { 3    const разделы = [1, 2, 3]; 4    возвращаться ( 5      <div> 6        {разделы.длина > 0 && разделы.карта(п => ( 7            / * 'ключ' используется в реакции для отслеживания элементов списка и их изменений * / 8            / * Каждый «ключ» должен быть уникальным * / 9            <div ключ={"раздел-" + п}>Раздел {п}</ div>10        ))}11      </ div>12    );13  }14}

Вышеуказанное будет отображать:

<div>  <div>Секция 1</div>  <div>Раздел 2</div>  <div>Раздел 3</div></div>

Код, написанный на JSX, требует преобразования с помощью такого инструмента, как Вавилон прежде, чем его смогут понять веб-браузеры.[17] Эта обработка обычно выполняется во время сборка программного обеспечения процесс до подачи заявки развернутый.

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

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

Реагировать на крючки

Хуки - это функции, которые позволяют разработчикам «подключаться» к функциям состояния и жизненного цикла React из функциональных компонентов.[21] Хуки не работают внутри классов - они позволяют использовать React без классов.[22]

React предоставляет несколько встроенных хуков, например useState,[23] useContext, useReducer и useEffect[24]. Остальные описаны в Справочнике по Hooks API.[25] useState и useEffect, которые наиболее часто используются, предназначены для контроля состояния и побочных эффектов соответственно.

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

Есть правила крючков[26] которые описывают характерный шаблон кода, на который полагаются ловушки.

  1. Хуки должны вызываться только на верхнем уровне (не внутри циклов или операторов if).
  2. Хуки следует вызывать только из функциональных компонентов React, а не из обычных функций или компонентов класса.

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

Общие идиомы

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

Использование архитектуры Flux

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

Флюс можно рассматривать как вариант образец наблюдателя.[29]

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

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

Дальнейшее развитие

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

История

React был создан Джорданом Уолком, инженером-программистом в Facebook, который выпустил ранний прототип React под названием «FaxJS».[35][36] На него повлияли XHP, HTML библиотека компонентов для PHP. Впервые он был размещен на Facebook Новостная лента в 2011 году и позже Instagram в 2012.[37] Его исходный код был открыт в JSConf US в мае 2013 года.[36]

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

18 апреля 2017 года Facebook объявил React Fiber, новый основной алгоритм библиотеки React для сборки пользовательские интерфейсы.[38] React Fiber должен был стать основой для любых будущих улучшений и развития функций библиотеки React.[39][нуждается в обновлении ]

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

16 февраля 2019 года React 16.8 был выпущен для широкой публики.[41] Релиз представил React Hooks.[42]

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

Версии
ВерсияДата выходаИзменения
0.3.029 мая 2013Первоначальный публичный выпуск
0.4.020 июля 2013 г.Поддержка узлов комментариев
{/ * * /}
, улучшенные API рендеринга на стороне сервера, удаленный React.autoBind, поддержка ключевого свойства, улучшения форм, исправленные ошибки.
0.5.020 октября 2013 г.Улучшение использования памяти, поддержка событий Selection и Composition, поддержка getInitialState и getDefaultProps в миксинах, добавлены React.version и React.isValidClass, улучшена совместимость с Windows.
0.8.020 декабря 2013 г.Добавлена ​​поддержка строк и столбцов, отложенного и асинхронного, цикла для
0.9.020 февраля 2014 г.Добавлена ​​поддержка crossOrigin, download и hrefLang, mediaGroup и muted, sandbox, seamless и srcDoc, scope, добавлены атрибуты any, arrayOf, component, oneOfType, renderable, shape в React.PropTypes, добавлена ​​поддержка onMouseOver и onMouseOut event, добавлена ​​поддержка для onLoad и onError для элементов .
0.10.021 марта 2014 г.Добавлена ​​поддержка атрибутов srcSet и textAnchor, добавлена ​​функция обновления для неизменяемых данных, Убедитесь, что все элементы void не вставляют закрывающий тег.
0.11.017 июля 2014 г.Улучшенная поддержка SVG, нормализованное событие e.view, команда Update $ apply, добавлена ​​поддержка пространств имен, добавлен новый API transformWithDetails, включены предварительно созданные пакеты в dist /, MyComponent () теперь возвращает дескриптор, а не экземпляр.
0.12.021 ноября 2014 г.Добавлены новые функции Оператор распространения ({...}), представленный для исключения this.transferPropsTo, Добавлена ​​поддержка acceptCharset, classID, атрибутов HTML манифеста, React.addons.batchedUpdates добавлен в API, @jsx React.DOM больше не требуется, Исправлены проблемы с переходами CSS.
0.13.010 марта 2015 г.Устаревшие шаблоны, о которых говорилось в версии 0.12, больше не работают, порядок разрешения ссылок изменен, удалены свойства this._pendingState и this._rootNodeID, поддержка классов ES6, добавлен API React.findDOMNode (компонент), поддержка итераторов и последовательностей неизменяемых js, добавлены новые функции React.addons.createFragment, React.addons.classSet устарел.
0.14.129 октября 2015 г.Добавлена ​​поддержка srcLang, атрибутов по умолчанию, атрибутов вида и атрибута цвета, Обеспечен доступ к устаревшим .props на узлах DOM, Исправлен scryRenderedDOMComponentsWithClass, Добавлен response-dom.js.
15.0.07 апреля 2016 г.Первоначальный рендеринг теперь использует document.createElement вместо генерации HTML, Больше никаких лишних s, Улучшенная поддержка SVG, ReactPerf.getLastMeasurements () непрозрачен, Новые устаревшие версии представлены с предупреждением, Исправлено несколько небольших утечек памяти, React DOM теперь поддерживает цитировать и профилировать атрибуты HTML и свойства CSS cssFloat, gridRow и gridColumn.
15.1.020 мая 2016Исправьте ошибку пакетной обработки, Убедитесь, что используется последнее назначение объекта, Исправьте регрессию, Удалите использование утилиты слияния, Переименуйте некоторые модули.
15.2.01 июля 2016 г.Включите информацию о стеке компонентов, прекратите проверку свойств во время монтирования, добавьте React.PropTypes.symbol, добавьте обработку onLoad в и обработку onError в элемент , добавьте isRunning () API, исправьте снижение производительности.
15.3.030 июля 2016 г.Добавить React.PureComponent, Исправить проблему с рендерингом вложенного сервера, Добавить xmlns, xmlnsXlink для поддержки атрибутов SVG и referrerPolicy в атрибуты HTML, обновить надстройку React Perf, Исправить проблему с ref.
15.3.119 августа 2016 г.Повысьте производительность сборок разработки, Очистите внутренние перехватчики, Обновите fbjs, Улучшите время запуска React, Исправьте утечку памяти при рендеринге сервера, исправьте React Test Renderer, Измените инвариант trackedTouchCount на console.error.
15.4.016 ноября 2016 г.Пакет React и сборка браузера больше не включают React DOM, улучшенную производительность разработки, исправленные случайные сбои тестов, обновление batchedUpdates API, React Perf и ReactTestRenderer.create ().
15.4.123 ноября 2016 г.Назначение переменных реструктуризации, Фиксированная обработка событий, Фиксированная совместимость сборки браузера со средами AMD.
15.4.206 января 2017Исправлены проблемы сборки, добавлены недостающие зависимости пакетов, улучшены сообщения об ошибках.
15.5.07 апреля 2017 г.Добавлен response-dom / test-utils, Удалены peerDependencies, Исправлена ​​проблема с компилятором Closure, Добавлено предупреждение об устаревании для React.createClass и React.PropTypes, Исправлена ​​ошибка Chrome.
15.5.411 апреля 2017 г.Исправьте совместимость с Enzyme, выставив batchedUpdates на мелком рендерере, обновите версию prop-types, исправьте пакет response-addons-create-fragment, чтобы включить преобразование свободно-envify.
15.6.013 июня 2017 г.Добавить поддержку переменных CSS в атрибут стиля и свойства стиля сетки, Исправить поддержку AMD для надстроек в зависимости от реакции, Удалить ненужную зависимость, Добавить предупреждение об устаревании для помощников фабрики React.createClass и React.DOM.
16.0.026 сентября 2017 г.Улучшенная обработка ошибок с введением «границ ошибок», React DOM позволяет передавать нестандартные атрибуты, Незначительные изменения в поведении setState, удаление сборки response-with-addons.js, добавление React.createClass как create-response-class, React.PropTypes как prop-types, React.DOM как react-dom-factory, изменения в поведении методов планирования и жизненного цикла.
16.1.09 ноября 2017 г.Прекращение выпуска выпусков Bower, исправление случайной дополнительной глобальной переменной в сборках UMD, исправление срабатывания onMouseEnter и onMouseLeave, исправление заполнителя