WikiSort.ru - Не сортированное

ПОИСК ПО САЙТУ | о проекте
React
Тип библиотека JavaScript
Автор Джордан Валке (англ. Jordan Walke)
Разработчик Facebook Inc.[d]
Написана на JavaScript
Операционная система кроссплатформенность
Первый выпуск март 2013
Последняя версия 16.8.2
Состояние Актуален
Лицензия лицензия MIT[1][2]
Сайт reactjs.org

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

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

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

История разработки

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

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

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

Пример использовании

Ниже приведен пример использования 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[11]. JSX напоминает другой язык, созданный в компании Фейсбук для расширения PHP, XHP .

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

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

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

Не только отрисовка HTML в браузере

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

Примечания

Данная страница на сайте WikiSort.ru содержит текст со страницы сайта "Википедия".

Если Вы хотите её отредактировать, то можете сделать это на странице редактирования в Википедии.

Если сделанные Вами правки не будут кем-нибудь удалены, то через несколько дней они появятся на сайте WikiSort.ru .



Текст в блоке "Читать" взят с сайта "Википедия" и доступен по лицензии Creative Commons Attribution-ShareAlike; в отдельных случаях могут действовать дополнительные условия.

Другой контент может иметь иную лицензию. Перед использованием материалов сайта WikiSort.ru внимательно изучите правила лицензирования конкретных элементов наполнения сайта.

2019-2025
WikiSort.ru - проект по пересортировке и дополнению контента Википедии