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

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

相对于:

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

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

请您参考如下方法:

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 
}); 

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


评论关闭
IT虾米网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!