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

- sandrasaur

---

JS的一般规则是，除非你特别注意到了问题，否则不要担心它。现在所有常见的引擎都是JIT，因此这些变量完全可能被优化掉。归根结底，这个问题无法回答，因为它取决于JIT所做的任何优化，甚至可能会因代码使用方式而在同一引擎内有所不同。 - loganfsmyth

@loganfsmyth 在哪里可以找到有关使用属性解构的 JIT 的更多详细信息？ - Junior Usca

Answer 1

I would argue with the first answer. When doing

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

你需要为这些变量分配内存。虽然你需要一些额外的内存，但它不会很显著，因为对象（包括数组、函数等）将被定义为引用/指针。

- givehug

---

在大多数情况下，性能差异可以忽略不计。我之所以来到这里，是因为我有一个场景，需要循环遍历数百甚至数千次迭代，每次迭代都会解构一两个变量。对于我的情况，优化至关重要。在那种规模下，差异是否明显？ - Seth Lutske