React中用ES6对象展开运算符传递props为何转为键值属性？

首先要明确：ES6对象展开语法和JSX中的展开语法是两个语法相似但作用场景、处理逻辑完全不同的特性，并非React库直接做了“格式转换”，核心区别在转译阶段。

1. 普通ES6对象展开：原生JS引擎处理 #

你写的：

const obj1 = { foo: 'bar', x: 42 };
const clonedObj = { ...obj1 };

这是ES标准的对象展开语法，由JS原生引擎执行，作用是将原对象的所有可枚举键值对复制到新对象中，最终结果仍然是一个标准JS对象——这部分和React完全无关，是JS本身的特性。

2. JSX中的展开：转译器（如Babel）的语法糖处理 #

JSX本身不是原生JS，它需要通过Babel、TypeScript这类转译器转换成原生JS代码才能运行。当你在JSX中写：

<Component {...obj1} />

转译器会把这个语法转换成：

React.createElement(Component, obj1, null);

而如果你手动写逐个props的形式：

<Component foo="bar" x={42} />

转译后是：

React.createElement(Component, { foo: "bar", x: 42 }, null);

关键逻辑： #

React.createElement的第二个参数就是组件的props对象——不管你是手动写key={value}，还是用{...obj}，最终都会被转译成一个props对象传给这个方法。

如果同时混合手动props和展开语法，比如：

<Component a={1} {...obj1} />

转译器会用Object.assign合并成一个完整的props对象：

React.createElement(Component, Object.assign({}, { a: 1 }, obj1), null);

3. 为什么看起来像“格式转换”？ #

你觉得的“从对象属性转为键值对属性”，本质是JSX语法的设计逻辑：

• 在JSX标签中写key={value}，本质是在构建props对象的键值对；
• {...obj}是转译器提供的语法糖，帮你省略了逐个手写obj中所有键值对的步骤，直接把obj的内容合并到props对象里。

整个过程中，React库只是接收转译后的props对象，再把它传递给组件——真正的“转换”是转译器在处理JSX语法时完成的，而非React运行时的魔法。

内容的提问来源于stack exchange，提问作者j obe