Javascript 在React中将参数传递给方法

我正在探索如何在不影响性能的情况下将参数传递给React类方法的最优雅/可读的方法

假设我有两个箭头组件在项目之间切换。每个箭头都会侦听click事件，并根据方向触发父级上的状态更改

第一个选项是向每个Arrow组件传递一个Arrow函数作为onClick处理程序，并具有相应的方向：

  switchItem = dir => {
    this.setState(pv => ({ item: (pv.item += dir) }));
  };


  <Arrow left onClick={() => this.switchItem(-1)} />
  <Arrow right onClick={() => this.switchItem(1)} />

这非常优雅，但由于在每次渲染时重新创建函数，会导致性能问题。同样的问题也适用于咖喱

因此，第二个选项是为每种情况声明一个特定的处理程序：

  previousItem = () => {
    this.setState(pv => ({ item: (pv.item -= 1) }));
  };

  nextItem = () => {
    this.setState(pv => ({ item: (pv.item += 1) }));
  };

  <Arrow left onClick={this.previousItem} />
  <Arrow right onClick={this.nextItem} />

这不会导致性能问题，但非常冗长且不可重用，如果我们有10个不同的箭头和10个不同的方向怎么办

还有其他更好的选择吗？如果不是，首选的方式是什么

---

谢谢

除非每秒渲染100万次箭头组件，否则不必担心性能。使用任何对你方便的东西。把可读性放在第一位。代码只编写一次，但要反复阅读。

您可以使用箭头函数（性能问题通常不会被注意到），也可以按反应方式执行：创建新组件或修改现有组件。在这种情况下，您可以更改Arrow组件，以便该组件的处理程序函数调用您发送给它的函数，并使用itemValue作为道具提供：

  <Arrow left onClick={this.switchItem} itemValue={-1} />

---

与您提出的第二个解决方案相比，这是一个更加优雅和可重用的解决方案，而且性能会非常好。但是，除非您知道将呈现许多组件，否则我可能会坚持使用arrow函数。

我也探讨了此选项，但是这可以防止arrow成为无状态的功能组件。无论如何，它可能完全是无状态的，因为此函数只依赖于道具！您还可以使用此逻辑为Arrow组件创建一个包装器组件，以防出于任何原因不希望它出现在那里。无论如何，性能都会很好。最初的帖子中没有性能问题。OP只是制造了一个不存在的问题。这只是给不需要它的代码添加了更多的膨胀。另外，如果您要创建另一个组件，则至少要创建两个单独的组件-ArrowLeft和ArrowRight，其中封装了逻辑和外观。这样，你就不需要给他们每人传递3个道具，而只需要一个。@HonzaKalfus没有性能问题是什么意思？是否没有明显的性能问题？@ThéoChampion没有明显的问题。您的代码可能会慢几微秒。您不应该真的担心它，而应该专注于编写可读的代码；

  handleClick = () => {
    this.props.onClick(this.props.itemValue);
  }