reactjs 事假处理之this的正确绑定

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

1.第一种使用属性初始化器（这是实验性语法不推荐）

class App extends React.Component {

  handleClick = () => {
    console.log('this is:', this);
  }

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

2.第二种 在构造函数bind ()推荐

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
handleClick = () => {
    console.log('this is:', this);
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

3.第三种在回调函数中使用箭头函数

class App extends React.Component {

handleClick = () => {
    console.log('this is:', this);
  }
  render() {
    return (
      <button onClick={(e)=>{this.handleClick(e)}}>
        Click me
      </button>
    );
  }
}

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