React 中的三个点 (...) 有什么作用？

在 React 中，三个点 (...) 是 ES6 中的扩展语法。这个扩展语法可以让你轻松地将一个列表或对象展开成另一个列表或对象。

展开数组

使用三个点 (...) 可以将一个数组展开为另一个数组。例如：

const list1 = [1, 2, 3];
const list2 = [4, 5, 6];
const newList = [...list1, ...list2];

console.log(newList); // [1, 2, 3, 4, 5, 6]

在 React 中，展开数组的语法通常用在渲染列表时。例如：

const list = ["apple", "banana", "orange"];

function MyComponent() {
  return (
    <ul>
      {list.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

其中，list.map 方法返回了一个新的数组，将列表中的每个元素转换成一个 <li> 元素。展开数组的语法可以让这个新数组直接插入到 JSX 中，例如：

const list = ["apple", "banana", "orange"];

function MyComponent() {
  return (
    <ul>
      {[...list.map((item) => <li key={item}>{item}</li>)]}
    </ul>
  );
}

展开对象

使用三个点 (...) 还可以将一个对象的所有属性展开到另一个对象中。例如：

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

console.log(obj2); // { a: 1, b: 2, c: 3 }

在 React 中，展开对象的语法通常用在传递组件属性时。例如：

const props = { name: "Alice", age: 30 };

function MyComponent({ name, age }) {
  return <div>{name} ({age})</div>;
}

<MyComponent {...props} />;

其中，<MyComponent {...props} /> 将对象 props 中的所有属性都传递给了组件 MyComponent。在组件内部，我们可以使用解构语法来获取这些属性。

剩余参数

除了展开数组和对象，三个点 (...) 还可以用来获取函数的剩余参数。例如：

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3)); // 6

在 React 中，我们可以使用这个语法来将属性传递给子组件。例如：

function ParentComponent(props) {
  const { childProp, ...restProps } = props;
  return <ChildComponent {...restProps} />;
}

在这个例子中，我们先使用解构语法将 childProp 属性提取出来，剩余的属性就会被放在 restProps 对象中。然后，我们用展开对象的语法将剩余属性传递给子组件 ChildComponent。这样做可以帮助我们减少代码的重复。