Question

使用JSX语法在ReactJS组件中定义事件处理程序有不同的方法。

<input onChange={this.handleChange.bind(this)}></input>  // inline binding

和

<input onChange={() => this.handleChange()}></input>  // using arrow function

两者都允许handleChange函数访问组件的this范围。

我一直在使用第一种语法，因为它的可读性更加清晰。

是否有任何优势或用例可以使用另一个？

Answer 1

From the React Docs

class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

此语法的问题是每次LoggingButton呈现时都会创建不同的回调。在大多数情况下，这很好。但是，如果将此回调作为prop传递给较低组件，则这些组件可能会进行额外的重新呈现。我们通常建议在构造函数中使用绑定或使用属性初始化程序语法来避免这种性能问题。

所以，你应该使用bind，你可以用两种方式做到这一点。

From the React Docs

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

如果bind让你烦恼，那么你就可以这样做

class LoggingButton extends React.Component {
  // This syntax ensures `this` is bound within handleClick.
  // Warning: this is *experimental* syntax.
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

我能想到的唯一优势就是在顶层方法中你可以将参数传递给handleClick函数。但我无法想象你可能会在哪些方面做到这一点。

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
  }

  handleClick(e, something) {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
    alert(something)
  }

  render() {
    return (
      <button onClick={(e) => this.handleClick(e, "Yo!")}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

Answer 2

您可以在构造函数中绑定函数：

constructor(){
    super();
    this.handleChange= this.handleChange.bind(this);
}

但最好的方法是使用箭头功能定义你的方法：

handleChange = () => {}

在此变体中，每次组件渲染时都会运行bind：

<input onChange={this.handleChange.bind(this)}></input>

当您需要将某些内容传递给方法时，会使用箭头函数：

<input onChange={() => this.handleChange(params)}></input>

因为：

<input onChange={this.handleChange(params)}></input>

组件渲染时会触发。

选中arcticle。

在ReactJS组件中定义事件处理程序的正确方法是什么？

2 个答案: