Js prop: .prop() | jQuery API Documentation

@prop — Документация Tabris.js

Псевдоним для @property , за исключением того, что он имеет более «умные» параметры по умолчанию и другой сокращенный параметр. Обычно рекомендуется вместо @property для разработки пользовательских компонентов, но его поведение по умолчанию может быть неожиданным для новичков:

• Начальное значение не равно undefined , но зависит от типа (см. следующий раздел).
• Все значения будут автоматически преобразованы в ожидаемый тип (если это возможно).
• Свойство не может содержать простой объект, но простой объект может быть установлен, если его можно преобразовать в тип свойства.
• Если установлено значение null или undefined , свойство сбрасывается до исходного значения.
• Если установлено для объекта, любое событие изменения, инициированное этим объектом, вызовет также инициирование события изменения для этого свойства.
• Если свойство содержит массив и установлено в другой массив, равный неглубокому (имеющий ту же длину и записи), свойство сохранит текущее значение.
• При использовании в файле JavaScript (или если тип не может быть выведен во время выполнения в файле TypeScript), тип свойства должен быть указан через @prop(Class) или @prop({type: Class} ) , где Class также может быть Number , String или Boolean для представления примитивов. Без информации о типе будет напечатано предупреждение о свойстве, и все функции, специфичные для типа (преобразование, начальное значение, проверки типа), будут отключены.

Для получения подробной информации перейдите по ссылкам в таблице ниже.

@prop (без параметра)

В следующей таблице показано, чем @prop отличается в конфигурации по умолчанию от @property :

Опция	@свойство	@проп
тип	не установлено	не установлено
типGuard	не установлено	не установлено
по умолчанию	не установлено	зависит от типа*
Обнуляемый	правда	зависит от типа**
равно	«строгий»	«авто»
преобразовать	«выкл. »	«авто»
наблюдать	ложный	правда

*) По умолчанию '' (пустая строка) для строк, 0 для чисел, false для логических значений и

null для всех остальных типов. *) nullable равно false только для примитивных типов (число, логическое значение, строка и их подмножества).

@prop(type)

Сокращение для @prop({type: type}) .

Примеры:

 @prop(Цвет)
цвет: ColorValue;
/** @type {строка} */
@prop(строка) ул;
 

@prop(config)

Аналогично @prop , но позволяет переопределить значения по умолчанию, как и @property .

Понимание React Context и свойства (Prop) Drilling / Blogs / Perficient

Context — это метод передачи данных вниз по дереву компонентов без необходимости вручную передавать реквизиты, глобальную переменную или объект, необходимый для React Context, на каждом уровне. Рассмотрим дерево компонентов в нашем приложении, которое выглядит так:

Мы можем легко добавить состояние, простой объект JavaScript, используемый React, к нашим компонентам нижнего уровня и управлять нашими реквизитами ниже:

Что, если наши родственные компоненты также требуют, чтобы значения присутствовали в состоянии? Что мы будем делать тогда? Ну, это может быть достигнуто только путем «поднятия состояния». Итак, как нам поднять состояние? Вот как мы переместим состояние в его родительский компонент и отправим его в качестве реквизита:

Поднятие состояния вверх будет работать отлично, и теперь мы можем легко получить доступ к состояниям всех компонентов, упомянутых ниже. Мы также должны знать, что ожидание данных о состоянии является еще одним компонентом React Context. Обратите внимание на следующее:

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

Чтобы передать опоры от самого верхнего компонента, мы должны сделать что-то вроде этого:

Однако сверление опор само по себе может стать проблемой из-за повторяющегося кода. Итак, как лучше всего решить эту новую проблему? Мы можем сделать это с помощью контекстного интерфейса прикладного программирования (API). Архитектура потока Provider-Consumer будет работать над использованием Context API. Какова природа этого потока поставщик-потребитель? Мы разберем этот термин со следующей информацией:

Поставщик в контексте:

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

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

Потребитель в контексте:

Термин «потребитель» в контексте относится к тому, кто потребляет значения контекста. Он может получить значения, которые были переданы тому же поставщику.

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

Теперь, когда мы понимаем, как работает Context, мы рассмотрим примеры того, что такое сверление опоры и какие существуют альтернативы для решения проблемы сверления опоры. .

Для демонстрации бурения опор у нас есть три компонента:

• Пользователи
• Список пользователей
• Элемент пользователя

users.js

userslist.js

useritem. js

В примере выше, мы видим, что «ondelete». требуется компоненту «UserItem», и хотя эти значения не доступны напрямую в компоненте «UserItem», они должны проходить через компонент «UsersList», даже если этот компонент не требует их.

Это просто проблема со сверлением винта. Теперь давайте посмотрим, как мы можем исправить проблемы, используя «понятие контекста».

Context API для разрешения Prop сверление Issue

Как мы обсуждали ранее, Context следует потоку Provider-Consumer.

Давайте начнем с потока Provider и посмотрим, как мы можем предоставлять ценности с поддержкой Provider. Для построения и доставки значений через Context мы создадим один файл с именем «context/userContext.js».

userContext.js

Мы будем использовать «React.createContext» для создания контекста и сохранения его в переменной «UserContext», а затем использовать «UserContext.

Provider» для создания оболочки, которая будет доставлять значения для всех компонентов внутри этой оболочки.

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

Users.js

Мы обернули все компоненты, которым требуются значения из «UserContext» в «UserProvider» в этот компонент (который мы создали в разделе выше). Кроме того, мы представили только те значения в пропсах значений «UserProvider», которые должны присутствовать в Context и быть доступными для других компонентов, заключенных внутри него.

Свойства «onDelete» из компонента «UsersList» были удалены, поскольку теперь они могут быть доступны через Context.

 

UsersList.js

Свойство onDelete, которое мы отправили ранее, было удалено, поскольку оно не используется в этом компоненте.

UserItem.