javascript - 这种 React prop 传递模式对内存有害吗？

Question

我已经看到这种将 Prop 传递给组件的模式:

<Component { ...{ propToPass, anotherProp } } />

相对于:

<Component propToPass={propToPass} anotherProp={anotherProp} />

我想知道实例化一个对象并立即传播内容是否可能会占用内存，或者差异是否可以忽略不计？

Answer 1

React JSX 通常是用 Babel 进行转换的，你可以在线使用 Babel Playground 看看它编译成什么。

// input
const e1 = <Component { ...{ propToPass, anotherProp } } />

const e2 = <Component propToPass={propToPass} anotherProp={anotherProp} />

// output
"use strict";

var e1 = /*#__PURE__*/React.createElement(Component, {
  propToPass: propToPass,
  anotherProp: anotherProp
});
var e2 = /*#__PURE__*/React.createElement(Component, {
  propToPass: propToPass,
  anotherProp: anotherProp
});

他们是一样的!所以你不会看到任何差异。