Справочник терминов React

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

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

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

ES6, ES2015, ES2016 и т. д.

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

Компиляторы

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

Бэндлеры

Бэндлеры принимают код JavaScript и CSS, написанный как отдельные модули (часто сотни из них), и объединяют их в несколько файлов, лучше оптимизированных для браузеров. Некоторые бэндлеры, обычно используемые в приложениях React, включают Webpack и Browserify.

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

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

CDN

CDN расшифровывается как Content Delivery Network. CDN доставляют кэшированный, статический контент с сети серверов по всему миру.

JSX

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

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

const name = 'Clementine';
ReactDOM.render(
  <h1 className="hello">My name is {name}!</h1>,
  document.getElementById('root')
);

Элементы

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

const element = <h1>Hello, world</h1>;

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

Компоненты

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

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

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

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Компоненты могут быть разбиты на отдельные функциональные части и использоваться внутри других компонентов. Компоненты могут возвращать другие компоненты, массивы, строки и числа. Хорошее правило — если какая-то часть вашего пользовательского интерфейса используется несколько раз (кнопка, панель, аватар) или достаточно сложна сама по себе (приложение, лента новостей, комментарий), это хороший кандидат на многократно используемый компонент. Имена компонентов также всегда должны начинаться с большой буквы (<Wrapper/> не <wrapper/>). См. данную документацию для получения дополнительной информации об отображении компонентов.

props

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

Помните, что props — только для чтения. Их не следует изменять никоим образом:

// Wrong!
props.number = 42;

Если вам нужно изменить какое-либо значение в ответ на ввод пользователя или ответ сети, используйте state вместо этого.

props.children

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

<Welcome>Hello world!</Welcome>

Строка Hello world! доступна в 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 (монтирование), когда компонент обновляется и когда компонент размонтируется или удаляется из DOM.

Управляемые vs. Неуправляемые компоненты

React предлагает два разных подхода к работе с полями ввода.

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

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

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

Ключи

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

Ключи должны быть уникальными только среди элементов-потомков в одном массиве. Они не должны быть уникальными для всего приложения или даже для отдельного компонента.

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

Ссылочные значения

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

Используйте ссылочные значения экономно. Если вы часто используете ссылочные значения для «выполнения действий» в приложении, постарайтесь лучше разобраться с потоком данных сверху вниз.

События

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

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

Воссоединение

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