javascript - React 类对象方法声明之间的区别？

Question

我在 React 中看到了两种在 Class 组件内声明方法的方法

方法一

class someComp extends React.Component  {  
    handleResetShapes = (e) => {
        e.preventDefault();
        this.setState({state: 'try'});
    }

    render() {}
}

方法2

class someComp extends React.Component  {  
    handleResetShapes(e) {
        e.preventDefault();
        this.setState({state: 'try'});
    }

    render() {}
}

在该特定示例中，方法 1 有效，而另一个则无效。不过，我已经看到声明为方法 2 的方法，它工作正常，只是现在无法提供示例。

问题

有什么区别？这个 Javascript 概念叫什么？

Answer 1

方法 1 称为 public class fields syntax ，使用它，我们不需要担心运行时 this 的含义，因为它是自动绑定(bind)的。例如:

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 (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

<小时/>

在方法 2 中，它只是类中的一个普通方法，当您使用 ES6 class 定义组件时，常见的模式是事件处理程序。

但是，使用此方法时，您必须注意 JSX 回调中 this 的含义。在 JavaScript 中，类方法不是 bound默认情况下。如果您忘记绑定(bind) this.handleClick 并将其传递给 onClick，则当函数执行时，this 将是未定义实际上调用了。

class LoggingButton extends React.Component {
  constructor(props) {
    super(props);

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('this is:', this);
  }

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

<小时/>

方法一和方法二的区别在于实际调用函数时函数内部的this的含义。

<小时/>

引用:Handling Events