那是财产传播符号。它是在 ES2018 中添加的（用于数组/可迭代对象的传播更早，ES2015），但它在 React 项目中通过转译得到了很长时间的支持（作为“ JSX 传播属性”，即使您也可以在其他地方进行，而不仅仅是属性） ）。

{...this.props} 将“自己的”可枚举属性props作为Modal您正在创建的元素的离散属性展开。例如，如果this.props包含a: 1and b: 2，则

<Modal {...this.props} title='Modal heading' animation={false}>

将与

<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>

但它是动态的，所以任何“自己的”属性props都包括在内。

由于children是 中的“拥有”属性props，因此传播将包括它。因此，如果出现它的组件有子元素，它们将被传递给Modal. 将子元素放在开始标签和结束标签之间只是语法糖 - 很好的一种 - 用于children在开始标签中放置属性。例子：

class Example extends React.Component {
  render() {
    const { className, children } = this.props;
    return (
      <div className={className}>
      {children}
      </div>
    );
  }
}
ReactDOM.render(
  [
    <Example className="first">
      <span>Child in first</span>
    </Example>,
    <Example className="second" children={<span>Child in second</span>} />
  ],
  document.getElementById("root")
);

.first {
  color: green;
}
.second {
  color: blue;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

展开表示法不仅适用于该用例，而且适用于创建具有现有对象的大部分（或全部）属性的新对象——当您更新状态时会出现很多情况，因为您无法修改状态直接地：

this.setState(prevState => {
    return {foo: {...prevState.foo, a: "updated"}};
});

这将替换this.state.foo为一个新对象，该对象具有foo除该a属性之外的所有相同属性，该对象变为"updated"：

const obj = {
  foo: {
    a: 1,
    b: 2,
    c: 3
  }
};
console.log("original", obj.foo);
// Creates a NEW object and assigns it to `obj.foo`
obj.foo = {...obj.foo, a: "updated"};
console.log("updated", obj.foo);

.as-console-wrapper {
  max-height: 100% !important;
}

...被称为扩展属性，顾名思义，它允许扩展表达式。

var parts = ['two', 'three'];
var numbers = ['one', ...parts, 'four', 'five']; // ["one", "two", "three", "four", "five"]

在这种情况下（我将简化它）。

// Just assume we have an object like this:
var person= {
    name: 'Alex',
    age: 35 
}

这个：

<Modal {...person} title='Modal heading' animation={false} />

等于

<Modal name={person.name} age={person.age} title='Modal heading' animation={false} />

简而言之，我们可以说，这是一个简洁的捷径。

这三个点表示蔓延运营商在ES6。它允许我们在 JavaScript 中做很多事情：

1. 连接数组

    var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
    var racingGames = ['Need For Speed', 'Gran Turismo', 'Burnout'];
    var games = [...shooterGames, ...racingGames];
   
    console.log(games)  // ['Call of Duty', 'Far Cry', 'Resident Evil',  'Need For Speed', 'Gran Turismo', 'Burnout']
   

2. 解构数组

      var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil'];
      var [first, ...remaining] = shooterGames;
      console.log(first); //Call of Duty
      console.log(remaining); //['Far Cry', 'Resident Evil']
   

3. 组合两个对象

    var myCrush = {
      firstname: 'Selena',
      middlename: 'Marie'
    };
   
    var lastname = 'my last name';
   
    var myWife = {
      ...myCrush,
      lastname
    }
   
    console.log(myWife); // {firstname: 'Selena',
                         //   middlename: 'Marie',
                         //   lastname: 'my last name'}
   

这三个点还有另一种用途，称为Rest 参数，它可以将函数的所有参数作为一个数组。

4. 函数参数作为数组

     function fun1(...params) {
   
     }
   

JavaScript 中的三个点是扩展/剩余操作符。

展开运算符

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

myFunction(...iterableObj);

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

[...Array(10)]

休息参数

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

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

ES6中引入了数组的扩展/剩余操作符。有一个关于对象传播/休息属性的状态 2提案。

TypeScript 还支持扩展语法，并且可以将其转换为旧版本的 ECMAScript，但有一些小问题。

...（JavaScript 中的三个点）称为扩展语法或扩展运算符。这允许扩展诸如数组表达式或字符串之类的可迭代对象，或者扩展放置在任何位置的对象表达式。这不是 React 特有的。它是一个 JavaScript 运算符。

这里的所有这些答案都有帮助，但我想列出传播语法（Spread Operator）的最常用的实际用例。

1.组合数组（Concatenate Arrays）

有多种组合数组的方法，但扩展运算符允许您将其放置在数组中的任何位置。如果您想组合两个数组并将元素放置在数组内的任何点，您可以执行以下操作：

var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];

// arr2 = ["one", "two", "three", "four", "five"]

2. 复制数组

当我们想要一个数组的副本时，我们曾经使用Array.prototypr.slice()方法。但是，您可以对扩展运算符执行相同操作。

var arr = [1,2,3];
var arr2 = [...arr];
// arr2 = [1,2,3]

3. 不使用 Apply 调用函数

在 ES5 中，要将包含两个数字的数组传递给doStuff()函数，通常会使用Function.prototype.apply()方法，如下所示：

function doStuff (x, y, z) { }
var args = [0, 1, 2];

// Call the function, passing args
doStuff.apply(null, args);

但是，通过使用展开运算符，您可以将数组传递给函数。

doStuff(...args);

4. 解构数组

您可以将解构和 rest 运算符一起使用，将信息提取到您想要的变量中：

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

5. 函数参数作为 Rest 参数

ES6 还具有三个点 (...)，它是一个剩余参数，用于将函数的所有剩余参数收集到一个数组中。

function f(a, b, ...args) {
  console.log(args);
}

f(1,2,3,4,5);
// [ 3, 4, 5 ]

6. 使用数学函数

任何使用 spread 作为参数的函数都可以被可以接受任意数量参数的函数使用。

let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1

7. 组合两个对象

您可以使用展开运算符来组合两个对象。这是一种简单而干净的方法。

var carType = {
  model: 'Toyota',
  yom: '1995'
};

var carFuel = 'Petrol';

var carData = {
  ...carType,
  carFuel
}

console.log(carData);
// {
//  model: 'Toyota',
//  yom: '1995',
//  carFuel = 'Petrol'
// }

8. 将一个字符串分成不同的字符

您可以使用扩展运算符将字符串扩展为单独的字符。

let chars = ['A', ...'BC', 'D'];
console.log(chars); // ["A", "B", "C", "D"]

你可以想出更多的方法来使用Spread Operator。我在这里列出的是它的流行用例。