React

Материал из Википедии — свободной энциклопедии
Перейти к навигации Перейти к поиску
React
Логотип программы React
Тип веб-фреймворк, библиотека функций и библиотека JavaScript
Автор Джордан Валке (англ. Jordan Walke)
Разработчики Meta Platforms, Джордан Уолк[d], Себастиан Маркбоге[d], Даниил Абрамов[d], Рэйчел Наборс[d] и Эндрю Кларк[d]
Написана на JavaScript
Операционная система кроссплатформенность
Первый выпуск 29 мая 2013
Последняя версия
Репозиторий github.com/facebook/react
Состояние Актуален
Лицензия лицензия MIT[3][4]
Сайт react.dev (англ.)
Логотип Викисклада Медиафайлы на Викискладе

React (иногда React.js или ReactJS) — JavaScript-библиотека[5] с открытым исходным кодом для разработки пользовательских интерфейсов.

React разрабатывается и поддерживается Facebook, Instagram и сообществом отдельных разработчиков и корпораций[6][7][8].

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

История разработки[править | править код]

React был создан Джорданом Валке, разработчиком программного обеспечения из Facebook. На него оказал влияние XHP — компонентный HTML-фреймворк для PHP[9]. Впервые React использовался в новостной ленте Facebook в 2011 году и позже в ленте Instagram в 2012 году[10]. Исходный код React открыт в мае 2013 года на конференции «JSConf US».

React Native анонсирован на конференции Facebook «React.js Conf» в феврале 2015 года, а исходный код открыт в марте 2015 года. Он позволяет разрабатывать нативные Android-, iOS- и UWP-приложения с использованием React.

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

Пример использования[править | править код]

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

<div id="myReactApp"></div>

<script type="text/babel">
  class Greeter extends React.Component { 
    render() { 
      return <h1>{this.props.greeting}</h1>
    } 
  } 

  ReactDOM.render(<Greeter greeting="Hello World!" />, document.getElementById('myReactApp'));
</script>

Класс Greeter — это React-компонент, принимающий свойство greeting. Метод ReactDOM.render отрисовывает экземпляр класса (компонента) Greeter со свойством greeting равным "Hello World" и вставляет отрисованный компонент в DOM-элемент с идентификатором myReactApp как вложенный элемент.

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

<div id="myReactApp">
  <h1>Hello World!</h1>
</div>

Особенности[править | править код]

Однонаправленная передача данных[править | править код]

Свойства передаются от родительских компонентов к дочерним. Компоненты получают свойства как множество неизменяемых (англ. immutable) значений, поэтому компонент не может напрямую изменять свойства, но может вызывать изменения через callback-функции. Такой механизм называют «свойства вниз, события наверх».

Виртуальный DOM[править | править код]

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

Redux[править | править код]

Часто React используют в связке с Redux для управления состояниями компонентов

JSX[править | править код]

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

Методы жизненного цикла[править | править код]

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

  • shouldComponentUpdate — позволяет предотвратить перерисовку компонента с помощью возврата false, если перерисовка не нужна.
  • componentDidMount — вызывается после первой отрисовки компонента. Часто используется для запуска получения данных с удалённого источника через API.
  • componentWillUnmount — вызывается во время демонтирования компонента. Часто используется для того чтобы отписаться от наблюдения за событиями.
  • render — важнейший метод жизненного цикла. Каждый компонент должен иметь этот метод. Обычно вызывается при изменении данных компонента для перерисовки данных в интерфейсе.

Не только отрисовка HTML в браузере[править | править код]

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

React Hooks[править | править код]

Хуки позволяют использовать состояние и другие возможности React без написания классов[14].

Построение пользовательских хуков позволяет помещать логику компонента в повторно используемые функции.[15].

Литература[править | править код]

  • Мардан Азат. React быстро. Веб-приложения на React, JSX, Redux и GraphQL. — СПб.: «Питер», 2019. — С. 560. — ISBN 978-5-4461-0952-4.
  • Бэнкс Алекс, Порселло Ева. GraphQL: язык запросов для современных веб-приложений. — СПб.: «Питер», 2019. — С. 240. — ISBN 978-5-4461-1143-5.
  • Бэнкс Алекс, Порселло Ева. React и Redux: функциональная веб-разработка. — СПб.: «Питер», 2018. — С. 336. — ISBN 978-5-4461-0668-4.
  • Томас Марк Тиленс. React в действии. — СПб.: «Питер», 2019. — С. 368. — ISBN 978-5-4461-0999-9.
  • Кирупа Чиннатамби. Изучаем React. — СПб.: «Питер», 2019. — С. 368. — ISBN 978-5-04-098028-4.

Примечания[править | править код]

  1. 18.2.0 (June 14, 2022)
  2. npmjs
  3. React v16.0
  4. Change license and remove references to PATENTS
  5. React - A JavaScript library for building user interfaces. React. Дата обращения: 7 апреля 2018. Архивировано 19 июля 2018 года.
  6. Krill, Paul React: Making faster, smoother UIs for data-driven Web apps. InfoWorld (15 мая 2014). Дата обращения: 24 мая 2018. Архивировано 12 июня 2018 года.
  7. Hemel, Zef Facebook's React JavaScript User Interfaces Library Receives Mixed Reviews. InfoQ (3 июня 2013). Дата обращения: 24 мая 2018. Архивировано 12 июня 2018 года.
  8. Dawson, Chris JavaScript’s History and How it Led To ReactJS. The New Stack (25 июля 2014). Дата обращения: 24 мая 2018. Архивировано 12 июня 2018 года.
  9. React (JS Library): How was the idea to develop React conceived and how many people worked on developing it and implementing it at Facebook? Quora.
  10. Pete Hunt at TXJS. Дата обращения: 24 мая 2018. Архивировано 31 июля 2017 года.
  11. Frederic Lardinois (2017-04-18). "Facebook announces React Fiber, a rewrite of its React framework". TechCrunch. Архивировано из оригинала 14 июня 2018. Дата обращения: 19 апреля 2017. {{cite news}}: Указан более чем один параметр |accessdate= and |access-date= (справка)
  12. React Fiber Architecture. Github. Дата обращения: 19 апреля 2017. Архивировано 10 мая 2018 года.
  13. React Without JSX - React (англ.). reactjs.org. Дата обращения: 19 июля 2018. Архивировано 19 июля 2018 года.
  14. Краткий обзор хуков – React. ru.reactjs.org. Дата обращения: 5 октября 2019. Архивировано 12 октября 2019 года.
  15. Создание пользовательских хуков – React. ru.reactjs.org. Дата обращения: 5 октября 2019. Архивировано 5 июня 2019 года.