Одностраничное приложение — это приложение, которое состоит из единственной HTML-страницы и прочих ресурсов (таких как JavaScript и CSS), необходимых для успешной работы. Любое взаимодействие с главной или последующими ей страницами не требует контакта с сервером, что значит — страница не требует перезагрузки.
\nХоть React и позволяет создавать одностраничные приложения, это совсем не обязательно. React можно использовать для совершенствования небольших частей уже существующих сайтов, чтобы придать дополнительную интерактивность. Код, написанный в React, может мирно сосуществовать с разметкой отрендеренной на сервере с помощью PHP, или с любыми другими фронтенд-библиотеками. По сути, именно так React и используется в Facebook.
\nВсе эти акронимы относятся к самым последним версиям спецификации стандарта ECMAScript, реализацией которого является язык программирования JavaScript. Версия ES6 (также известная как ES2015) включает много дополнений к предыдущим версиям: стрелочные функции, классы, шаблонные строки, ключевые слова let и const. Более подробно о конкретных версиях вы можете узнать тут.
Компилятор JavaScript принимает на вход JavaScript код, преобразует его и возвращает в изменённом формате. Самый известный случай использования — преобразование синтаксиса ES6 для поддержки в старых браузерах. При работе с React чаще всего используется Babel
\nБандлеры берут отдельные модули JavaScript и CSS и соединяют их в меньшее количество файлов, которые оптимизированы под браузеры. В работе с React чаще всего используются Webpack и Browserify.
\nМенеджер пакетов — это инструмент, позволяющий управлять зависимостями в вашем проекте. npm и Yarn — менеджеры пакетов наиболее используемые в приложениях React. Оба являются клиентами реестра пакетов npm.
\nСеть доставки содержимого (англ. Content Delivery Network, CDN) — это сетевая инфраструктура, распространяющая кешированный, статический контент через сеть серверов по всему миру.
\nJSX — расширение синтаксиса JavaScript. Этот синтаксис выглядит как язык шаблонов, но наделён всеми языковыми возможностями JavaScript. В результате компиляции JSX и вызова React.createElement() возникают простые объекты — «React-элементы». Чтобы ознакомиться с введением в JSX, обратитесь к соответствующему разделу документации, а более подробную информацию про JSX вы можете найти здесь.
React DOM использует стиль именования camelCase для свойств вместо обычных имён HTML-атрибутов. Например, в JSX атрибут tabindex станет tabIndex. В то время как атрибут class записывается как className, поскольку слово class уже зарезервировано в JavaScript:
const name = 'Алиса';\nReactDOM.render(\n <h1 className=\"hello\">Меня зовут {name}!</h1>,\n document.getElementById('root')\n);React-элементы — это составляющие блоки React-приложений. Их можно перепутать с более известной концепцией «компонентов», но в отличие от компонента, элемент описывает то, что вы хотите увидеть на экране. React-элементы иммутабельны.
\nconst element = <h1>Привет, мир</h1>;Обычно, элементы не используются напрямую, а возвращаются компонентами.
\nReact-компоненты — это маленькие, повторно используемые части кода, которые возвращают React-элементы для отображения на странице.\nСамый простой React-компонент — это простая функция JavaScript, которая возвращает элементы React:
\nfunction Welcome(props) {\n return <h1>Привет, {props.name}</h1>;\n}Компоненты могут быть классами ES6:
\nclass Welcome extends React.Component {\n render() {\n return <h1>Привет, {this.props.name}</h1>;\n }\n}Компоненты можно разбить на отдельные части в зависимости от выполняемой функции и использовать внутри других компонентов. Компоненты могут возвращать другие компоненты, массивы, строки и числа. Если какая-то часть интерфейса повторяется многократно (Button, Panel, Avatar) или сама по себе достаточно сложная (App, FeedStory, Comment), имеет смысл вынести её в независимый компонент. Имена компонентов всегда должны начинаться с заглавной буквы (<Wrapper/>, а не <wrapper/>). За более детальной информацией о рендеринге компонентов обратитесь к соответствующему разделу документации.
props props (пропсы) — это входные данные React-компонентов, передаваемые от родительского компонента дочернему компоненту.
Помните, props предназначены только для чтения. Ни в каком случае их не следует изменять:
// Неправильно!\nprops.number = 42;Если вам нужно поменять значение в ответ на пользовательский ввод или ответ сервера, используйте state (состояние).
props.children В любом компоненте доступны props.children. Это контент между открывающим и закрывающим тегом компонента. Например:
<Welcome>Привет, мир!</Welcome>Строка Привет, мир! доступна в props.children в компоненте Welcome:
function Welcome(props) {\n return <p>{props.children}</p>;\n}Для классовых компонентов используйте this.props.children:
class Welcome extends React.Component {\n render() {\n return <p>{this.props.children}</p>;\n }\n}state Компонент нуждается в state, когда данные в нём со временем изменяются. Например, компоненту Checkbox может понадобиться состояние isChecked, а компоненту NewsFeed необходимо отслеживать посты при помощи состояния fetchedPosts.
Самая большая разница между state и props состоит в том, что props передаются от родителя потомку, а state управляется самим компонентом. Компонент не может изменять props, но может изменять state.
Для каждой отдельной части изменяемых данных должен существовать только один компонент, который «управляет» изменением состояния. Не пытайтесь синхронизировать состояния двух разных компонентов. Вместо этого поднимите оба этих состояния до ближайшего компонента-родителя и передайте через пропсы необходимым дочерним компонентам.
\nМетоды жизненного цикла — это настраиваемые функции, которые выполняются на различных этапах жизни компонента. Существуют специальные методы для первоначального рендеринга компонента в DOM (монтирование), его обновления, размонтирования и удаления.
\nВ React существует два различных подхода для управления формами.
\nЭлемент формы input, управляемый React — это управляемый компонент. Когда пользователь вводит данные в управляемый компонент, обработчик события изменений приходит в действие, и ваш код определяет допустим ли ввод (повторно рендерясь с обновлённым значением). Если повторный рендеринг не происходит, элемент формы остаётся без изменений.
\nНеуправляемый компонент работает как обычный элемент формы вне React. Когда пользователь вводит данные в поле формы (поле ввода, выпадающий список и т. д.), обновлённая информация отображается без помощи React. Однако, это также значит, что некоторые значения не могут быть применены.
\nВ большинстве случаев вам следует использовать управляемые компоненты.
\n«Ключ» — это специальный строковый атрибут, который нужно указывать при создании списка элементов. Ключи помогают React определять, какие элементы были изменены, добавлены или удалены. Их необходимо указывать, чтобы React мог сопоставлять элементы массива с течением времени.
\nКлючи внутри массива должны быть уникальными только среди своих соседних элементов. Им не нужно быть уникальными во всём приложении или даже в общем компоненте.
\nНе используйте что-либо наподобие Math.random() как ключи. Необходимо создавать для ключей «стабильные идентификаторы» при повторных рендерингах, чтобы React мог определить когда элементы добавлены, удалены или переупорядочены. В идеале, ключи должны соответствовать уникальному и постоянному идентификатору поступающему из ваших данных, например post.id.
React поддерживает особый атрибут, который можно прикрепить к любому компоненту. Атрибут ref может быть объектом, созданным при помощи функции React.createRef() или колбэком, либо же строкой (устаревший API). Когда в роли атрибута ref выступает колбэк, функция получает DOM-элемент, лежащий в основе компонента, или экземпляр класса (в зависимости от типа элемента) в качестве аргумента. Это позволяет вам иметь прямой доступ к элементу DOM или экземпляру компонента.
Используйте рефы в исключительных случаях. Если вы часто обращаетесь к рефам за помощью, ознакомьтесь с нисходящим потоком данных.
\nОбработка событий в React-элементах имеет некоторые синтаксические особенности:
\nКогда пропсы или состояние компонента изменяются, React сравнивает только что возвращённый и предыдущий отрендеренные элементы, и решает нужно ли обновлять DOM. Этот процесс называется «согласование» (reconciliation).
","frontmatter":{"title":"Словарь терминов React","next":null,"prev":null},"fields":{"path":"content/docs/reference-glossary.md","slug":"docs/glossary.html"}}},"pageContext":{"slug":"docs/glossary.html"}},"staticQueryHashes":[]}