这三个点(…)被称为展开运算符，这在概念上类似于ES6数组展开运算符JSX 利用这些支持并开发标准，以便在JSX中提供更清晰的语法

对象初始化器中的展开属性复制自己的枚举对象 属性从提供的对象转移到新创建的对象。 设n = {x, y，…z}; n;// {x: 1, y: 2, a: 3, b: 4}

引用:

传播特性 JSX深入

它被称为JavaScript中的扩展语法。

它在JavaScript中用于解构数组或对象。

例子:

const objA = { a: 1, b: 2, c: 3 }
const objB = { ...objA, d: 1 }
/* Result of objB will be { a: 1, b: 2, c: 3, d: 1 } */
console.log(objB)

const objC = { ....objA, a: 3 }
/* result of objC will be { a: 3, b: 2, c: 3, d: 1 } */
console.log(objC)

你可以用JavaScript中的Object.assign()函数得到相同的结果。

参考:扩展语法

在React应用程序中传递道具是常见的做法。这样我们就可以将状态更改应用到子组件上，而不管它是纯的还是不纯的(无状态的还是有状态的)。在传递道具时，有时最好的方法是传递单个属性或整个属性对象。由于ES6中对数组的支持，我们得到了“…”符号，现在我们能够实现将整个对象传递给子对象。

将道具传递给子对象的典型过程如下所示:

var component = <Component foo={x} bar={y} />;

当道具数量很少时可以使用这种方法，但当道具数量过多时就无法管理了。当您不知道子组件中所需的属性，而典型的JavaScript方法是简单地设置这些属性并稍后绑定到对象时，此方法就会出现问题。这会导致propType检查和神秘堆栈跟踪错误的问题，这些问题没有帮助，并导致调试延迟。下面是这种做法的一个例子，以及不应该做的事情:

var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y;

这样做可以达到同样的结果，但会取得更适当的成功:

var props = {};
props.foo = x;
props.bar = y;
var component = Component(props); // Where did my JSX go?

但不使用JSX spread或JSX，所以要将其循环回方程中，我们现在可以这样做:

var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;

包含在“…props"是foo: x, bar: y.这可以与其他属性结合起来覆盖"…使用这种语法:

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'

此外，我们还可以将其他属性对象复制到其他对象上，或者按以下方式组合它们:

var oldObj = { foo: 'hello', bar: 'world' };
var newObj = { ...oldObj, foo: 'hi' };
console.log(newObj.foo); // 'hi';
console.log(newObj.bar); // 'world';

或者像这样合并两个不同的对象(这还没有在所有react版本中使用):

var ab = { ...a, ...b }; // merge(a, b)

根据Facebook的react/docs网站，另一种解释是:

如果您已经将“props”作为对象，并且希望在JSX中传递它，则可以使用“…”作为SPREAD操作符来传递整个props对象。下面两个例子是等价的:

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}



function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

在构建泛型容器时，扩展属性可能很有用。然而，它们也会使代码变得混乱，因为很容易将许多不相关的道具传递给不关心它们的组件。应该谨慎使用此语法。

扩展语法允许像数组和对象这样的数据结构进行解构 它们可以从中提取一个值，也可以为它们添加一个值。 如 Const obj={name:"ram"，age:10 从上面的例子中，我们可以说我们解构了obj并从该对象中提取了name。 同样的, const newObj ={……obj,地址:“尼泊尔”} 从这个例子中，我们向该对象添加了一个新属性。 在数组的情况下也是类似的。

<Modal {...{ title: "modal heading", animation: false, ...props} />

更加清晰。

传播算子!由于大多数人已经优雅地回答了这个问题，我想建议一个快速使用扩散操作符的方法列表:

…spread运算符对JavaScript中许多不同的常规任务都很有用，包括:

复制数组 连接或组合数组 使用数学函数 使用数组作为参数 向列表中添加项 在React中添加状态 结合对象 将NodeList转换为数组

查看文章了解更多细节。如何使用展开运算符。我建议你习惯它。有很多很酷的方法可以使用展开运算符。