Question

我是新来的反应者，我无法理解类中这两种方法之间的区别

ForceDemandLoadState(dlDisable)

和

doSomething=()=>{
   console.log("Something")
}

看起来他们都在做同样的事情

Answer 1

doSomething=()=>{
   console.log("Something")
}

以上使用的是fat arrow functions。您可以在此函数内访问this（类实例）而无需绑定。

第二个只是定义一个函数。您将无法在此处访问this。您不能在该函数内使用this。要使用this，您需要将该函数绑定到构造函数中或其他位置

例如；

this.doSomething = this.doSomething.bind(this);

有关this关键字的更多信息

Answer 2

再次将其引入新的ES7语法中。您可以在此处了解更多信息

https://www.reactnative.guide/6-conventions-and-code-style/6.4-es7-features.html

基本上在旧的ES6中，我们不得不编写此类的类和绑定方法（从文档中复制）

class SomeComponent extends Component {
  _incrementCounter() {
    this.setState({count: this.state.count+1})
  }
  constructor() {
    this._incrementCounter = this._incrementCounter.bind(this);
  }
  ...
}

在新的ES7中，您只需使用箭头功能即可

class SomeComponent extends Component {
  _incrementCounter = () => {
    this.setState({count: this.state.count+1})
  }
  ...
}

由您决定使用什么。两种方法都可以使用，但是如您所见，ES7语法更短，更容易阅读

Answer 3

这并不是特定于React的，但是在将这些函数传递给其他上下文时确实具有含义。

ES6中的类不需要绑定就可以在其方法中使用它，例如，以下内容完全有效：

class TestClass {
  constructor() {
    this.variable = 'a variable';
  }

  method() {
    console.log(this.variable)
  }  
}

const thing = new TestClass();
thing.method(); // will output 'a variable'

您特别想使用箭头功能的原因是，您可以将此功能作为道具传递给组件，也可以将其用作按钮动作的一部分。一旦传递了方法引用，它将不再有权访问this。

class TestComponent extends Component {
  constructor() {
    this.variable = 'a variable';
  }

  method() {
    console.log(this.variable)
  }

  render() {
    return <AnotherComponent method={this.method} />
  }
}

从this.method内部调用<AnotherComponent>会产生错误。这是箭头功能所在的地方。

class TestComponent extends Component {
  constructor() {
    this.variable = 'a variable';
  }

  method = () => {
    console.log(this.variable)
  }

  render() {
    return <AnotherComponent method={this.method} />
  }
}

method现在使用箭头函数并“按词法绑定” this，这基本上意味着它从其周围的上下文中获取了this，在这种情况下，它是类（组件）

这些方法在课堂上有什么区别

3 个答案: