React 中的这三个点的作用是什么？

在 React 或 JavaScript 的上下文中，这三个点被称作扩展运算符（spread operator）。扩展运算符有几种不同的用途：

1. 复制对象或数组： 扩展运算符可以用来创建对象或数组的浅拷贝。比如，如果我们有一个数组 arr = [1, 2, 3]，使用扩展运算符可以创建一个新的数组 newArr = [...arr]，这里 newArr 将是 arr 的一个拷贝，但是是一个新的实例。

   示例代码如下：

   javascript
   const originalArray = [1, 2, 3];
   const newArray = [...originalArray]; // newArray: [1, 2, 3]

2. 合并对象或数组： 扩展运算符可以用来合并两个或多个对象（或数组）。这在 React 的状态管理中特别有用，因为经常需要创建新的状态对象，而不是修改现有的状态。

   示例代码如下：

   javascript
   const obj1 = { a: 1, b: 2 };
   const obj2 = { b: 3, c: 4 };
   const mergedObject = { ...obj1, ...obj2 }; // mergedObject: { a: 1, b: 3, c: 4 }

   可以看到，如果有重复的键，后面的对象会覆盖前面的。

3. 函数参数展开： 当一个函数期望收到多个参数，而不是一个数组时，扩展运算符可以用来将一个数组'展开'为单独的参数。

   示例代码如下：

   javascript
   function sum(a, b, c) {
     return a + b + c;
   }
   const numbers = [1, 2, 3];
   const result = sum(...numbers); // 等同于 sum(1, 2, 3)

在 React 组件中，扩展运算符经常用来传递 props。例如，如果你有一个 props 对象，你想将它传递给子组件，你可以使用扩展运算符来传递整个 props 对象。

示例代码如下：

javascript
const MyComponent = (props) => {
  return <ChildComponent {...props} />;
};

通过上述方法，ChildComponent 将接收到 MyComponent 中所有的 props，而无需逐一列出它们。这使得组件间的 props 传递更加灵活和简洁。

That's property spread notation. It was added in ES2018 (spread for arrays/iterables was earlier, ES2015), but it's been supported in React projects for a long time via transpilation (as "JSX spread attributes" even though you could do it elsewhere, too, not just attributes).

{...this.props} spreads out the "own" enumerable properties in props as discrete properties on the Modal element you're creating. For instance, if this.props contained a: 1 and b: 2, then

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

would be the same as

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

But it's dynamic, so whatever "own" properties are in props are included.

Since children is an "own" property in props, spread will include it. So if the component where this appears had child elements, they'll be passed on to Modal. Putting child elements between the opening tag and closing tags is just syntactic sugar — the good kind — for putting a children property in the opening tag. Example:

Show code snippet

shell
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>

Run code snippetHide results

Expand snippet

Spread notation is handy not only for that use case, but for creating a new object with most (or all) of the properties of an existing object — which comes up a lot when you're updating state, since you can't modify state directly:

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

That replaces this.state.foo with a new object with all the same properties as foo except the a property, which becomes "updated":

Show code snippet

shell
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;
}

Run code snippetHide results

Expand snippet

... are called spread attributes which, as the name represents, it allows an expression to be expanded.

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

And in this case (I'm going to simplify it).

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

This:

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

is equal to

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

So in short, it's a neat short-cut, we can say.

The three dots represent the spread operator in ES6. It allows us to do quite a few things in JavaScript:

1. Concatenate arrays

   shell
    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. Destructuring an array

   shell
      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. Combining two objects

   shell
    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'}

There's another use for the three dots which is known as Rest Parameters and it makes it possible to take all of the arguments to a function in as one array.

1. Function arguments as array

   shell
     function fun1(...params) {
   
     }

... (three dots in JavaScript) is called the Spread Syntax or Spread Operator. This allows an iterable such as an array expression or string to be expanded or an object expression to be expanded wherever placed. This is not specific to React. It is a JavaScript operator.

All these answers here are helpful, but I want to list down the mostly used practical Use Cases of the Spread Syntax (Spread Operator).

1. Combine Arrays (Concatenate Arrays)

There are a variety of ways to combine arrays, but the spread operator allows you to place this at any place in an array. If you'd like to combine two arrays and place elements at any point within the array, you can do as follows:

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

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

2. Copying Arrays

When we wanted a copy of an array, we used to have the Array.prototype.slice() method. But, you can do the same with the spread operator.

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

3. Calling Functions without Apply

In ES5, to pass an array of two numbers to the doStuff() function, you often use the Function.prototype.apply() method as follows:

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

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

However, by using the spread operator, you can pass an array into the function.

shell
doStuff(...args);

4. Destructuring Arrays

You can use destructuring and the rest operator together to extract the information into variables as you'd like them:

shell
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. Function Arguments as Rest Parameters

ES6 also has three dots (...) which indicates a rest parameter that collects all remaining arguments of a function into an array.

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

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

6. Using Math Functions

Any function where spread is used as the argument can be used by functions that can accept any number of arguments.

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

7. Combining Two Objects

You can use the spread operator to combine two objects. This is an easy and cleaner way to do it.

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

var carFuel = 'Petrol';

var carData = {
  ...carType,
  carFuel
}

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

8. Separate a String into Separate Characters

You can use the spread operator to spread a string into separate characters.

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

You can think of more ways to use the Spread Operator. What I have listed here are the popular use cases of it.

The three dots in JavaScript are the spread / rest operator.

Spread operator

The spread syntax allows an expression to be expanded in places where multiple arguments are expected.

shell
myFunction(...iterableObj);

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

[...Array(10)]

Rest parameters

The rest parameter syntax is used for functions with a variable number of arguments.

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

The spread / rest operator for arrays was introduced in ES6. There's a State 2 proposal for object spread / rest properties.

TypeScript also supports the spread syntax and can transpile that into older versions of ECMAScript with minor issues.