React

React был создан Джорданом Валке, разработчиком программного обеспечения из Facebook. На него оказал влияние XHP — компонентный HTML-фреймворк для PHP^[9]. Впервые React использовался в новостной ленте Facebook в 2011 году и позже в ленте Instagram в 2012 году. Исходный код 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-функции. Такой механизм называют «свойства вниз, события наверх».

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

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

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

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

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

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

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

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