JSX 中价差运算符的奇怪行为

Question

JS环境下的Spread运算符

let obj1 = {a:1,b:2}
let obj2 = {...obj1}
console.log(obj2)

Above code outputs {a:1,b:2} Which is a copy of obj1

JSX 中的扩展运算符
让我们假设 this.props = {lib:'react',lang:'js'}

<App {...this.props}/>

将与
相同

<App lib={this.props.lib} lang={this.props.lang}> 

我们知道 this.props 也是一个对象，就像 obj1 一样，为什么 JSX 会像 lib='react,lang='js' 一样传播，而不是 lib:'react',lang:'js' ？
JSX Spread 运算符和 Javascript Spread 运算符有区别吗？
我真的很困惑

Answer 1

我们知道 this.props 也是一个对象，就像 obj1 一样，为什么 JSX 传播方式不同？

JSX 中的

{}

语法用于 JavaScript 表达式，因此当我们使用

{}

时，它不被视为对象文字。

这就是当我们想要传递一个对象时我们使用像

someProp={{bla: 'foo'}}

这样的东西的原因，因为外层对告诉我们里面会有一个表达式。

简而言之，在 JSX 中使用

{}

并不会创建对象。

您可以阅读有关传播属性的更多信息。

Answer 2

在这两种情况下，它只是一个扩展运算符，并且只是一个 Javascript 扩展运算符。不存在 JSX 传播运算符这样的东西。

当我们执行

<App {...this.props}/>

时，它与React中的

<App a="1" b="2"/>

相同。 在 React 中，这些被添加到 App 类的 prop 对象中。从该 prop 对象中，我们分别可以访问值

a

和

b

。

const App = (props)=>{
   const {a,b} = props; // Object De-structuring
}

我们基本上是在传播 props，这意味着将这些值作为 Props 传递给 App 组件。这与使用扩展运算符将值传递给函数相同。

这样想：将

App Component

视为一个函数，它将传播的对象作为参数。

const App= ({a,b})=>{ // Here we are De-Structuring from our props object
   console.log(a);
   console.log(b);
}

App({...obj1}); // This is same as App(a,b)

Codepen代码：https://codepen.io/emmeiWhite/pen/poEREEx?editors=1111

在 Javascript 文件中尝试上面的代码

Spread

...

运算符也可用于在我们这样做时克隆对象

let obj1 = {a:1,b:2}

let obj2 = {...obj1} 

obj2

是 obj1 的克隆。一个完整的新物体。 obj1 和 obj2 现在是内存中两个不同的对象，而不仅仅是引用。