React：道具解构和内存使用

Question

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

我有 2 个例子可以说明我在说什么。第一个使用解构赋值并只调用每个常量一次。第二个每次使用时调用 this.props 并且不提前声明它们。哪个占用的内存少？我们的代码库在 2 之间相当平均地分配，但我很好奇哪种方式更适合扩展。

单引用变量解构赋值：

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;

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

React：道具解构和内存使用

React: Props destructuring and memory usage

javascript

memory

destructuring

ecmascript-6

reactjs