例如,当您将数据作为参数发送到事件处理程序或使用事件对象中的值时,性能或执行是否存在任何差异。所以,在这个例子中,从关于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
});
};
哪种方法更好,更受欢迎?
我认为在方法中获取索引值的两种方法之间的性能没有区别。事件对象是React和JS的重要组成部分。因此,教程教您如何使用事件以及如何从事件对象中提取值。您可以选择哪种方式更适合您并使用它。我更喜欢将值直接传递给函数。但如果我使用输入,我从事件对象中提取它的值。
差异,如果有的话会非常小/没有。所以我认为问题归结为更具可读性和可维护性的问题。我个人会跟以下一起去。
<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
};