Что такое пропс в программировании
Перейти к содержимому

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

  • автор:

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

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:

    METANIT.COM        

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

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

Свойства Props в React

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

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

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

class Hello extends React.Component < render() < return 

Имя:

Возраст:

; > > Hello.defaultProps = ;

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

function Hello(props) < return 

Имя:

Возраст:

; > Hello.defaultProps = ;

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

    METANIT.COM        

Свойства по умолчанию Props defaultProps в компонентах React

Обновление props

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

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

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

Понятие props во Vue. Что это и зачем это нужно.

Следующее понятие, с которым придется столкнуться при работе с компонентами Vue — это понятие props.

Давайте подробнее остановимся на этом понятии и разберемся, что же такое props и для чего это нужно.

Что такое props во Vue?

props vue

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

Здесь важно понимать, что обратная связь с помощью props невозможна. Мы не можем передавать данные с помощью props из дочернего элемента к родительскому. Props нужны только для приема свойств в дочернем компоненте.

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

Что собой представляют props?

Props — это специальный блок в компоненте, который содержит в себе набор ключей.

Например, это может выглядеть вот так:

export default  
name: "TestComponent.vue",

components: <>,

props:
title: String,

likes: Number

>,

data()
return
text: '

Заголовок

Абзац

'

>

>,

created() <>,

methods: <>,

computed: <>

>

Т.е. в нашем компоненте появляется блок с одноименным названием props, который содержит возможные ключи, которые может принимать компонент.

Существует более одного способа, как можно создать props в компоненте, но пока важно понимать, что это просто набор ключей.

Благодаря props мы как бы говорим, какой у нас является компонент, какие у него могут быть свойства.

Примеры props

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

Props — это что-то вроде атрибутов html элементов.

Главным их преимуществом является то, что с их помощью мы можем программировать наши дочерние компоненты из родительских компонентов.

Например, мы создали компонент кнопки и с помощью props мы можем указать в родительском компоненте ее размер, ширину, высоту и другое оформление этой кнопки. Используя один и тот же компонент, мы меняем его внешний вид из родительского компонента.

Также props являются подсказками для программистов, посмотрев на них, мы можем примерно представить каким является компонент и что он может делать. Какие входные данные мы можем в него передать и как он может на них отреагировать.

Если вы будете работать с разными Vue библиотеками, то у каждого компонента, который можно использовать, у него могут быть props. Их мы можем увидеть в документации. Это что-то вроде интерфейса для взаимодействия с компонентом.

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

Вот такое небольшое вступление о том, что такое props и зачем они нужны. Давайте будем приступать к практике и посмотрим, как уже на практике можно создавать эти props и работать с ними.

Props — JS: React

Компонент Card , который мы писали ранее, на практике бесполезен, так как не позволяет поменять тексты. А создавать на каждый конкретный блок Card свой собственный компонент — не самая хорошая идея. Это не говоря о том, что чаще всего такое просто невозможно, ведь данные подставляются динамически.

Передавать данные в компоненты можно, и делается это с помощью пропсов (props):

Как видно, снаружи пропсы передаются как атрибуты в HTML, которые внутри компонента доступны из объекта props . Причём такая передача входных данных для вас уже должна быть не в новинку. Встроенные компоненты точно так же принимают на вход пропсы, такие как className и другие.

const vdom = ( div className="row"> div className="col-6"> HelloMessage name="Kate" /> div> div className="col-6"> HelloMessage name="Mark" /> div> div> ); 

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

Оператор расширения

Работая с пропсами, нередко приходится передавать множество параметров, либо эти параметры присутствуют в коде в виде объекта. В таком случае можно упростить передачу, используя оператор расширения (spread-оператор).

const params =  className: 'row', title: 'name', >; const name = 'Eva'; const vdom = div id="container" . params>> Hello, name> div>; 

Код выше эквивалентен следующему примеру:

const name = 'Eva'; const vdom = div id="container" className="row" title="name"> Hello, name> div>; 

Пропсы по умолчанию

Другая задача, с которой сталкиваются разработчики — установка значений по умолчанию для пропсов (для случаев, когда какие-то пропсы не переданы). Проще всего устанавливать их прямо внутри функции render , используя такой подход:

const title = this.props.title || 'hi!'; 

Это сработает, но потенциально может привести к проблемам производительности (в первую очередь). Тема производительности будет рассмотрена в одном из последних уроков.

В React предусмотрен способ устанавливать значения пропсов по умолчанию. Пример:

class Header extends React.Component  render()  const  text > = this.props; return ( h1>text>h1> ); > > Header.defaultProps =  

Открыть доступ

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

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

Наши выпускники работают в компаниях:

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

Добавить комментарий

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