JSX 中扩展运算符的奇怪行为

Question

JS环境下的扩展运算符

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 扩展运算符和 Javascript 扩展运算符有区别吗？
我真的很困惑

Answer 1

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

JSX 中的 {} 语法用于 JavaScript 表达式，因此当我们使用 {} 时，它不会被视为对象字面量。

这就是我们在想要传递一个对象时使用someProp={{bla: 'foo'}} 之类的东西的原因，因为外部对告诉我们其中会有一个表达式。

简而言之，在 JSX 中使用 {} 不会创建对象。

你可以阅读更多关于spread attributes的信息。

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 现在是内存中的两个不同对象，而不仅仅是引用。