javascript – 我可以在react组件的构造函数中使用箭头函数吗？

这个问题类似于When using React Is it preferable to use fat arrow functions or bind functions in constructor?但有点不同.您可以在构造函数中将函数绑定到此函数,或者只在构造函数中应用箭头函数.请注意,我只能在项目中使用ES6语法.

1.

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

    this.doSomeThing = this.doSomeThing.bind(this);
  }

  doSomething() {}
}

2.

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

    this.doSomeThing = () => {};
  }
}

这两种方式的优点和缺点是什么？谢谢.

解决方法:

出于某些原因,选项1通常更优选.

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

    this.doSomeThing = this.doSomeThing.bind(this);
  }

  doSomething() {}
}

原型方法更加清晰.子类可以覆盖或扩展doSomething

doSomething() {
  super.doSomething();
  ...
}

当实例属性

this.doSomeThing = () => {};

或ES.next类字段

doSomeThing = () => {}

相反,调用super.doSomething()是不可能的,因为该方法没有在原型上定义.覆盖它将导致在父和子构造函数中分配this.doSomeThing属性两次.

mixin技术也可以使用原型方法：

class Foo extends Bar {...}
Foo.prototype.doSomething = Test.prototype.doSomething;

原型方法更容易测试.在类实例化之前,它们可以被窥探,存根或模拟：

spyOn(Foo.prototype, 'doSomething').and.callThrough();

这允许在某些情况下避免竞争条件.

标签：arrow-functions,javascript,ecmascript-6,reactjs,constructor
来源： https://codeday.me/bug/20190917/1808735.html