reactjs - {...{ key }} 与 key={key} 相同来分配 React 属性吗？

Question

我是 React 的初学者开发人员，几天前我看到了一些我不理解的有趣语法。

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

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

Answer 1

想想您提供给 <View> 的属性作为 Prop 的对象。可以说

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;DR
总的来说，为了编写只想传递到下一个组件的长变量列表，请使用扩展语法( {...{variable1, variable2}} )，否则，请使用常规语法( value={variable} )，因为您将拥有更多控制权至于你传递给组件的内容。