Словарь терминов React

Одностраничное приложение

Одностраничное приложение — это приложение, которое состоит из единственной HTML-страницы и прочих ресурсов (таких как JavaScript и CSS), необходимых для успешной работы. Любое взаимодействие с главной или последующими ей страницами не требует контакта с сервером, что значит — страница не требует перезагрузки.

Хоть React и позволяет создавать одностраничные приложения, это совсем не обязательно. React можно использовать для совершенствования небольших частей уже существующих сайтов, чтобы придать дополнительную интерактивность. Код, написанный в React, может мирно сосуществовать с разметкой отрендеренной на сервере с помощью PHP, или с любыми другими фронтенд-библиотеками. По сути, именно так React и используется в Facebook.

ES6, ES2015, ES2016 и т. д.

Все эти акронимы относятся к самым последним версиям спецификации стандарта ECMAScript, реализацией которого является язык программирования JavaScript. Версия ES6 (также известная как ES2015) включает много дополнений к предыдущим версиям: стрелочные функции, классы, шаблонные строки, ключевые слова let и const. Более подробно о конкретных версиях вы можете узнать тут.

Компиляторы

Компилятор JavaScript принимает на вход JavaScript-код, преобразует его и возвращает в изменённом формате. Самый известный случай использования — преобразование синтаксиса ES6 для поддержки в старых браузерах. При работе с React чаще всего используется Babel

Бандлеры

Бандлеры берут отдельные модули JavaScript и CSS и соединяют их в меньшее количество файлов, которые оптимизированы под браузеры. В работе с React чаще всего используются Webpack и Browserify.

Менеджер пакетов

Менеджер пакетов — это инструмент, позволяющий управлять зависимостями в вашем проекте. npm и Yarn — менеджеры пакетов наиболее используемые в приложениях React. Оба являются клиентами реестра пакетов npm.

CDN

Сеть доставки содержимого (англ. Content Delivery Network, CDN) — это сетевая инфраструктура, распространяющая кешированный, статический контент через сеть серверов по всему миру.

JSX

JSX — расширение синтаксиса JavaScript. Этот синтаксис выглядит как язык шаблонов, но наделён всеми языковыми возможностями JavaScript. В результате компиляции JSX и вызова React.createElement() возникают простые объекты — «React-элементы». Чтобы ознакомиться с введением в JSX, обратитесь к соответствующему разделу документации, а более подробную информацию про JSX вы можете найти здесь.

React DOM использует стиль именования camelCase для свойств вместо обычных имён HTML-атрибутов. Например, в JSX-атрибут tabindex станет tabIndex. В то время как атрибут class записывается как className, поскольку слово class уже зарезервировано в JavaScript:

<h1 className="hello">Меня зовут Алиса!</h1>

Элементы

React-элементы — это составляющие блоки React-приложений. Их можно перепутать с более известной концепцией «компонентов», но в отличие от компонента, элемент описывает то, что вы хотите увидеть на экране. React-элементы иммутабельны.

const element = <h1>Привет, мир</h1>;

Обычно, элементы не используются напрямую, а возвращаются компонентами.

Компоненты

React-компоненты — это маленькие, повторно используемые части кода, которые возвращают React-элементы для отображения на странице. Самый простой React-компонент — это простая функция JavaScript, которая возвращает элементы React:

function Welcome(props) {
  return <h1>Привет, {props.name}</h1>;
}

Компоненты могут быть классами ES6:

class Welcome extends React.Component {
  render() {
    return <h1>Привет, {this.props.name}</h1>;
  }
}

Компоненты можно разбить на отдельные части в зависимости от выполняемой функции и использовать внутри других компонентов. Компоненты могут возвращать другие компоненты, массивы, строки и числа. Если какая-то часть интерфейса повторяется многократно (Button, Panel, Avatar) или сама по себе достаточно сложная (App, FeedStory, Comment), имеет смысл вынести её в независимый компонент. Имена компонентов всегда должны начинаться с заглавной буквы (<Wrapper/>, а не <wrapper/>). За более детальной информацией о рендеринге компонентов обратитесь к соответствующему разделу документации.

props

props (пропсы) — это входные данные React-компонентов, передаваемые от родительского компонента дочернему компоненту.

Помните, props предназначены только для чтения. Ни в каком случае их не следует изменять:

// Неправильно!
props.number = 42;

Если вам нужно поменять значение в ответ на пользовательский ввод или ответ сервера, используйте state (состояние).

props.children

В любом компоненте доступны props.children. Это контент между открывающим и закрывающим тегом компонента. Например:

<Welcome>Привет, мир!</Welcome>

Строка Привет, мир! доступна в props.children в компоненте Welcome:

function Welcome(props) {
  return <p>{props.children}</p>;
}

Для классовых компонентов используйте this.props.children:

class Welcome extends React.Component {
  render() {
    return <p>{this.props.children}</p>;
  }
}

state

Компонент нуждается в state, когда данные в нём со временем изменяются. Например, компоненту Checkbox может понадобиться состояние isChecked, а компоненту NewsFeed необходимо отслеживать посты при помощи состояния fetchedPosts.

Самая большая разница между state и props состоит в том, что props передаются от родителя потомку, а state управляется самим компонентом. Компонент не может изменять props, но может изменять state.

Для каждой отдельной части изменяемых данных должен существовать только один компонент, который «управляет» изменением состояния. Не пытайтесь синхронизировать состояния двух разных компонентов. Вместо этого поднимите оба этих состояния до ближайшего компонента-родителя и передайте через пропсы необходимым дочерним компонентам.

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

Методы жизненного цикла — это настраиваемые функции, которые выполняются на различных этапах жизни компонента. Существуют специальные методы для первоначального рендеринга компонента в DOM (монтирование), его обновления, размонтирования и удаления.

Управляемые и неуправляемые компоненты

В React существует два различных подхода для управления формами.

Элемент формы input, управляемый React — это управляемый компонент. Когда пользователь вводит данные в управляемый компонент, обработчик события изменений приходит в действие, и ваш код определяет допустим ли ввод (повторно рендерясь с обновлённым значением). Если повторный рендеринг не происходит, элемент формы остаётся без изменений.

Неуправляемый компонент работает как обычный элемент формы вне React. Когда пользователь вводит данные в поле формы (поле ввода, выпадающий список и т. д.), обновлённая информация отображается без помощи React. Однако, это также значит, что некоторые значения не могут быть применены.

В большинстве случаев вам следует использовать управляемые компоненты.

Ключи

«Ключ» — это специальный строковый атрибут, который нужно указывать при создании списка элементов. Ключи помогают React определять, какие элементы были изменены, добавлены или удалены. Их необходимо указывать, чтобы React мог сопоставлять элементы массива с течением времени.

Ключи внутри массива должны быть уникальными только среди своих соседних элементов. Им не нужно быть уникальными во всём приложении или даже в общем компоненте.

Не используйте что-либо наподобие Math.random() как ключи. Необходимо создавать для ключей «стабильные идентификаторы» при повторных рендерингах, чтобы React мог определить когда элементы добавлены, удалены или переупорядочены. В идеале, ключи должны соответствовать уникальному и постоянному идентификатору поступающему из ваших данных, например post.id.

Рефы

React поддерживает особый атрибут, который можно прикрепить к любому компоненту. Атрибут ref может быть объектом, созданным при помощи функции React.createRef() или колбэком, либо же строкой (устаревший API). Когда в роли атрибута ref выступает колбэк, функция получает DOM-элемент, лежащий в основе компонента, или экземпляр класса (в зависимости от типа элемента) в качестве аргумента. Это позволяет вам иметь прямой доступ к элементу DOM или экземпляру компонента.

Используйте рефы в исключительных случаях. Если вы часто обращаетесь к рефам за помощью, ознакомьтесь с нисходящим потоком данных.

События

Обработка событий в React-элементах имеет некоторые синтаксические особенности:

• Обработчики событий в React именуются в стиле camelCase вместо нижнего регистра.
• С JSX вы передаёте функцию как обработчик события вместо строки.

Согласование

Когда пропсы или состояние компонента изменяются, React сравнивает только что возвращённый и предыдущий отрендеренные элементы, и решает нужно ли обновлять DOM. Этот процесс называется «согласование» (reconciliation).