react 组件中this的问题

class Toggle extends  React.Component {

  constructor (props) {
    super(props);
    this.state = { isToggleOn: true }
    this.handleClick = this.handleClick.bind(this)

  }
  handleClick() {
      //...
  }
  return (

    <button onClick={this.handleClick}>
      {this.state.isToggleOn ? 'on':'off'}
    </button>
  )
}

绑定this方式1

class Toggle extends React.Component {
    handleClick = () => {
        // ...this
    } 
}

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

方式2:箭头函数（属性初始化器语法）

class Toggle extends React.Component {
  handleClick () {
    //this ...
  }
  render () {
      return (
        <button onClick = {(e) => this.handleClick(e)}>
        click me 
        </button>
      )
  }
} 

方式3: 在回调函数中使用 箭头函数

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