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

Answer 1

它并没有真正增加内存。您正在创建一个新的引用，只需指向到同一个内存块，这是非常有效的。

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

还有其他含义：

how well your code minifies和
JS必须连续多次从this到props重复更改范围。如果这是一个更大的循环或经常更新的组件，我肯定会尝试使用引用，以便范围的更改影响周期少一点。

我强烈建议在JavaScript Classes and Scoping上提供这个内容丰富的视频，其中Jay Garcia解释了引用在4:03标记的JavaScript中的工作原理

Answer 2

没有。它也真的不相关。也许它可以被称为过早优化。但它并没有真正优化任何东西。你应该jsperf它，并发现它完全无关紧要。它甚至可能比1m迭代慢1ms。但这并不相关或不可察觉。

反应性能：在render（）

2 个答案: