Реагировать реквизит: я должен передать объект или его свойства?Это имеет большое значение?

Question

При передаче реквизита я должен передать весь объект в дочерние компоненты или я должен отдельно создать реквизиты сначала в родительском компоненте, а затем передать эти реквизиты дочернему компоненту?

Передать весь объект:

<InnerComponent object={object} />

Индивидуально создайте реквизиты, которые вам нужны в первую очередь:

<InnerComponent name={object.name} image={object.image} />

Какой из них предпочтителен, и если это зависит, что я должен использовать в качестве индикатора для использования любого из них?

Answer 1

Согласно принципу наименьших привилегий , это правильный путь:

<InnerComponent name={object.name} image={object.image} />

Это ограничивает InnerComponent от случайного изменения исходного объекта или доступа к свойствам, которые не предназначеныдля него.

В качестве альтернативы, свойства могут быть выбраны из исходного объекта и переданы в качестве реквизита:

<InnerComponent {...pick(object, 'name', 'image')} />

Если существует множество свойств, которые утомительны для перечисления, может быть один реквизит, который принимаетобъект:

<InnerComponent object={pick(object, 'name', 'image')} />

Answer 2

Это зависит от этого объекта.Вам нужно, чтобы ВСЕ его свойства были переданы другому компоненту?Или ... Вам может потребоваться передать 2 свойства из 5 определенному компоненту?

• Если вам не нужно передавать ВСЕ его свойства, я рекомендую передать Properties как Props
• НО, если вы на 100% уверены, что вам НЕОБХОДИМО передать ВСЕ СВОЙСТВА, я рекомендую передать в этом случае все Object как Props, так как это будет намного более понятным кодом идержит вас подальше от забытого, чтобы передать что-то.Например;Когда вы добавляете новое свойство к этому объекту, вам не нужно передавать его, так как вы уже передаете весь объект!

Хорошо, если вы не уверены в своем текущем / будущемЦель этого объекта, так как вам может потребоваться вскоре ИСКЛЮЧИТЬ некоторые свойства, вам, вероятно, следует передать его свойства индивидуально в этом случае, вместо того, чтобы передавать некоторые неиспользуемые свойства другому компоненту.

Answer 3

Поскольку в JavaScript нет аннотации типа, второй вариант будет гораздо предпочтительнее, как упоминается в @mstruebing, код будет более понятным.Однако, если вы используете TypeScript React (который поддерживает аннотации типов), оба варианта будут одинаково понятны.Но имейте в виду, что первый выбор обеспечивает тесную связь между представлениями и моделями, это позволяет быстро разрабатывать, так как вам не нужно много печатать;в то время как второй вариант может замедлить развитие, но вы будете более гибкими и терпимыми к будущим изменениям.

Итак, индикатор таков: если вы предпочитаете скорость разработки, а не гибкость, выберите вариант 1;если вы предпочитаете гибкость, а не скорость разработки, выберите вариант 2.

Дополнительные примечания

Хорошо, когда мы должны отдавать предпочтение скорости разработки, а не гибкости?Вот мои 2 цента.

Если ваш проект предназначен для краткосрочного использования (например, разработка приложения только для сбора голосов во время выборов), тогда выберите первый вариант.

Если ваш проект предназначен для долгосрочного использования (например, портал транзакций онлайн-банка), вам следует выбрать второй вариант.

Answer 4

Если вы не используете все свойства в объекте, лучше передать необходимые свойства отдельно, так как это может помочь в оптимизации производительности, когда компонент Child имеет значение PureComponent использования shouldComponentUpdate.В таком случае, только когда реквизиты, используемые компонентом Child, изменятся, он будет перерисован, а не когда неиспользуемое свойство изнутри объекта изменилось.

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

Answer 5

Передача нескольких реквизитов дочернему компоненту является предпочтительным способом передачи реквизита дочерним компонентам.Это поможет вам отслеживать состояние приложения в дочернем компоненте.Кроме того, не стесняйтесь использовать модуль prop-types.Он действует как обобщение в Java и обеспечивает безопасность типов для пропуска.

Answer 6

Вы должны предпочесть ваш второй пример, чтобы передать реквизит индивидуально.Там вы можете увидеть, какие аргументы переданы, и быстро сравнить, какие аргументы ожидаются.Это значительно облегчает взаимодействие между людьми и делает состояние приложения более понятным.

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

Некоторые дополнения к чистой реакции, такие как prop-types или typescript, могут помочь определить чистую и ожидаемуюсвойства в большом приложении