Два разных способа использования реквизита в 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
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
20
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

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

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