在React组件开发中，我们经常需要将父组件接收的属性传递给子组件，展开运算符是实现这一需求的高效语法。它简化了属性逐个传递的繁琐过程，让代码更简洁易维护。
展开运算符在Props转发中的基础语法
展开运算符...用于JSX的Props传递时，可以将一个对象的所有可枚举属性展开为独立的组件属性。最常见的场景是父组件向子组件传递全部或部分属性。
比如我们有一个基础按钮组件，父组件需要将接收到的所有属性都传递给它：
// 子组件：基础按钮
function BaseButton(props) {
return <button style={props.style} className={props.className}>{props.children}</button>
}
// 父组件：使用展开运算符传递Props
function ParentComponent() {
const buttonProps = {
style: { color: 'red', fontSize: '16px' },
className: 'custom-btn',
onClick: () => console.log('按钮被点击')
}
return <BaseButton {...buttonProps}>点击我</BaseButton>
}
上面的代码中，{...buttonProps}会把buttonProps对象的所有属性展开，等价于手动写style={buttonProps.style} className={buttonProps.className} onClick={buttonProps.onClick}。
展开运算符的合并与覆盖规则
展开运算符还可以和其他属性结合使用，后面的属性会覆盖前面展开的同名属性：
function ParentComponent() {
const baseProps = {
className: 'base-btn',
disabled: false
}
// 这里的onClick会新增，disabled会覆盖baseProps里的false为true
return <BaseButton {...baseProps} disabled={true} onClick={() => {}} />
}
展开运算符的内部转换机制
JSX语法本身不是浏览器可直接执行的代码，需要经过编译器（通常是Babel）转换为普通的JavaScript函数调用。展开运算符在Props转发中的转换逻辑是理解其内部机制的关键。
JSX到createElement的转换
React中所有的JSX元素最终都会被转换为React.createElement函数的调用。对于带有展开运算符的JSX元素，编译器会先处理展开逻辑，再生成对应的函数参数。
比如下面的JSX代码：
<BaseButton {...buttonProps} id="btn1" />
经过Babel转换后会变成：
React.createElement(BaseButton, Object.assign({}, buttonProps, { id: "btn1" }))
可以看到，展开运算符的处理本质是调用Object.assign方法，将展开的对象、后续显式定义的属性合并成一个新的对象，作为createElement的第二个参数（也就是组件的props对象）。
合并逻辑的优先级
从转换后的代码可以看出，Object.assign的参数是依次合并的，后面的对象属性会覆盖前面的同名属性，这也解释了为什么手动写的属性会覆盖展开对象里的同名属性。
我们可以用一个更直观的例子验证这个逻辑：
const obj1 = { a: 1, b: 2 }
const obj2 = { b: 3, c: 4 }
const merged = Object.assign({}, obj1, obj2)
console.log(merged) // 输出 { a: 1, b: 3, c: 4 }
这和JSX中使用展开运算符时的属性覆盖规则完全一致。
使用展开运算符的注意事项
- 不要盲目展开所有属性，避免传递无关属性给子组件，比如传递DOM不支持的属性会导致警告。
- 展开对象如果是undefined或者null，React会自动忽略，不会报错，但最好提前做好空值处理。
- 展开运算符是浅拷贝，如果传递的对象包含嵌套引用类型，修改子组件内的嵌套属性会影响原对象。
如果需要过滤不需要传递的属性，可以先对对象进行解构，再传递剩余属性：
function ParentComponent() {
const allProps = {
className: 'btn',
style: { color: 'blue' },
internalProp: '不需要传递的属性' // 子组件不需要的属性
}
// 解构出不需要的属性，剩下的传递给子组件
const { internalProp, ...validProps } = allProps
return <BaseButton {...validProps}>过滤后传递</BaseButton>
}
掌握展开运算符的语法和内部机制，能帮助我们更清晰地理解React的属性传递逻辑，写出更健壮的组件代码。