React：道具解构和内存使用

Question

如果声明的常量只使用一次，使用解构赋值会影响内存使用/性能吗？在其他语言（Java、C 等）中，如果变量只使用一次，最好不要声明它，因为它会分配不必要的内存。 ES6 JS 也是如此吗？

我有两个例子来说明我在说什么。第一个使用解构赋值并且只调用每个常量一次。第二个每次使用时都会调用this.props，并没有提前声明。哪个使用更少的内存？我们的代码库在这两者之间相当均匀，但我很好奇哪种方式更适合规模化。

对单引用变量进行解构赋值：

render(){
   const {
      a, b, c, d, e, f, g, h, i
   } = this.props;
   return(
      <div>
         <div id={a}>some text relevant to a</div>
         <div id={b}>some text relevant to b</div>
         <div id={c}>some text relevant to c</div>
         <div id={d}>some text relevant to d</div>
         <div id={e}>some text relevant to e</div>
         <div id={f}>some text relevant to f</div>
         <div id={g}>some text relevant to g</div>
         <div id={h}>some text relevant to h</div>
         <div id={i}>some text relevant to i</div>
      </div>
   );
}

不为单引用变量声明常量：

render(){
   return(
      <div>
         <div id={this.props.a}>some text relevant to a</div>
         <div id={this.props.b}>some text relevant to b</div>
         <div id={this.props.c}>some text relevant to c</div>
         <div id={this.props.d}>some text relevant to d</div>
         <div id={this.props.e}>some text relevant to e</div>
         <div id={this.props.f}>some text relevant to f</div>
         <div id={this.props.g}>some text relevant to g</div>
         <div id={this.props.h}>some text relevant to h</div>
         <div id={this.props.i}>some text relevant to i</div>
      </div>
   );
}

Answer 1

我会反对第一个答案。做的时候

const {
      a, b, c, d, e, f, g, h, i
} = this.props;

您为这些变量分配内存。尽管您需要一些额外的内存，但这并不重要，因为对象（包括数组、函数等）将被定义为引用/指针。