Question

我已经在public static void Evaluate<TObj,TProp>( this TObj obj, Expression<Func<TObj, TProp>> expr) { var prop = (expr.Body as MemberExpression)?.Member as PropertyInfo; var val = prop?.GetValue(obj); if (val != null) { //Do something } }

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

方法1

React

方法2

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

    render() {}
}

在该特定示例中，class someComp extends React.Component { handleResetShapes(e) { e.preventDefault(); this.setState({state: 'try'}); } render() {} }有效，而其他无效。但是，我已经看到了声明为Method 1的方法，并且效果很好，只是现在无法提供示例。

问题

有什么区别，Javascript概念叫什么？

Answer 1

方法1被称为public class fields syntax，使用它，我们不必担心this在运行时的含义，因为它是自动绑定的。例如：

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。如果您忘记绑定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>;
  }
}

方法1和方法2之间的差异在于实际调用函数时函数内部this的含义。

参考：Handling Events

Answer 2

是的，它们都可以使用。
这取决于触发event时如何调用方法。
对于Method1：
<button onClick={this.handleResetShapes}>...</button>
对于Method2：
<button onClick={(e) => this.handleResetShapes(e)}>...</button>

Answer 3

区别在于如何处理“ this”。

对于方法1，您正在类中定义箭头功能。 “ this”将始终是定义函数的词法范围，在这种情况下为类本身。无论如何调用该函数，这仍然适用。这对于React事件处理程序非常方便。

对于方法2，您正在类中定义原型函数。 “ this”的值取决于函数的调用方式。如果通过类的实例调用它，则“ this”将是类本身。但是，当您在事件绑定中引用该函数时，将不会通过类实例调用该函数。而是直接调用它。在这种情况下，“ this”是未定义的。

要使方法2起作用，您必须执行以下操作：

class someComp extends React.Component  {  
  constructor(props) {
    super(props);
    this.handleResetShapes = this.handleResetShapes.bind(this);
  }

  handleResetShapes(e) {
    e.preventDefault();
    this.setState({state: 'try'});
  }

   render() {...}
}

这将创建一个新的handleResetShapes函数，其中“ this”的值将永久设置为类实例。

方法2适用的其他情况是那些没有引用“ this”的情况。

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

3 个答案: