Javascript 在react中定义方法的两种方法，what'；有什么不同？

我正在学习React，我发现在组件类中定义方法有两种不同的方法

一种方法是将方法定义为类方法：

handleCategorySelected(category){
    this.setState({
        category
    })
};

但首先需要将方法绑定到构造函数方法中的this

constructor(props) {
    super(props);
    this.handleCategorySelected = this.handleCategorySelected.bind(this);
}

绑定之后，我可以在JSX中使用它

render() {
    return <Fragment>
        <Footer
            onSelect={this.handleCategorySelected}
        />
    </Fragment>
}

第二种方法更简单

handleCategorySelected = (category) => {
    this.setState({
        category
    })
};

在这个定义之后，我可以在JSX中使用这个方法，而不用在构造函数方法中绑定this

两种方法之间有什么不同，为什么第一种方法在没有绑定“this”的情况下抛出错误，而另一种方法则没有？有什么不同吗？

方法1被调用，使用它，我们不需要担心运行时这个的含义，因为它是自动绑定的。例如：

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

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

---

方法1和方法2之间的区别在于函数实际调用时函数内部的

this

的含义

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

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

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

---

参考资料：

方法1被调用，使用它，我们不需要担心运行时这个的意义，因为它是自动绑定的。例如：

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

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

---

方法1和方法2之间的区别在于函数实际调用时函数内部的

this

的含义

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

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

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

---

---

引用：

arrow函数确保回调函数中的

这个

是从周围的作用域继承的，而不是从处理程序中继承的

onSelect={this.handleCategorySelected}

您可以阅读本文。箭头函数确保回调函数中的

这个
是从周围的作用域继承的，而不是从处理程序中继承的
onSelect={this.handleCategorySelected}
您可以阅读本文Tnx以获得解释！Tnx的解释！