Подробный обзор React props.
Цели
[ ] Что такое React и компоненты?
[ ] сформулировать, что такое реквизит
[ ] обсудить важность реквизита в React
[ ] использовать свойства для передачи информации между функциональными компонентами
[ ] правильно передавать разные типы данных реквизита
[ ] Разрушение реквизита
Чтобы мы могли обсудить реквизиты React, мы должны сначала рассмотреть, что такое React.
Что такое React?
React — это JS-библиотека для создания пользовательского интерфейса. Это декларативный, компонентный и многоразовый. React позволяет программистам создавать сложные пользовательские интерфейсы из небольших и изолированных фрагментов кода, называемых «компонентами».
Что такое компоненты React?
- Компоненты React разбиты на части пользовательского интерфейса, которые являются независимыми и повторно используемыми фрагментами кода. Компоненты похожи на ванильные функции JS. Они принимают произвольные входные данные, называемые `props`, и возвращают React JSX с описанием того, что должно появиться на экране.
Что такое реквизит?
props— это способ передачи данных от родительского компонента к дочернему компоненту.propsобозначает свойства.props— это объекты пары ключ/значение.propsдоступны только для чтения. Реквизит не подлежит изменению. Если вам нужно обновить данные, вместо этого вы хотите использовать `state`.
Почему мы должны использовать реквизит?
- Мы используем реквизиты для передачи данных от одного компонента к другому, чтобы мы могли динамически кодировать, чтобы практиковать принцип единой ответственности.
- Принцип DRY: не повторяйтесь
Как передавать информацию между компонентами? Мы можем передавать реквизиты из родительского компонента в дочерний компонент.
Во-первых, мне лично нравится визуально настраивать мой VSC с родительским компонентом вверху и дочерним компонентом внизу, чтобы было ясно, как информация передается вниз.
Как правильно передавать различные типы данных реквизита из родительского компонента?
Мы можем передать несколько реквизитов из родительского компонента в дочерний компонент. Когда мы передаем строку, мы можем использовать кавычки без фигурных скобок. Для других типов данных, таких как число, логическое значение, функция и объект, мы используем фигурные скобки в качестве значений. Для передачи объектов мы можем использовать двойные фигурные скобки.
Как принять реквизиты дочернего функционального компонента
Мы получаем реквизит в качестве параметра. Давайте запишем это props в консоль и посмотрим, что у нас есть. В нашей консоли мы видим объект с пятью разными парами ключ-значение. Теперь в JSX мы можем взять все данные и отобразить их в браузере, используя {props.keyName}, поэтому в этом случае {props.greeting}, {props.number}, {props.boolean}, {props.callbackfunc()}, {props.object12.key24}
Когда мы кодируем, мы хотим практиковать СУХОЙ принцип, не повторяйтесь, но мы видим несколько реквизитов в приведенном выше коде. Давайте решим эту проблему.
Деструктурировать React Props с деструктурированием объектов
Давайте посмотрим на приведенный выше код. Это намного чище, чем предыдущее. В возвращаемом JSX нет props. , props. , props. и props. . Это выглядит намного чище и читабельнее.
Назначение собственной переменной
Деструктуризация является характеристикой JS. Он используется для извлечения разделов данных из объекта, после чего мы можем назначить их новым собственным переменным. Этот процесс не манипулирует исходным объектом, а создает копию желаемого объекта, присваивая их своим собственным новым переменным.
Мы можем упростить еще больше, разрушив структуру объекта, когда мы принимаем свойство в качестве параметра компонента дочерней функции.
