This question is similar to When using React Is it preferable to use fat arrow functions or bind functions in constructor? but a little bit different. You can bind a function to this
in the constructor, or just apply arrow function in constructor. Note that I can only use ES6 syntax in my project.
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 = () => {};
}
}
What's the pros and cons of these two ways? Thanks.
Arrow functions cannot be used as constructors and will throw an error when used with new .
An arrow function doesn't have its own this value and the arguments object. Therefore, you should not use it as an event handler, a method of an object literal, a prototype method, or when you have a function that uses the arguments object.
Some other prevalent event handlers are onMouseDown, onClick, and onBlur. To define the function within the component, you can use an arrow function or class method.
Option 1 is generally more preferable for certain reasons.
class Test extends React.Component{
constructor(props) {
super(props);
this.doSomeThing = this.doSomeThing.bind(this);
}
doSomething() {}
}
Prototype method is cleaner to extend. Child class can override or extend doSomething
with
doSomething() {
super.doSomething();
...
}
When instance property
this.doSomeThing = () => {};
or ES.next class field
doSomeThing = () => {}
are used instead, calling super.doSomething()
is not possible, because the method wasn't defined on the prototype. Overriding it will result in assigning this.doSomeThing
property twice, in parent and child constructors.
Prototype methods are also reachable for mixin techniques:
class Foo extends Bar {...}
Foo.prototype.doSomething = Test.prototype.doSomething;
Prototype methods are more testable. They can be spied, stubbed or mocked prior to class instantiation:
spyOn(Foo.prototype, 'doSomething').and.callThrough();
This allows to avoid race conditions in some cases.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With