4

我在 ES6 React 代码中看到了很多

class Foo extends React.Component {
  bar = () => {
    console.log("bar")
  }

  baz() {
    console.log("baz")
  }
}

似乎他们都定义了方法，bar但它们有什么不同。bazFoo

4

3 回答 3

10

声明的不同之处在于函数的编写方式和contextof this,

在第一种语法中

bar = () => {
    console.log("bar")
  }

该函数是使用Arrow function语法编写的。

箭头函数没有自己的this; this使用封闭执行的值context。因此this，此函数内的关键字将引用React class

然而第二个声明

baz() {
    console.log("baz") 
}

是一个简单的函数，this keyword在这个函数中是指函数本身的上下文。

因此，当您尝试访问类似的 React 类属性/函数时this.state，this.setState您将在第二种情况下收到错误（如果您没有在其他任何地方为此函数使用绑定（示例构造函数）），而在第一种情况下它会起作用，因为箭头函数，this在函数体内部的含义与在外部的含义相同。这意味着如果您在组件的自定义函数中使用箭头函数，它们可以毫无意外地this使用。this.setState

检查这个答案，了解为什么需要在 React 类中绑定函数

于 2017-12-01T06:11:07.210 回答
1

前面的答案是绝对正确的，这就是为什么你想在反应类中使用箭头函数。

我只是想指出一个细微的差异，这是他们在课堂上使用以避免意外的潜在陷阱......

在类上定义的箭头函数作为属性添加到实例中，恰好是函数，而定义不作为箭头函数会将函数作为方法添加到类的原型中。

在永远不会扩展的 React 组件中，这很好，但是如果出现这种情况，您想要子类化一个组件，您将无法覆盖期望能够通过调用基类的箭头函数super，您只能覆盖它整体上

class Button extends React.PureComponent {

    // class method - overridable in subclass
    pressMethod: function(): void {
      console.log('beep')
    }

    // instance property functions - only overwriteable in subclass
    pressArrow = (): void => {
      console.log('boop')
    }

    pressArrowTwo = (): void => {
      console.log('blip')
    }

  }


  class BigRedButton extends Button {

    // class method - overides subclass one, 
    // can call superclass method via `super`
    pressMethod: function(): void {
      super.pressMethod() // prints 'beep' to console
      console.log('BOOOOOOOOM!!!')
    }

    // instance property function
    // cannot call superclass via `super` as lambda's have no prototype
    pressArrow = (): void => {
      super.pressArrow() // TypeError - not a function
      console.log('BOOOOOOOOM!!!')
    }

    // completely overwrites instance property of same name in subclass
    // doesn't try to access prototype so won't error but is limited
    pressArrowTwo = (): void => {
      console.log('BOOOOOOOOM')
    }

  }
于 2017-12-01T12:10:19.677 回答
0

为简单起见，两者相等：

  1. 酒吧 = () => { ... }
  2. this.bar =this.bar.bind(this)
于 2017-12-01T06:19:05.540 回答