Два разных способа использования реквизита в React

Я не мог найти хорошего объяснения по этому поводу.

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

1.

export default function AppHeader({ somethingImportant }) {
  return <div>{somethingImportant}</div>
  
}

или

2.

export default function AppHeader(props) {
  const { somethingImportant } = props

  return <div>{somethingImportant}</div>
  
}

Я не могу точно сказать разницу между первым способом использования реквизита в дочернем компоненте и вторым способом.

Связано ли это с повторным использованием компонентов в других родительских компонентах??

Заранее спасибо, ребята!

Это одно и то же. Первый синтаксис является просто ярлыком для второго, так как вы сохраняете строку кода. Посмотрите разделы «Базовое назначение» и «Распаковка свойств из объектов, переданных в качестве параметра функции» в разделе «Деструктуризация объекта» на Страница документации Mozilla.

Rich N 09.04.2022 09:41

Первый способ 2 в 1 :)

Daniil Loban 09.04.2022 09:47
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
0
2
20
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

они почти одинаковы, но в подходе номер один, когда вы используете компонент AppHeader, ваш ide может намекнуть вам, что этот компонент нуждается в какой-то важной опоре (если вы используете webStorm или phpStorm, вы можете нажать ctl + пробел там, где вы использовали компонент, и посмотреть эта опора)

Другие вопросы по теме