es6扩展操作符是如何对对象进行支持转换的？

Question

我知道为了让{...todo}在Todo组件中工作，必须将它转换为类似于：completed=false text="clean room"的道具，但是扩展操作符是如何做到这一点的呢？当前的{...todo}不是被转换为{completed:false}, {text:"clean room"}吗？

const TodoList = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => onTodoClick(todo.id)}
      />
    )}
  </ul>
)

Answer 1

正如已经确定的那样，这里使用的扩展语法与ES6无关，它是一个JSX结构。

JSX只是React.createElement调用的语法糖。道具实际上是作为对象传递给该函数的。

您可以使用巴别勒查看JSX是如何转换的。

没有铺开的支柱：

// In
<Component foo="bar" baz="42" />

// Out
React.createElement(
  Component,
  { foo: "bar", baz: "42" }
);

用散开的支柱：

// In
<Component foo="bar" {...xyz} baz="42" />

// Out
React.createElement(
  Component,
  Object.assign({ foo: "bar" }, xyz, { baz: "42" })
);

因此，您可以看到，如果道具包含一个扩展支柱，它们被分离成多个对象并简单地合并。

Answer 2

es6扩展运算符确实是通过转换{...todo} to {completed:false}，{text:"clean room"}来工作的。

但是，在JSX中使用相同的操作符，但并不一定是相同的。

来自msdn文档，

扩展语法允许在需要多个参数(用于函数调用)或多个元素(用于数组文字)或多个变量(用于析构赋值)的地方展开表达式。

按照这个想法，创建了JSX spread operator。根据反应文档的说法

那个..。ES6中的数组已经支持运算符(或扩展运算符)。还有一个关于对象Rest和扩展属性的ECMAScript建议。我们正在利用这些支持和开发的标准，以便在JSX中提供更干净的语法。

既然这已经跟随了传播者的想法，两者的统一的确是一个受社会欢迎的想法。