React
В другом языковом разделе есть более полная статья React (JavaScript library) (англ.). |
React (иногда React.js или ReactJS) — JavaScript-библиотека[4] с открытым исходным кодом для разработки пользовательских интерфейсов.
React | |
---|---|
![]() | |
Тип | веб-фреймворк, библиотека функций и библиотека JavaScript |
Автор | Джордан Валке (англ. Jordan Walke) |
Разработчики | Meta Platforms, Harshil Patel[вд], Себастиан Маркбоге[вд], Даниил Абрамов[вд], Рэйчел Наборс[вд] и Эндрю Кларк[вд] |
Написана на | JavaScript |
Операционная система | кроссплатформенность |
Первый выпуск | 29 мая 2013 |
Последняя версия | |
Репозиторий | github.com/facebook/react |
Состояние | Актуален |
Лицензия | лицензия MIT[2][3] |
Сайт | react.dev (англ.) |
![]() |
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) (англ.). |