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 传递更加灵活和简洁。