是{..{ 键 }}与 key={key} 相同来分配 react 属性?

Question

我是 React 的初学者，几天前我看到了我不明白的有趣语法。

在视图组件上有 {...{键}}， 我会写 key={key}，它完全一样吗？你有链接或解释吗？

render() {
const { tasks } = this.props;
return (
<View>
{
tasks.map((task, key) => {
return (
<View {...{ key }}>
<Task/>
</View>
);
})
}
</View>
);
}

Answer 1

将提供给<View>的属性视为 props 的对象。比方说

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: '[e-mail]',
}

而不是写：

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

我们可以简单地写：

<View {...user}>

---

TL;
DR 总体而言，对于编写只想传递给下一个组件的长变量列表，请使用扩展语法 ({...{variable1, variable2}})，否则，请使用常规语法 (value={variable})，因为您将可以更好地控制传递给组件的内容。

Answer 2

是的，是一样的。

通常，您会看到如下所示的映射：

tasks.map((task, index) =>

而是通过写：

tasks.map((task, key) =>

您可以通过{...{key}}而不是写入key={index}来为项目分配键

---

这归结为偏好问题，真的。但是，我个人认为这只是对非常基本的东西的不必要的"过度工程"。

Answer 3

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

上面的代码实际上由多个部分组成

1. 动态创建一个对象，使用您在循环时获得的任何值key，将其分配给此新创建对象的属性，属性名称为"key">

2. 展开从步骤 1 创建并用作 View 属性

   的对象

因此，最好写在下面

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