Это хороший способ передать реквизиты дочернему компоненту в React? - PullRequest
Новая
       32

Это хороший способ передать реквизиты дочернему компоненту в React?

2 голосов
/ 02 апреля 2020

Обычно в React мы передаем реквизиты дочернему компоненту следующим образом: 

const Parent = ({ foo, bar, baz, myFoo, myBar, myBaz }) => <Child foo={foo} bar={bar} baz={baz} /> (1)

В настоящее время я нашел альтернативный способ сделать это: 

const Parent = ({ foo, bar, baz, myFoo, myBar, myBaz }) => <Child {...{ foo, bar, baz }} /> (2)

IMO, ( 2) экономит много времени и усилий при наборе текста. Однако:

  1. Есть ли минусы с (2)? Например, считается ли (2) анти-паттерном React?
  2. Я знаю, что говорить о производительности без измерения - это плохо, но мне интересно, есть ли какие-либо проблемы с производительностью в (2)?

Обновление 1: я добавил myFoo, myBar, myBaz в реквизит Родителя. Обратите внимание, что я не хочу распространять все реквизиты на дочерний компонент, поскольку это считается плохой практикой, приводящей к ненужным реквизитам в дочернем компоненте.

Ответы [ 3 ]

1 голос
/ 02 апреля 2020

Единственный недостаток - это то, что иногда трудно понять, используя первый подход, вы делаете код более читабельным и явным. Конечно, если у вас есть какая-то документация для компонентов, например, сборник рассказов или что-то, что поможет другим разработчикам понять реквизиты, в которых нуждается компонент, не имеет значения использовать второй подход (распространение пропов), но делать вещи для чтения вы должны придерживаться первого (объявляя каждую опору по одному).

Проверьте это правило eslint-реагировать-плагин https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md В нем кратко излагается, почему лучше использовать первый подход .

0 голосов
/ 02 апреля 2020

Вы могли бы переписать свой код так: 

const Parent = (props) => <Child {...props} />

, и это действительно очень распространенная реакция. Если вам нужно foo, bar или baz где-то еще, вы можете написать это так: 

const Parent = (props) => {
  const { foo, bar, baz } = props;
  // do something with foo, bar or baz
  return <Child {...props} />;
}

Чтобы вернуться к вашим вопросам:

1) Нет, это не анти-паттерн, но вы должны использовать подходы, описанные выше (я никогда не видел кода, подобного вашему примеру, ни в одном проекте). Недостатком может быть то, что вы на самом деле больше не обращаете внимания на Child и что вы можете передавать больше, чем вам нужно. Например, props из Parent может иметь дополнительное поле, например faz, и вы просто передадите его в Child, и оно никогда не будет его использовать.

2) Я не могу думать ни о каком значимая проблема производительности здесь. В своих проектах я использую этот подход очень часто и никогда не замечал проблем с производительностью.

0 голосов
/ 02 апреля 2020

  1. Почему это считается анти-паттерном? Ведь здесь полезен оператор распространения, верно?

  2. Вы не должны заботиться о производительности. В любом случае это будет перенесено на старый javascript (через babel или что-то подобное). Это просто syntacti c сахар.

...