使用参数处理事件处理函数的更好方法是什么？

Question

我试图实现事件处理函数，以避免每次组件渲染和重新渲染时创建新函数。

场景1：

如果我像下面那样在构造函数中绑定函数，并且在onChange中没有参数，那么它只会在bundle文件中创建一个新函数一次

 constructor(props){
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
       value: ""
    }
 } 

 handleChange(e){
    this.setState({
       value: e.target.value
    });
 }

 render(){
    const { value } = this.state;
    return(
      <div>
        <input type="text" onChange={this.handleChange} value={value} />
      </div>
    )
 }

场景2：

但是，当我想将一些参数以及事件传递给handleChange函数时，我相信每当组件呈现和重新呈现

 constructor(props){
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
       value: ""
    }
 } 

 handleChange(e, param1, param2){
    this.setState({
       value: e.target.value
    });
 }

 render(){
    const { value } = this.state;
    return(
      <div>
        <input type="text" onChange={e => this.handleChange(e, param1, param2)} value={value} />
      </div>
    )
 }

所以

如何更好地编写场景2，使新函数在bundle文件中只创建一次，而不是每次组件渲染和重新渲染时都创建一次？可能吗？

编辑：

param1和param2是我自己的自定义值。

Answer 1

如果目标组件可以传递多个参数（输入显然不能），那么第二个场景就不需要箭头函数了：

 render(){
    const { value } = this.state;
    return(
      <div>
        <CustomInput type="text" onChange={this.handleChange} value={value} />
      </div>
    )
 }

示例：

class CustomInput extends React.Component {
  constructor(props) {
    super(props);
    
    this.inputHandleChange = this.inputHandleChange.bind(this);
  }
  
  inputHandleChange(e) {
    this.props.onChange(e, e.target.value.length, 'param2');
  }
  
  render() {
    return (
      <input {...this.props} onChange={this.inputHandleChange} />
    );
  }
}

class InputWrapper extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      value: ""
    }
  }

  handleChange(e, param1, param2) {
    console.log(e.target.value, param1, param2);
    
    this.setState({
      value: e.target.value
    });
  }

  render() {
    const {
      value
    } = this.state;
    return (
      <div>
        <CustomInput type="text" onChange={this.handleChange} value={value} />
      </div>
    )
  }
}

ReactDOM.render(
  <InputWrapper />,
  demo
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>


<div id="demo"></div>