react中class组件事件处理中的this绑定

共有三种绑定方式，通常建议在构造器中绑定或使用 class fields 语法来避免这类性能问题

1.构造函数中通过bind手动绑定

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

    // 为了在回调中使用 `this`，这个绑定是必不可少的
    this.handleClick = this.handleClick.bind(this);
  }

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

  render() {
    return (
      
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      
    );
  }
}

ReactDOM.render(
  ,
  document.getElementById('root')
);

2.使用 class fields 正确的绑定回调函数，该语法处于实验中

class LoggingButton extends React.Component {
  // 此语法确保 `handleClick` 内的 `this` 已被绑定。
  // 注意: 这是 *实验性* 语法。
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      
        Click me
      
    );
  }
}

3.回调中使用箭头函数

副作用：如果该回调函数作为 prop 传入子组件时，这些组件可能会进行额外的重新渲染

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

  render() {
    // 此语法确保 `handleClick` 内的 `this` 已被绑定。
    return (
       this.handleClick(e)}>
        Click me
      
    );
  }
}