React

Материал из Википедии — свободной энциклопедии
Перейти к навигации Перейти к поиску
React
Логотип программы React
Тип веб-фреймворк, библиотека функций и библиотека JavaScript
Автор Джордан Валке (англ. Jordan Walke)
Разработчик Meta Platforms, Jordan Walke[d], Sebastian Markbåge[d], Dan Abramov[d], Rachel Nabors[d] и Andrew Clark[d]
Написана на JavaScript
Операционная система кроссплатформенность
Первый выпуск 29 мая 2013
Последняя версия
Состояние Актуален
Лицензия лицензия MIT[2][3]
Сайт reactjs.org​ (англ.)
ar.reactjs.org​ (ар.)
ru.reactjs.org​ (рус.)

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

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

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

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

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

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

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

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

Ниже приведён пример использования 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 браузера. Таким образом программист может работать со страницей, считая, что она обновляется вся, но библиотека самостоятельно решает, какие компоненты страницы необходимо обновить.

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

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

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

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

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

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

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

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

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

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

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

  • Мардан Азат. 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. React v16.0
  3. Change license and remove references to PATENTS
  4. React - A JavaScript library for building user interfaces.. React. Дата обращения: 7 апреля 2018. Архивировано 19 июля 2018 года.
  5. Krill, Paul React: Making faster, smoother UIs for data-driven Web apps. InfoWorld (May 15, 2014). Дата обращения: 24 мая 2018. Архивировано 12 июня 2018 года.
  6. Hemel, Zef Facebook's React JavaScript User Interfaces Library Receives Mixed Reviews. InfoQ (June 3, 2013). Дата обращения: 24 мая 2018. Архивировано 12 июня 2018 года.
  7. Dawson, Chris JavaScript’s History and How it Led To ReactJS. The New Stack (July 25, 2014). Дата обращения: 24 мая 2018. Архивировано 12 июня 2018 года.
  8. 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.
  9. Pete Hunt at TXJS. Дата обращения: 24 мая 2018. Архивировано 31 июля 2017 года.
  10. Frederic Lardinois. Facebook announces React Fiber, a rewrite of its React framework, TechCrunch (18 April 2017). Архивировано 14 июня 2018 года. Дата обращения 24 мая 2018.
  11. React Fiber Architecture. Github. Дата обращения: 19 апреля 2017. Архивировано 10 мая 2018 года.
  12. React Without JSX - React (англ.). reactjs.org. Дата обращения: 19 июля 2018. Архивировано 19 июля 2018 года.
  13. Краткий обзор хуков – React. ru.reactjs.org. Дата обращения: 5 октября 2019. Архивировано 12 октября 2019 года.
  14. Создание пользовательских хуков – React. ru.reactjs.org. Дата обращения: 5 октября 2019. Архивировано 5 июня 2019 года.