Что такое пропс в программировании

Что такое пропс в программировании

Props представляет коллекцию значений, которые ассоциированы с компонентом. Эти значения позволяют создавать динамические компоненты, которые не зависят от жестко закодированных статических данных.

function Hello(props) < return 
Имя: 
Возраст:
 ; >

Параметр props, который передается в функцию компонента, инкапсулирует свойства объекта. В частности, свойство name и age . При рендеринге мы можем создать набор компонентов Hello, но передать в них разные данные для name и age. И таким образом, получим набор однотипной разметки html, наполненной разными данными.

class Hello extends React.Component < render() < return 
Имя: 
Возраст:
 ; > >

Класс компонента также извне получает объект свойств, который доступен через this.props .

Использование стрелочных функций (arrow functions):

const Hello = (props) => < const = props; return( 
Имя: 
Возраст:
 ); >

Используем компонент Hello:

При рендеринге React передает значения атрибутов в виде единого объекта «props». То есть значение из атрибута name=»Tom» перейдет в свойство props.name .

В итоге будет создана следующая страница:

Значения по умолчанию

Мы можем определить для свойств значения по умолчанию на тот случай, если их значения не передаются извне.

Если мы применяем классы, то для установки значений применяется статическое свойство defaultProps :

class Hello extends React.Component < render() < return 
Имя: 
Возраст:
 ; > > Hello.defaultProps = ;

При функциональном определении компонента также применяется свойство defaultProps :

function Hello(props) < return 
Имя: 
Возраст:
 ; > Hello.defaultProps = ;

И в любом из этих случаев, если мы не определим какие-то свойства для компонента, то они будут брать значения из значений по умолчанию:

Обновление props

Сам this.props представляет неизменяемый объект, который предназначен только для чтения. Поэтому не следует его изменять, например:

class Hello extends React.Component < render() < this.props.name = "Tom"; return Привет, ; > >

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

Что такое пропы в Реакте?

Пропы (props) — это свойства, которые передаются в компонент. Пропы были созданы, чтобы обеспечить передачу данных от родительского компонента к дочернему. Пропы всегда неизменны в пределах компонента, получившего их. Если значения пропов изменились (поступили новые пропы из родительского компонента), то происходит перерисовка компонента.

Пропы передаются в компонент по аналогии с атрибутами в HTML-тегах:

И используются в классовом компоненте (в виде объекта со свойствами, имена которых совпадают с именами атрибутов выше):

class User extends React.Component < render() < const < name, surname >= this.props; return Пользователя зовут ; > >

В функциональном компоненте также можно работать с пропами, они передаются в него в качестве входных данных. Только обращение к ним идет уже не через this.props , а просто через переменную props :

function User(props) < const < name, surname >= props; return Пользователя зовут ; >

Примечание: Чтобы инициализировать пропы, не обязательно реализовывать конструктор, так как их инициализация уже предусмотрена в классе React.Component . Однако если в конструкторе предусмотрен другой код (например, установка исходного состояния или привязка обработчиков), то обязательно нужно вызвать super(props) внутри конструктора, чтобы сработал код конструктора из класса React.Component .

Поделиться статьей «Что такое пропы в Реакте?»

Словарь терминов 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.

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

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 ), имеет смысл вынести её в независимый компонент. Имена компонентов всегда должны начинаться с заглавной буквы ( , а не ). За более детальной информацией о рендеринге компонентов обратитесь к соответствующему разделу документации.

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

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

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

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

В любом компоненте доступны 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 , когда данные в нём со временем изменяются. Например, компоненту 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).

Как использовать пропсы для передачи данных дочерним компонентам в Vue 3

По традиции делимся полезными переводными материалами во frontend-разработке. В этот раз frontend-специалист SimbirSoft Никита сделал выбор в пользу материалов Nwose Lotanna, опубликованных на сайте blog.logrocket.com. С разрешения автора мы перевели статью, в которой он рассказывать о способах использования пропсов для передачи данных дочерним компонентам в Vue 3.

Примечание автора: Данная статья последний раз была обновлена 15 декабря 2022, чтобы отразить обновления, добавленные в Vue 3.

Пропсы — это важная фича в Vue для управления родительскими и дочерними компонентами, однако взаимодействие с ними может быть довольно мудреным. В этой статье мы изучим, как передавать данные из родительского компонента в дочерний с использованием пропсов в Vue 3. Весь код из этой статьи вы можете найти на GitHub. Что ж, начнем!

Содержание:

• Перед началом
• Что такое пропсы в Vue?
• Зачем мне использовать пропсы?
• Определение данных в родительском компоненте
• Получение пропсов в Vue
• Регистрация пропсов в Vue
• Использование пропсов в Vue
• Строго типизированные пропсы

Перед началом

Эта статья предназначена для разработчиков любого уровня, включая новичков.

Чтобы отслеживать то, что будет происходить в этой статье, вам понадобится установленный Node.js версии не ниже 16.х. Вы можете проверить установленную версию в терминале, выполнив команду:

Кроме того, вам понадобится текстовый редактор. Мы настоятельно рекомендуем VS Code. И наконец, вам необходим глобально установленный Vue 3. На момент написания статьи, актуальной является третья версия.

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

Что такое пропсы в Vue?

Пропс в Vue — это кастомный атрибут, который вы можете зарегистрировать в любом компоненте. Вы определяете данные в родительском компоненте и присваиваете им определенное значение. Затем переходите в дочерний компонент, которому эти данные необходимы, и передаете значение атрибуту props. В результате данные становятся свойством дочернего компонента.

В компоненте, реализованном на Composition API, то есть с использованием , синтаксис будет выглядеть следующим образом:

Для компонентов, реализованных с помощью Options API:

export default < props: ['title'], setup(props) < // setup() принимает пропсы в качестве первого аргумента console.log(props.title) >>

Чтобы получить доступ к этим данным динамически из любого компонента, которому они нужны, вы можете использовать корневой компонент App.vue как родительский, хранить в нем данные, а затем регистрировать пропсы.

Зачем мне использовать пропсы?

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

В данном случае это будет отличным решением, однако по мере масштабирования проекта и добавления все новых и новых компонентов, этот метод перестанет быть эффективным. Давайте убедимся в этом на примере стартового проекта, который вам нужно открыть с помощью VS Code. Откройте файл Test.vue и скопируйте в него код:

Создайте новый файл Test2.vue в папке Components и скопируйте в него код ниже:

Чтобы зарегистрировать новый компонент, который вы только что создали, откройте файл App.vue и скопируйте в него код:

В терминале VS Code запустите ваш проект локально, выполнив команду:

Результат в окне браузера должен быть следующим:

Вы заметите, что если вам понадобится создать еще 5 похожих компонентов, вы будете копировать данные в каждый компонент по отдельности. Однако существует возможность один раз объявить данные в родительском компоненте, а затем передавать их в каждый из дочерних компонентов с помощью пропсов.

Определение данных в родительском компоненте

В тот момент, когда вы выбрали корневой компонент в качестве родительского, вам в первую очередь необходимо определить объект с данными внутри него. Если вы продолжаете следить за тем, что мы делаем, откройте файл App.vue и скопируйте объект с данными в секцию .

Получение пропсов в Vue

После определения данных, перейдите в каждый из дочерних компонентов и удалите из них объекты data() вместе с их содержимым. Чтобы прокинуть пропсы в компонент, вы должны объявить пропсы, которые хотите получить, внутри каждого из компонентов. В каждом из Test -компонентов на месте объектов с данными, которые мы только что удалили, создайте новое свойство так, как показано ниже:

 export default 

Регистрация пропсов в Vue

Чтобы дать движку Vue понять, что у вас есть пропсы, которые вы динамически хотите передать в дочерние компоненты, вы должны сигнализировать об этом внутри родительского компонента. Сделать это можно в секции , как показано ниже:

В коде выше мы используем директиву v-bind , чтобы связать массив artists в родительском компоненте с пропсом artists , который находится в каждом из дочерних компонентов.

Если вы сделаете это без использования директивы, то никакого смысла в этом не будет. Будьте внимательны: ни компилятор Vue, ни ESLint не подсветят это как ошибку:

Поэтому так важно быть внимательным и помнить об использовании директивы v-bind для всех динамических связок.

Использование пропсов в Vue

После того как вы настроили пропсы в своем проекте Vue, вы можете использовать их внутри дочерних компонентов так, будто данные были объявлены внутри каждого из них. Это значит, что доступ к данным будет осуществляться с помощью this.artists .

Строго типизированные пропсы

При строгой типизации пропсов вы можете быть уверены, что дочерний компонент получит именно тот тип данных, который вам нужен. В стартовом проекте для созданных нами пропсов вы можете добавить условие, что в качестве пропсов могут быть переданы только массивы:

Как следствие, если вы попытаетесь передать пропсом неверный тип, например String , то в консоли появится сообщение об ошибке, которая укажет на несоответствие типов:

Заключение

В этой статье мы открыли для себя пропсы в Vue 3, выяснили, как они могут помочь соблюдать принцип DRY (не повторяйся) путем переиспользования объектов с данными. Мы также выяснили, как регистрировать и передавать пропсы внутри проекта Vue. Более подробную информацию о пропсах можно найти в официальной документации Vue. Удачи!

Спасибо за внимание! Надеемся, что этот перевод был полезен для вас.

Авторские материалы для разработчиков мы также публикуем в наших соцсетях – ВК и Telegram.

• Блог компании SimbirSoft
• Веб-разработка
• Программирование
• VueJS