React
![]() | В другом языковом разделе есть более полная статья React (JavaScript library) (англ.). |
React | |
---|---|
![]() | |
Тип | веб-фреймворк, библиотека функций и библиотека JavaScript |
Автор | Джордан Валке (англ. Jordan Walke) |
Разработчики | Meta Platforms, Harshil Patel[вд], Себастиан Маркбоге[вд], Даниил Абрамов[вд], Рэйчел Наборс[вд] и Эндрю Кларк[вд] |
Написана на | JavaScript |
Операционная система | кроссплатформенность |
Первый выпуск | 29 мая 2013 |
Последняя версия | |
Репозиторий | github.com/facebook/react |
Состояние | Актуален |
Лицензия | лицензия MIT[2][3] |
Сайт | react.dev (англ.) |
![]() |
React (иногда React.js или ReactJS) — JavaScript-библиотека[4] с открытым исходным кодом для разработки пользовательских интерфейсов.
React разрабатывается и поддерживается Facebook, Instagram и сообществом отдельных разработчиков и корпораций[5][6][7].
React может использоваться для разработки одностраничных и мобильных приложений. Его цель — предоставить высокую скорость разработки, простоту и масштабируемость. В качестве библиотеки для разработки пользовательских интерфейсов React часто используется с другими библиотеками, такими как MobX, Redux и GraphQL.
История разработки
[править | править код]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 браузера. Таким образом программист может работать со страницей, считая, что она обновляется вся, но библиотека самостоятельно решает, какие компоненты страницы необходимо обновить.
Redux
[править | править код]Часто React используют в связке с Redux для управления состояниями компонентов
JSX
[править | править код]JavaScript XML (JSX) — это расширение синтаксиса JavaScript, которое позволяет использовать HTML-подобный синтаксис для описания структуры интерфейса. Как правило, компоненты написаны с использованием JSX, но также есть возможность использования обычного JavaScript[12]. JSX напоминает другой язык, созданный в компании Фейсбук для расширения PHP, XHP[англ.].
Методы жизненного цикла
[править | править код]Методы жизненного цикла позволяют разработчику запускать код на разных стадиях жизненного цикла компонента. Например:
shouldComponentUpdate
— позволяет предотвратить перерисовку компонента с помощью возвратаfalse
, если перерисовка не нужна.componentDidMount
— вызывается после первой отрисовки компонента. Часто используется для запуска получения данных с удалённого источника через API.componentWillUnmount
— вызывается во время демонтирования компонента. Часто используется для того чтобы отписаться от наблюдения за событиями.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.
Примечания
[править | править код]- ↑ https://registry.npmjs.com/react
- ↑ React v16.0
- ↑ Change license and remove references to PATENTS
- ↑ React - A JavaScript library for building user interfaces. React. Дата обращения: 7 апреля 2018. Архивировано 19 июля 2018 года.
- ↑ Krill, Paul React: Making faster, smoother UIs for data-driven Web apps . InfoWorld (15 мая 2014). Дата обращения: 24 мая 2018. Архивировано 12 июня 2018 года.
- ↑ Hemel, Zef Facebook's React JavaScript User Interfaces Library Receives Mixed Reviews . InfoQ (3 июня 2013). Дата обращения: 24 мая 2018. Архивировано 12 июня 2018 года.
- ↑ Dawson, Chris JavaScript’s History and How it Led To ReactJS . The New Stack (25 июля 2014). Дата обращения: 24 мая 2018. Архивировано 12 июня 2018 года.
- ↑ 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.
- ↑ Pete Hunt at TXJS . Дата обращения: 24 мая 2018. Архивировано 31 июля 2017 года.
- ↑ 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=
(справка) - ↑ React Fiber Architecture . Github. Дата обращения: 19 апреля 2017. Архивировано 10 мая 2018 года.
- ↑ React Without JSX - React (англ.). reactjs.org. Дата обращения: 19 июля 2018. Архивировано 19 июля 2018 года.
- ↑ Краткий обзор хуков – React . ru.reactjs.org. Дата обращения: 5 октября 2019. Архивировано 12 октября 2019 года.
- ↑ Создание пользовательских хуков – React . ru.reactjs.org. Дата обращения: 5 октября 2019. Архивировано 5 июня 2019 года.
![]() | В другом языковом разделе есть более полная статья React (JavaScript library) (англ.). |