将数据作为参数传递或从事件处理程序函数中的事件对象获取数据的差异

Question

什么是

，如果将数据作为参数发送到事件处理程序或使用事件对象中的值时性能或执行有任何差异。所以，在这个例子中，取自关于 React 的教程，你可以在这里找到它的存储库。

{photos.map((photo, index) => (
  <img
    onClick={this.handleIndexClick}
    data-index={index}
    key={photo.value}
    src={photo.value}
    className={index === active ? "active" : ""}
    alt="animal thumbnail"
  />
))}

有一个单击处理程序，它从事件对象中获取索引，然后基于该索引设置状态。

handleIndexClick = event => {
  this.setState({
    active: +event.target.dataset.index
  });
};

如果我们直接将索引作为参数发送，性能是否有任何差异？

<img
  onClick={this.handleIndexClick(index)}
  data-index={index}
  key={photo.value}
  src={photo.value}
  className={index === active ? "active" : ""}
  alt="animal thumbnail"
/>

然后函数是这样的：

handleIndexClick = index => {
  this.setState({
    active: +index
  });
};

哪种方法更好和更可取？

Answer 1

我认为在

方法中获取索引值的两种方法在性能上没有区别。事件对象是 React 和 JS 的重要组成部分。因此，教程教您如何使用事件以及如何从事件对象中提取值。您可以选择哪种方式对您来说更舒适并使用它。我更喜欢将值直接传递给函数。但是如果我使用输入，我会从事件对象中提取它的值。

Answer 2

如果有的话，差异将非常小/什么都没有。所以我认为问题归结为什么更具可读性和可维护性。我个人会同意以下内容。

<img
  onClick={this.handleIndexClick(index)}
  data-index={index}
  key={photo.value}
  src={photo.value}
  className={index === active ? "active" : ""}
  alt="animal thumbnail"
/>
handleIndexClick = index => () => {
  this.setState({
    active: +index
  });
};

我认为以上内容更容易阅读和维护。而且我也相信它使用较少的字符。在您的第一个示例中，它是324字符，第二个是 258 。因此，从技术上讲，成本会降低内存，使您的软件包更小，从而导致faster compiling。 Runtime performance我相信是平等的。但就像我在宏伟计划中所说的那样，这并不重要，归结为你的代码有多readable和maintainable。

另外，我想您不需要将event传递给您onClickHandler.但是，如果你必须通过一个parameter和事件，你会做这样的事情。

handleIndexClick = index => event => {
  this.setState({
    active: +index
  });
  // Can use the event if needed
};