javascript - react 性能 : creating variables within render()

Question

在组件的渲染方法中实例化 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

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

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

还有其他含义:

• how well your code minifies和
• 事实上，JS 必须连续多次将作用域从 this 更改为 props。如果这是一个更大的循环或一个经常更新的组件，我肯定会尝试使用引用，这样范围的变化对循环的影响就会小一些。

我强烈建议在 JavaScript Classes and Scoping 上观看这个内容丰富的视频其中 Jay Garcia在 4:03 处解释引用在 JavaScript 中的工作方式