Question

是什么，当您将数据作为参数发送到事件处理程序或使用事件对象的值时，如果在性能或执行上存在任何差异。因此，在此示例中，取自有关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
  });
};

哪种方法更好，更可取？

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

在将数据作为参数传递或从事件处理程序函数中的事件对象获取数据时有区别吗？

2 个答案: