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

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

引用:

传播特性 JSX深入

三点……表示展开运算符或休息参数。

它允许数组表达式或字符串或任何可以迭代的东西在函数调用的参数为零或多个，或数组的元素为预期的地方展开。

合并两个数组

Var arr1 = [1,2,3]; Var arr2 = [4,5,6]; Arr1 =[…arr1……arr2); console.log (arr1);//[1,2,3,4,5,6]

复制数组:

Var arr = [1,2,3]; Var arr2 =[…arr]; console.log (arr);//[1,2,3]

注意:扩展语法在复制对象时有效地深入一层 数组中。因此，它可能不适合复制多维 数组，如下例所示(与 Object.assign()和spread语法)。

将一个数组的值添加到另一个数组的特定索引处。

Var arr1 = [4,5] Var arr2 =[1,2,3，…]arr1, 6] console.log (arr2);// [1,2,3,4,5,6]

使用new调用构造函数时:

var dateFields = [1970, 0,1];// 1 1970年1月 var d = new Date(…dateFields); console.log (d);

在对象字面量中展开:

var obj1 = {foo: 'bar'， x: 42}; var obj2 = {foo: 'ba '， y: 13}; var clonedObj ={…obj1}; console.log (clonedObj);// {foo: "bar"， x: 42} var mergedObj ={…}obj1, ...obj2}; console.log (mergedObj);// {foo: "baz"， x: 42, y: 13}

注意obj1的foo属性已经被obj2的foo属性所覆盖。

作为一种rest形参语法，它允许我们将无限数量的实参表示为数组:

函数sum(…theArgs) { theArgs返回。Reduce ((previous, current) => { 返回先前+当前; })； ｝ Console.log (sum(1,2,3));/ / 6 Console.log (sum(1,2,3,4));/ / 10

注意:spread语法(除了spread属性的情况)只能应用于可迭代对象:

所以下面的语句会抛出一个错误:

var obj = {'key1'： 'value1'}; var 数组 = [...卷];类型错误：obj 不可迭代

Reference1

Reference2

在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} />;
}

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

Spread操作符允许您将可迭代对象(如对象、字符串或数组)展开为其元素，而Rest操作符则相反，将一组元素缩减为一个数组。

对于那些来自Python世界的人来说，JSX扩展属性相当于 解包参数列表(Python **-操作符)。

我知道这是一个JSX问题，但使用类比有时有助于更快地得到答案。

对于那些想要简单快速理解这个问题的人:

首先，这不仅仅是React的语法。这是ES6中的扩展语法，它迭代(合并，添加等)数组和对象。点击这里阅读更多信息。

为了回答这个问题:

让我们想象你有这样的标签:

<UserTag name="Supun" age="66" gender="male" />

然后你这样做:

const user = {
  "name": "Joe",
  "age": "50"
  "test": "test-val"
};

<UserTag name="Supun" gender="male"  {...user} age="66" />

那么标签将等于这个:

<UserTag name="Joe" gender="male" test="test-val" age="66" />

因此，当你在React标签中使用spread语法时，它将标签的属性作为对象属性，与给定的对象用户合并(如果存在则替换)。此外，您可能已经注意到，它只替换属性之前，而不是属性之后。所以在这个例子中，年龄保持不变。