React — это все о реквизитах, и чем больше вы используете многоразовых компонентов, тем более масштабируемым станет ваше приложение на реакте (если, конечно, все сделано правильно).

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

Способ 1

<Card 
  cardObject={cardObject}
/>

Метод 2

<Card 
  title={title}
  description={description}
  rating={rating}
/>

В первом сценарии нам нужно будет получить реквизит внутри компонента Card, причем менее эффективным способом:

export default function Card(props) {
  const { title, description, rating } = props.cardObject
}

А во втором случае, когда список реквизитов становится длинным, добавлять их все по одному становится слишком неэффективно.

Решение

Лучшим практическим методом является использование деструктуризации объекта следующим образом:

<Card 
  {...cardObject}
/>
//then retrieve the props in the usualy way
export default function Card({ title, description, rating }) {

}

Этот метод намного чище, эффективнее и лучше масштабируется для длинных списков реквизитов.

Заключение

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

Вы всегда использовали этот метод? Или только сейчас узнали? Дайте мне знать в комментариях!