反应性能:在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}
    />
  );
}  

Answer 1

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

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

还有其他含义:

• 你的代码如何缩小和
• 事实上,JS将不得不从反复更改范围this来props几次连续.如果这是一个更大的循环或经常更新的组件,我肯定会尝试使用引用,以便范围的更改影响周期少一点.

我强烈建议这个关于JavaScript类和范围的非常丰富的视频,其中Jay Garcia解释了引用在4:03标记的JavaScript中如何工作