React类组件方法传参：兼顾优雅可读性与性能的方案探讨

这确实是React类组件开发中很典型的权衡问题——既要代码简洁优雅，又不想因为频繁创建函数带来不必要的性能开销。你提到的两种方案各有优劣，但其实还有更平衡的解决办法：

方案1：利用DOM自定义属性传递参数 #

我们可以给<Arrow>组件绑定自定义属性（比如data-dir），然后在父组件的统一处理函数中通过事件对象获取这个参数。这样既不需要每次渲染创建新函数，也不用写多个重复的处理方法：

// 父组件的处理函数
switchItem = (event) => {
  // 从事件目标的自定义属性中获取方向值
  const dir = parseInt(event.currentTarget.dataset.dir, 10);
  this.setState(prevState => ({
    item: prevState.item + dir
  }));
};

// 渲染Arrow组件
<Arrow left data-dir="-1" onClick={this.switchItem} />
<Arrow right data-dir="1" onClick={this.switchItem} />

这个方案的优势很明显：

• 只需要一个处理函数，复用性拉满，哪怕有10个不同方向的箭头也不用额外加代码
• 不会在每次渲染时创建新的函数实例，避免了不必要的重渲染触发（尤其是当<Arrow>是复杂组件时）
• 代码简洁，逻辑清晰

方案2：让子组件传递参数（更适合自定义组件场景） #

如果<Arrow>是你自己封装的自定义组件，还可以把方向作为props传给子组件，让子组件在触发点击时主动把方向参数传递给父组件的回调：

首先改造<Arrow>子组件：

class Arrow extends React.Component {
  handleClick = () => {
    // 子组件触发点击时，把props中的方向传给父组件的回调
    this.props.onClick(this.props.dir);
  };

  render() {
    const { left, right } = this.props;
    return (
      <button className={left ? 'arrow-left' : 'arrow-right'} onClick={this.handleClick}>
        {/* 箭头图标或内容 */}
      </button>
    );
  }
}

然后父组件这样使用：

// 父组件的处理函数和之前一样
switchItem = (dir) => {
  this.setState(prevState => ({
    item: prevState.item + dir
  }));
};

// 直接把方向作为props传给Arrow
<Arrow left dir={-1} onClick={this.switchItem} />
<Arrow right dir={1} onClick={this.switchItem} />

这个方案的好处是逻辑更内聚：子组件明确知道自己要传递什么参数给父组件，不需要依赖DOM属性，类型检查（比如PropTypes）也更容易做，维护起来更友好。

原方案的适用场景分析 #

• 箭头函数方案：如果你的组件渲染频率很低（比如页面上只有这两个箭头，不会频繁重渲染），那完全可以放心用！这种写法最简洁优雅，所谓的“性能问题”在大多数小型场景下微乎其微，几乎不会被用户感知到。只有当组件处于高频渲染的场景（比如在长列表中、或者和动画联动的组件），才需要考虑性能优化。
• 多个处理函数方案：除非每个方向的逻辑有很大差异（比如除了切换item还要做其他不同的操作），否则不推荐——冗余代码太多，复用性差，维护成本高。

总结首选方案 #

如果要兼顾性能、可读性和复用性，优先选择上面提到的两种优化方案（自定义属性或子组件传递props）；如果是小型场景、性能要求不高，箭头函数的写法是最优雅的首选，不用过度优化。

内容的提问来源于stack exchange，提问作者Théo Champion