React类组件中如何正确绑定带两个参数的事件处理函数？

你在render中使用箭头函数传参的写法语法完全合规，功能也不会出现异常，唯一的影响在性能层面，可结合实际使用场景判断是否需要优化。
大家通常不推荐在render内执行bind或者写箭头函数，核心原因是：每次组件执行render时都会生成全新的函数实例，如果这个按钮是React.PureComponent，或者你把这个事件处理函数作为prop传给了其他纯组件，会导致纯组件的prop浅比对失败，触发不必要的重渲染，在列表项多、渲染频繁的场景下会产生可感知的性能损耗。如果你的组件本身逻辑简单、渲染频率低，当前的写法完全可以正常使用，不需要额外修改。

以下是不同场景下的优化方案： #

方案1：constructor预绑定（仅适用于固定参数场景） #

如果要传递的参数是固定不变的，可以直接在constructor绑定this时提前传入参数：

class Foo extends React.Component{
  constructor( props ){
    super( props );
    // 提前绑定固定参数'1'
    this.handleClick = this.handleClick.bind(this, '1');
  }
 
  handleClick(a, event){
    // a为预绑定的'1'，第二个参数自动接收事件对象
  }
 
  render(){
    return (
      <button type="button" onClick={this.handleClick}>
        Click Me
      </button>
    );
  }
}

该写法不会在render阶段生成新函数，性能最优，但仅适合参数固定的场景，无法处理列表循环项id这类动态参数。 #

方案2：data属性传参（适用于可序列化参数的动态场景） #

如果参数是可序列化的字符串/数字，可以把参数存在DOM的自定义属性上，直接从事件对象中取值，不需要额外传参：

class Foo extends React.Component{
  constructor( props ){
    super( props );
    this.handleClick = this.handleClick.bind(this);
  }
 
  handleClick(event){
    const a = event.currentTarget.dataset.a;
    // 拿到参数后处理逻辑
  }
 
  render(){
    return (
      <button type="button" data-a="1" onClick={this.handleClick}>
        Click Me
      </button>
    );
  }
}

该写法同样不会在render阶段生成新函数，性能最优，也支持动态参数，唯一限制是只能传可序列化的简单类型参数，无法传递函数、对象这类复杂参数。 #

方案3：类属性高阶函数写法（适用于复杂参数传递场景） #

把事件处理函数写成高阶函数形式，接收自定义参数后返回真正的事件处理函数，结合类属性箭头函数自动绑定this：

class Foo extends React.Component{
  handleClick = (a) => (event) => {
    // 直接获取a和event处理逻辑
  }
 
  render(){
    return (
      <button type="button" onClick={this.handleClick('1')}>
        Click Me
      </button>
    );
  }
}

该写法代码更简洁，不需要手动在constructor绑定this，支持传递任意类型的参数，缺点和render内写箭头函数一致，每次render都会生成新的函数实例，存在潜在的不必要重渲染风险。 #

总结 #

如果你的组件没有明显的性能问题，直接使用现有render内箭头函数的写法即可，不需要过度优化；如果有性能优化需求，可以根据参数的类型、是否固定选择上面对应的方案。

内容的提问来源于stack exchange，提问作者Vlad