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

Question

我尝试实现事件处理函数以避免每次组件呈现和重新呈现时创建新函数。

场景 1:

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

 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:

但是当我想将 一些参数 和 event 一起传递给 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>
    )
 }

所以，

how can I write scenario 2 better so that a new function will be created only once in bundle file but not every time the component renders and re-renders? Is it possible?

编辑:

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

Answer 1

如果目标组件可以传递多个参数(input 显然不能)，你的第二个场景不需要箭头函数就可以工作:

 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>