将数据作为参数传递或从事件处理程序函数中的事件对象中获取它的区别?

问题描述 投票:0回答:2

例如,当您将数据作为参数发送到事件处理程序或使用事件对象中的值时,性能或执行是否存在任何差异。所以,在这个例子中,从关于React的教程中可以找到here

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

哪种方法更好,更受欢迎?

javascript reactjs event-handling
2个回答
0
投票

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


0
投票

差异,如果有的话会非常小/没有。所以我认为问题归结为更具可读性和可维护性的问题。我个人会跟以下一起去。

<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 compilingRuntime performance我相信是平等的。但就像我在宏观计划中所说的那样,并不重要,并且归结为你的代码是如何readablemaintainable的。

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

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

  // Can use the event if needed
};
© www.soinside.com 2019 - 2024. All rights reserved.