我收到了这个面试问题，但我不确定什么是最佳答案 在生命周期中，您将何时绑定到事件?在反应中

Question

在

生命周期中的什么时候会绑定到事件？

Answer 1

想象一下组件中的单击处理程序：

import * as React from 'react';
class SomeComponent extends React.Component {
  handleClick(e) {
    this.setState({ clicked: true });
  }
  render() {
    return <button onClick={this.handleClick}/>;
  }
}

显然这是行不通的，因为当调用handleClick时，this 不会设置为组件实例。现在考虑以下替代方案：

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

这样，您就可以在每次渲染上创建一个新版本的函数。与此相同：

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

。因此，一种更有效的方法是绑定构造函数：

class SomeComponent extends React.Component {
  constructor() {
    super(...arguments);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(e) {
    this.setState({ clicked: true });
  }
  render() {
    return <button onClick={this.handleClick}/>;
  }
}

。但这并不是普遍认为的最佳实践。如果你还是使用 babel，你可以将 ECMAScript 提案用于类实例属性：

class SomeComponent extends React.Component {
  constructor() {
    super(...arguments);
  }
  handleClick = e => {
    this.setState({ clicked: true });
  };
  render() {
    return <button onClick={handleClick}/>;
  }
}

。这将this自动绑定到实例。

但简而言之，面试官可能希望你说"在构造函数中"。