What are these three dots in React doing?

What are these three dots in React doing?

技术背景

在 JavaScript 中,... 被称为扩展运算符(Spread Operator)或剩余参数(Rest Parameters),它是 ES6 引入的一个强大特性,后被应用到 React 开发里。在 React 开发中,组件间传递 props 是常见操作,当 props 数量众多或者需要动态传递时,逐个列出 props 会让代码变得冗长且难以维护。扩展运算符的出现解决了这一问题,它可以将一个对象或数组展开,使代码更加简洁和灵活。

实现步骤

在 React 中使用扩展运算符传递 props

  1. 定义父组件:在父组件中定义包含多个属性的对象 props
  2. 传递 props:在渲染子组件时,使用扩展运算符 {...props} 将对象的属性展开并传递给子组件。

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 父组件
function ParentComponent() {
const props = {
name: 'John',
age: 30,
city: 'New York'
};
return <ChildComponent {...props} />;
}

// 子组件
function ChildComponent(props) {
return (
<div>
<p>Name: {props.name}</p>
<p>Age: {props.age}</p>
<p>City: {props.city}</p>
</div>
);
}

普通传递方式与扩展运算符传递方式对比

普通传递方式

1
<ChildComponent name="John" age={30} city="New York" />

扩展运算符传递方式

1
2
const person = { name: 'John', age: 30, city: 'New York' };
<ChildComponent {...person} />

核心代码

数组操作

1
2
3
4
5
6
7
8
9
10
// 合并数组
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArray = [...arr1, ...arr2];
console.log(mergedArray); // [1, 2, 3, 4, 5, 6]

// 复制数组
const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];
console.log(copiedArray); // [1, 2, 3]

对象操作

1
2
3
4
5
6
7
8
9
10
// 合并对象
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const mergedObject = { ...obj1, ...obj2 };
console.log(mergedObject); // { a: 1, b: 2, c: 3, d: 4 }

// 复制对象
const originalObject = { x: 1, y: 2 };
const copiedObject = { ...originalObject };
console.log(copiedObject); // { x: 1, y: 2 }

函数参数

1
2
3
4
5
// 函数参数作为剩余参数
function sum(...numbers) {
return numbers.reduce((prev, current) => prev + current);
}
console.log(sum(1, 2, 3, 4)); // 10

最佳实践

  1. 减少代码冗余:当需要传递多个 props 时,使用扩展运算符可以避免手动重复编写每个 prop 的名称和值,使代码更加简洁。
  2. 动态传递 props:在需要根据不同条件传递不同 props 时,扩展运算符可以方便地实现动态传递。
  3. 避免过度使用:虽然扩展运算符很方便,但过度使用可能会导致代码的可读性降低,尤其是在传递大量不相关的 props 时。因此,应谨慎使用扩展运算符,确保只传递必要的 props。

常见问题

扩展运算符只能用于对象和数组吗?

扩展运算符主要用于可迭代对象,如数组、字符串、Set、Map 等。对于普通对象,ES6 也支持使用扩展运算符展开其属性。但对于非可迭代对象,使用扩展运算符会抛出错误。

扩展运算符在合并对象时,属性冲突如何处理?

在合并对象时,如果存在相同的属性名,后面的对象属性会覆盖前面的对象属性。

1
2
3
4
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const mergedObject = { ...obj1, ...obj2 };
console.log(mergedObject); // { a: 1, b: 3, c: 4 }

扩展运算符与 Object.assign() 有什么区别?

  • Object.assign() 是 ES6 之前用于合并对象的方法,它会修改目标对象。
  • 扩展运算符不会修改原始对象,而是创建一个新的对象。
1
2
3
4
5
6
7
const target = { a: 1 };
const source = { b: 2 };
const result1 = Object.assign(target, source);
console.log(target); // { a: 1, b: 2 }

const result2 = { ...target, ...source };
console.log(target); // { a: 1 }

What are these three dots in React doing?
https://119291.xyz/posts/what-are-three-dots-in-react-doing/
作者
ww
发布于
2025年6月23日
许可协议