React事件处理笔记二

回调函数中的 this，类的方法默认是不会绑定 this 的。如果忘记绑定 this.handleClick 并把它传入 onClick, 当调用这个函数的时候 this 的值会是 undefined。

这并不是 React 的特殊行为；它是函数如何在 JavaScript 中运行的一部分。通常情况下，如果没有在方法后面添加 () ，例如 onClick={this.handleClick}，应该为这个方法绑定 this。

使用 bind 有两种方式可以解决。如果正在使用实验性的属性初始化器语法，可以使用属性初始化器来正确的绑定回调函数：

class LoggingButton extends React.Component {

  // 这个语法确保了 `this` 绑定在  handleClick 中

  // 这里只是一个测试

  handleClick = () => {

    console.log('this is:', this);

  }

  render() {

    return (

      <button onClick={this.handleClick}>

        Click me

      </button>

    );

  }

}

如果没有使用属性初始化器语法，可以在回调函数中使用 箭头函数：

class LoggingButton extends React.Component {

  handleClick() {

    console.log('this is:', this);

  }

  render() {

    //  这个语法确保了 `this` 绑定在  handleClick 中

    return (

      <button onClick={(e) => this.handleClick(e)}>

        Click me

      </button>

    );

  }

}

使用这个语法有个问题就是每次 LoggingButton 渲染的时候都会创建一个不同的回调函数。在大多数情况下，这没有问题。然而如果这个回调函数作为一个属性值传入低阶组件，这些组件可能会进行额外的重新渲染。通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。