React性能优化：在render()内部创建变量

Question

在组件的render方法中实例化props，会有性能损耗吗（尽管很小）？我的理论是，在每次渲染时，这个变量都会在内存中重新创建。在许多组件上，这可能会导致显著的性能影响。

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

- AndrewMcLagan

Answer 1

这并没有真正地增加内存。你只是创建了一个新的引用(reference)，它只是指向同一块内存，这相当有效。

如果你更改引用的值，那么你实际上会在内存中创建一个新块，并且你的引用将指向该新块。现在我们必须考虑如何节省内存。

这还有其他影响：

• 你的代码压缩效果如何以及
• JS将不得不反复从this到props多次更换范围。如果这是一个更大的循环或者是一个频繁更新的组件，我肯定会尝试使用引用(reference)，以便减少范围变化对周期的影响。

我强烈建议观看这个非常有信息量的视频：JavaScript Classes and Scoping。在4:03的时候，Jay Garcia解释了JavaScript中引用(reference)的工作原理。

- Grgur

---

链接加一！ - AndrewMcLagan

Answer 2

不需要。这并不相关。也许可以称之为过早优化。但它并没有真正优化任何东西。你应该使用jsperf测试一下，会发现这完全没有关系。甚至在100万次迭代中可能会慢1毫秒。但这并不相关或可感知。

- DDS