如果看到析构部分的编译代码，可以发现正在设置一个新变量。
例如：

const {
  type,
  size,
} = props;

转换为

var type_1 = props.type; // dummy_name
var size_1 = props.size;

因此，设置了一个额外的变量，内存消耗相对较高。但是，性能上的差异非常小。

在这种情况下，肯定是第二个选项**（严格地说是这种情况）**。
在某些情况下，您会为了可读性而牺牲一点效率，这对大多数人来说很容易判断。
性能差异非常小，但确实存在。

网址：https://jsperf.com/destructuring-performance

在浏览器和我的本地节点应用程序中。破坏者获胜！在浏览器中差异更大，但是如果转译器扰乱了js代码，那么解构可能会对“构建”时间产生负面影响。

const user = {
  name: 'John',
  age: 30,
  email: 'john@example.com',
};

console.time('Direct Key Access');
for (let i = 0; i < 1000000; i++) {
  const name = user.name;
  const age = user.age;
  const email = user.email;
  
  // Perform an operation with the values
  const result = `${name} is ${age} years old and their email is ${email}`;
}
console.timeEnd('Direct Key Access');

console.time('Destructuring');
for (let i = 0; i < 1000000; i++) {
  const { name, age, email } = user;
  
  // Perform an operation with the values
  const result = `${name} is ${age} years old and their email is ${email}`;
}
console.timeEnd('Destructuring');