Javascript 反应性能：在render（）中创建变量

在组件的渲染方法中实例化道具时，是否会对性能造成影响（尽管影响很小）？我的理论是，在每次渲染时，都会在内存中重新创建此变量。在许多组件上，这会增加显著的性能影响吗

render() {

  const { title, pages, pictures, cover } = this.props;

  return (
    <Book
      title={title}
      pages={pages}
      pictures={pictures}
      cover={cover}
    />
  );
}

// VS the follow

render() {

  return (
    <Book
      title={this.props.title}
      pages={this.props.pages}
      pictures={this.props.pictures}
      cover={this.props.cover}
    />
  );
}  

render（）{
const{title，pages，pictures，cover}=this.props；
返回(
);
}
//VS跟随者
render（）{
返回(
);
}  

没有。而且这真的不相关。也许这可以称为过早优化。但它并没有真正优化任何东西。你应该对它进行jsperf，并发现它完全不重要。它甚至可能在1百万次迭代中慢1毫秒。但这并不相关，也不可感知。

它实际上并没有增加多少记忆。您正在创建一个新的引用，它只指向同一个内存块，这非常有效

如果更改引用的值，则实际上在内存中创建了一个新块，并且引用将指向该新块。现在我们必须考虑保存内存

还有其他影响：

• 及
• JS必须连续多次将作用域从

  this

  更改为

  props

  。如果这是一个更大的循环或是一个经常更新的组件，我肯定会尝试使用引用，这样范围的更改对循环的影响就会小一些

---

我强烈建议观看这段内容丰富的视频，它将在4:03点解释JavaScript中的引用是如何工作的

加上一个链接！