React中的这三个点是做什么的？

这些被称为点差。顾名思义。这意味着它将任何值放在这些数组或对象中。

如 ：

let a = [1, 2, 3];
let b = [...a, 4, 5, 6];
console.log(b);
> [1, 2, 3, 4, 5, 6]

这是ES6 / Harmony中的新功能。它称为扩展运算符。它使您可以分离数组/对象的组成部分，也可以采用多个项目/参数并将它们粘合在一起。这是一个例子：

let array = [1,2,3]
let array2 = [...array]
// array2 is now filled with the items from array

并带有对象/键：

// lets pass an object as props to a react component
let myParameters = {myKey: 5, myOtherKey: 7}
let component = <MyComponent {...myParameters}/>
// this is equal to <MyComponent myKey=5 myOtherKey=7 />

真正很酷的是，您可以使用它来表示“其余的值”。

const myFunc = (value1, value2, ...values) {
    // Some code
}

myFunc(1, 2, 3, 4, 5)
// when myFunc is called, the rest of the variables are placed into the "values" array

如果您有一个元素数组，并且想要显示元素，则只需使用... arrayemaments，它将遍历所有元素

它在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)

您可以使用Object.assign()javascript中的函数执行相同的结果。

参考：传播语法

它将被编译成：

React.createElement(Modal, { ...this.props, title: "Modal heading", animation: false }, child0, child1, child2, ...)

它提供了两个以上的属性title，animation超出props了host元素的范围。

...是称为Spread的ES6运算符。

参见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

它称为传播算子。例如，让hello = {name：''，msg：''}让hello1 = {... hello}现在，hello对象属性被复制到hello1。

通常称为扩展运算符，用于在需要的任何地方扩展

例

const SomeStyle = {
   margin:10,
   background:#somehexa
}

您可以在任何需要扩展运算符Spread语法的地方使用它。

这是一个传播算子...

例如，如果您有一个数组first=[1,2,3,4,5]和另一个second=[6,7,8]。

[...first, ...second] //result is [1,2,3,4,5,6,7,8]

json对象也可以这样做。

简而言之，这三个点是ES6（ES2015）中的一个散布运算符。传播运算符将获取所有数据。

let a = [1, 2, 3, 4];
let b = [...a, 4, 5, 6];
let c = [7,8,...a];

console.log（b）; 给出结果[1,2,3,4,5,6]

console.log（c）; 给出结果[7,8,1,2,3,4]

的...（扩展操作符）用于在反应：

提供一种将道具从父组件传递到子组件的巧妙方法。例如，在父组件中给定这些道具，

this.props = {
  username: "danM",
  email: "dan@mail.com"
}

它们可以通过以下方式传递给孩子，

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

与此类似

<ChildComponent username={this.props.username} email={this.props.email} />

但是更干净。

这三个点(...)称为散布运算符，这在概念上类似于ES6阵列散布运算符，JSX利用这些受支持和开发中的标准来提供JSX中更清晰的语法

对象初始化程序中的传播属性将自己的可枚举属性从提供的对象复制到新创建的对象上。

let n = { x, y, ...z };
n; // { x: 1, y: 2, a: 3, b: 4 }

参考：

1）https://github.com/sebmarkbage/ecmascript-rest-spread#spread-properties

2）https://facebook.github.io/react/docs/jsx-spread.html

对于那些来自Python世界的人来说，JSX Spread属性等同于 Unpacking Argument Lists（Python操作**符）。

我知道这是一个JSX问题，但是使用类比有时可以帮助使其更快。

JavaScript中的三个点是传播/休息运算符。

点差运算符

该价差语法允许表达在多个参数预期的地方进行扩展。

myFunction(...iterableObj);

[...iterableObj, 4, 5, 6]

[...Array(10)]

休息参数

的其余参数语法用于与可变参数数目的功能。

function(a, b, ...theArgs) {
  // ...
}

ES6中引入了数组的散布/余数运算符。对于对象散布/静止属性，有一个状态2 建议。

TypeScript还支持传播语法，并且可以将其转换为较小问题的ECMAScript的较早版本。

这也是React中使用的es6的功能。看下面的例子：

function Sum(x,y,z) {
   return x + y + z;
}
console.log(Sum(1,2,3)); //6

如果我们最多拥有3个参数，那么这种方法很好，但是如果我们需要添加例如110个参数，该怎么办。我们应该定义它们并一一添加吗？当然，有一种更简单的方法称为SPREAD。无需传递所有这些参数，而是编写：

function (...numbers){} 

我们不知道我们有多少个参数，但是我们知道有很多参数。基于es6，我们可以如下重写上述功能，并使用它们之间的传播和映射使它像一块蛋糕一样容易：

let Sum = (...numbers) => {
return numbers.reduce((prev, current) => prev + current );
}
console.log(Sum(1, 2, 3, 4, 5, 6, 7, 8, 9));//45