Является ли {...{key}} тем же, что и key = {key} для назначения свойства реакции?

<View {...{ key }}>
  <Task/>
</View>

Приведенный выше код на самом деле состоит из нескольких частей.

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

2. Разложите объект, созданный на шаге 1 и используемый как свойство View.

Следовательно, гораздо лучше написать ниже вместо этого

<View key = {key}>
...
</View>

Да, это то же самое.

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

tasks.map((task, index) =>

но вместо этого написав:

tasks.map((task, key) =>

вы можете назначить ключ элементу, просто {...{key}} вместо того, чтобы писать key = {index}

Это сводится к вопросу предпочтений, на самом деле. Тем не менее, я лично считаю, что это просто ненужная «чрезмерная инженерия» чего-то очень простого.

Думайте о свойствах, которые вы предоставляете <View>, как о объекте реквизита. Скажем

var variable = 2

Написание <View value = {variable}>, по сути, похоже на написание:

// value = {variable} is the same as {value: variable}

props = {
  value: 2
}

Однако запись <View {...{variable}}> делает менее эффективным объявление имени свойства, оно всегда будет таким же, как имя переменной, если не указано иное:

// {...{variable}} spreads out into {variable: variable}

props: {
  variable: 2
}

// {...{value: variable}} spreads out into {value: variable}
// which is a slower way of writing value = {variable}

Один из немногих реальных случаев использования второго синтаксиса — это быстрая передача нескольких переменных, которые вы хотите сохранить с одним и тем же именем:

<View {...{ user, firstName, lastName, email }}>
// rather than
<View user = {user} firstName = {firstName} lastName = {lastName} email = {email}>

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

value = {variable + 2}

но вы не можете написать:

{...{variable + 2}}

Где имя объекта? Вы должны были бы написать:

{...{value: value + 2}}

Что, опять же, является способом написания первого синтаксиса помедленнее.

Несколько иной вариант использования синтаксиса распространения — передача нескольких свойств объекта одновременно. Например, скажем, у нас есть этот объект:

var user = {
  firstName: 'foo',
  lastName: 'bar',
  email: '[email protected]',
}

Вместо того, чтобы писать:

<View firstName = {user.firstName} lastName = {user.lastName} email = {user.email}>

Мы можем просто написать:

<View {...user}>

TL;DR
В целом, для написания длинных списков переменных, которые вы просто хотите передать следующему компоненту, используйте синтаксис распространения ({...{variable1, variable2}}), в противном случае используйте обычный синтаксис (value = {variable}), так как у вас будет гораздо больше контроля над тем, что вы перейти к вашим компонентам.