Question

如果声明的常量仅使用一次，使用解构分配是否会影响内存使用/性能？在其他语言（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

两个代码在性能和内存使用方面没有区别。

更多关于代码可读性：您的第一个解决方案使JSX更简洁，更易于阅读。特别是如果你重复使用几次相同的道具。

如果您对性能或内存使用情况有疑问，请打开Google Chrome开发者工具并开始监控您的应用。在发现问题之前不要进行微观优化。

React：道具解构和内存使用

1 个答案: