Question

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

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

第一个选项是将每个Arrow组件的箭头函数作为onClick处理程序传递给相应的方向：

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


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

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

所以第二种选择是为每种情况声明一个特定的处理程序：

  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个不同的方向，那该怎么办）

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

谢谢！

Answer 1

As stated in this answer您可以使用箭头功能（性能问题通常无法察觉），也可以采用React方式：创建新组件或修改您拥有的组件。在这种情况下，您可以更改Arrow组件，以便组件的处理函数调用您使用itemValue发送的函数，并将其作为支柱提供：

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

然后，在Arrow组件中，您可以在处理点击的功能中执行类似的操作：

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

这是一个比你提出的第二个更优雅和可重复使用的解决方案，性能会很好。但是，除非您知道将呈现许多组件，否则我可能会坚持使用箭头功能。

Answer 2

除非您每秒渲染Arrow个组件一百万次，否则您无需担心性能问题。使用方便的任何东西。首先考虑可读性。代码只写一次，但多次读取。

将参数传递给React

2 个答案: