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

Что такое пропсы

  • автор:

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

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 студентов

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

Пропсы и декали в геймдеве

Пропсы и декали в геймдеве

Полнота погружения пользователя в геймплей во многом зависит от детальной проработки игрового окружения. Чтобы создать иллюзию большого, впечатляющего и реалистичного мира, дизайнеры уровней используют самые разные элементы структурной геометрии, проще говоря “пропсы” и “декали”. Создание деталей игрового окружения — не менее важная задача, чем дизайн уровней, написание сценария, звука и кода.

В этой статье преподаватели Высшей школы бизнес-информатики НИУ ВШЭ, профессиональные левел-дизайнеры и авторы образовательных программ “Менеджмент игровых проектов” и “Основы создания игр”, поделятся опытом создания атмосферных уровней и расскажут, как правильно расставлять акценты на локации.

Игровое окружение: пропсы и декали в геймдеве

Какие бывают пропсы

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

  • большие — автомобили, деревья, ограждения, павильоны;
  • средние — фонари, мусорные контейнеры, рекламные баннеры, уличная и домашняя мебель;
  • малые — крошечные детали экстерьера и интерьера (книги, камни, трава, листья).

Как использовать пропсы и декали

На «необработанную» структурную геометрию накладываются пропсы различных габаритов. Чтобы у игрока не возникло ощущения “обмана”, при ближайшем рассмотрении объектов должно четко читаться количество полигонов, текстура, комплексность и качество материалов. Это особенно важно для объектов на первом плане.

Игровое окружение: пропсы и декали в геймдеве

Не меньшую роль в создании реалистичной картинки играют декали. Эти специальные изображения накладываются на поверхности, создавая на них различные эффекты. Например, можно поместить на стену декаль с потеками, трещинами и граффити. Добавить к дому изображения окон, вентиляционных люков и рекламных объявлений. И, наконец, просто создать реалистичное дорожное полотно с разметкой, лужами, решетками ливневок и мусором на обочине.

Как создаются детали игрового окружения

  • Процесс подбора пропсов и декалей начинается с поиска референсов, соответствующих структурной геометрии и стилистике игры.
  • Затем создаются низкополигональные (сильно упрощенные) 3D-модели, воспроизводящие форму будущих пропсов, а также задаются их нормали (векторы, отвечающие за положение теней).
  • Для улучшения визуального качества модели применяется их триангулирование и сглаживание.
  • Завершаются работы “разверткой” модели для наложения на нее текстурной карты, а также выделения всех необходимых деталей.
  • Готовая высокополигональная HP-модель экспортируется в игровой движок.

Как правило, игровые объекты (особенно крупные) компонуются из нескольких готовых моделей. Если на high-poly моделях должны присутствовать более мелкие детали (узоры, сколы, трещины), используется технология скульптинга, основанная на принципах классической лепки.

Игровое окружение: пропсы и декали в геймдеве

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

Где научиться создавать реалистичное окружение в играх

Узнать подробнее, как создаются детали игрового окружения можно, пройдя обучение по программам “Основы создания игр” и “Менеджмент игровых проектов” в ВШБИ НИУ ВШЭ. Вы освоите навыки проработки реалистичного игрового мира, который необходим для создания уникальной атмосферы в игре. А помогут вам в этом профессиональные разработчики, за плечами который не один успешный продукт!

Игровое окружение: пропсы и декали в геймдеве

Еще больше информации вы найдете на канале МИП ВШБИ на YouTube. Подписывайтесь и не пропускайте свежие записи с открытых мероприятий ВШБИ НИУ ВШЭ.

Как использовать пропсы для передачи данных дочерним компонентам в 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

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

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