React事件绑定this的几种方法

React事件处理函数绑定this的集中方法

Follow me on GitHub

• React事件处理函数绑定this的集中方法
  • 1. 在构造函数中绑定
  • 2.使用class properties进行绑定
  • 3. 使用箭头函数
  • 4. 使用bind()

目前React有三种方法可以创建组件，其中使用React.createClass()函数创建的组件，this会自动
绑定到组件的每个方法中；而使用Class Component或者Functional Component时，需要手动绑定this.

1. 在构造函数中绑定

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

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

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

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

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

2.使用class properties进行绑定

class properties目前处于state-2草案阶段，babel已经支持

class LoggingButton extends React.Component {
  // This syntax ensures `this` is bound within handleClick.
  // Warning: this is *experimental* syntax.
  handleClick = () => {
    console.log('this is:', this);
  }

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

3. 使用箭头函数

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

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
       this.handleClick(e)}>
        Click me
      
    );
  }
}

这种方式有一个潜在的性能问题，就是每次组件渲染时，onClick的回调函数都是不同的匿名函数，如果这个组件把回调函数通过props传递到其子组件，那么由于每次组件的渲染时，由于传递的props中回调函数的变化，就会导致子组件的额外渲染（是不同的回调函数，但实际上处理逻辑完全相同）。

4. 使用bind()

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

  render() {
    // This syntax ensures `this` is bound within handleClick
    return (
      
        Click me
      
    );
  }
}

bind跟使用箭头函数一样，实际上每次组件渲染时都生成了新的回调函数。

---

建议使用构造函数中绑定或者使用class properties特性绑定，但bind和箭头函数在特殊场景下需要使用，即需要传递额外参数的情况。

 this.deleteRow(id, e)}>Delete Row
Delete Row