{.{ key }与key={key}相同吗？

Question

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

在视图组件上有{.{key}，我将写key={key}，它完全相同吗？你有链接或解释吗？

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

Answer 1

将您提供给<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: 'foo@bar.com',
}

而不是写：

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

我们可以简单地写：

<View {...user}>

TL；博士

总之，为了编写您只想传递给下一个组件的变量长列表，请使用扩展语法({...{variable1, variable2}})，否则，使用常规语法(value={variable})，因为您将对传递给组件的内容有更多的控制。

Answer 2

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

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

1. 动态创建一个对象，在循环时使用key的任何值，将其分配给这个新创建的对象的属性，属性名为"key“。
2. 展开从步骤1创建并用作视图属性的对象

因此，更好的做法是在下面写

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

Answer 3

是的，是一样的。

通常，您会看到这样编写的映射：

tasks.map((task, index) =>

但是，相反，通过写：

tasks.map((task, key) =>

您可以只通过{...{key}}为项目分配密钥，而不是编写key={index}。

这可以归结为一个偏好的问题，真的。然而，我个人认为，这只是不必要的“过度工程”的一些非常基本的东西。