What's the meaning of the keyword 'statics' in ES5 - javascript

I'm encapsulating a Menu called JellMenu, and I want to expose CustomMenuItem like JellMenu.Item instead of import CustomMenuItem. I have no idea how to do.
I took look at react-native-viewpager source code, and I think this maybe helpful:
var ViewPager = React.createClass({
statics: {
DataSource: ViewPagerDataSource,
},
It will expose ViewPagerDataSource as ViewPager.DataSource, right? I don't know exactly. what's the meaning of the keyword statics in Es5, and what's the alternative in Es6? Thank you in advance.

It isn't a keyword, it's just a property name in an object initializer being passed to React.createClass. From the documentation, it's used to specify static (non instance-specific) parts of a React class:
The statics object allows you to define static methods that can be called on the component class.

Although statics only works for React.createClass, you can still write static methods in ES6 notation. If you are using ES7, then you can also write static properties.The statics object allows you to define static methods that can be called on the component class. For example:
var MyComponent = React.createClass({
statics: {
customMethod: function(foo) {
return foo === 'bar';
}
},
render: function() {
}
});
MyComponent.customMethod('bar'); // true
Methods defined within this block are static, meaning that you can run them before any component instances are created, and the methods do not have access to the props or state of your components. If you want to check the value of props in a static method, have the caller pass in the props as an argument to the static method.
Also, You can write statics inside ES6+ classes this way:
class Component extends React.Component {
static propTypes = {
...
}
static someMethod(){
}
}
Or outside the class like this:
class Component extends React.Component {
....
}
Component.propTypes = {...}
Component.someMethod = function(){....}

Related

What is the purpose of a `getInstance()` method?

I am looking at a user service, my understanding is it's similar to a user service in Nest, but not really.
In it I see the following:
export class UsersService {
private usersDao: UsersDao
constructor() {
this.usersDao = UsersDao.getInstance();
}
}
static getInstance(): UsersService {
if (!UsersService.instance) {
UsersService.instance = new UsersService();
}
return UsersService.instance;
}
What is that getInstance() doing exactly? And why not just:
export class UsersService {
constructor(private usersDao: UsersDao) {}
}
What is the goal of getInstance()?
Usually this is part of the singleton pattern. Basically one class that, once instantiated, any subsequent classes will refer to that instance, rather than creating a fresh instance each time.
https://en.wikipedia.org/wiki/Singleton_pattern
Its useful for a class where something complex needs to happen when it is first constructed, but all following calls just need access to the properties.
I'd also like to mention that you can (in JavaScript specifically) export an instance, and all modules that import the module will have access to the same instance.

Why to use static with propTypes

I am new to React and was learning propTypes and the ways to implement them in React. One of the ways of propType implementation is via class fields, that is,
class Foo extends React.Component {
static PropTypes = {};
}
The question is why need to use static for propTypes and is it ok to omit static? I really hope for your beginner-friendly explanation since I have looked through the answer here react: why static propTypes but did not properly understand WHY?
Static props are those that belong to the class, not to an instance. This means that one class is shared throughout the entire application. This is known as the singleton pattern. The reason you would do this is because propTypes do not belong to a single instance, as mentioned in the question you linked. propTypes are used for type checking the props passed in, so there is no need for them to be tied to specific instances:
https://blog.logrocket.com/validating-react-component-props-with-prop-types-ef14b29963fc/
It is not OK to omit static, because the PropTypes library is expecting a class property when it looks for your prop definitions. If you omit static, you are defining an instance property, which is not how the library operates. Omitting the keyword will result in an instance property and your props will not be validated as expected.
If the static keyword is confusing, just think of it as doing the same exact thing as the following:
class Foo extends React.Component {
static propTypes = {}
}
// equivalent to
class Foo extends React.Component {}
Foo.propTypes = {}

Add class attribute with decorator

I try to use a decorator to add some method or property to an annotated class.
This is my decorator :
export default function Component(params) {
return function decorator(target) {
target.template = params.template;
console.log(target, params.template);
}
}
I used it this way :
#Component({
template: template
})
export default class App {}
But when I use this class :
app.template // undefined;
Any idea?
You are modifying class object itself, i.e.
App.template // your template is here
and you just defined a static property for App class in this case.
In order to set template for class instances you should use:
target.prototype.template = params.template;
(Good example that classes are actually just syntactical sugar over constructor functions and prototype-based inheritance).
Also, I think this article about combining mixins and decorators might be helpful.

What is the name of a property of a class?

I'm looking through the React documentation and I've come across this code.
import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
Greeting.propTypes = {
name: PropTypes.string
};
Is there a specific name for what they are doing here, where they are creating an object of propTypes on the class?
Is this just a React thing or can this be done in any ES6 code?
Why can't we just set a variable of propTypes within the class itself, why does it have to come outside the class?
That's because propTypes is a static1 property of the class, not associated with a certain instance of the class but the class itself. React's prop type-checking looks for propTypes of a certain component as a static property of the component's class. It's not on the class's prototype, but on the class itself.
If you were to declare it inside the class, it would be an instance property:
class Greeting extends React.Component {
get propTypes() { //Not static!
...
}
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}
Every Greeting component would then have the property propTypes and React won't properly type-check the props. You could use a static getter and declare it as a static property of the class though:
static get propTypes() {
...
}
The reason it's outside the class is based on preference. Static properties and getters can be used anywhere in ES2015 (or ES6) code.
In future versions of ECMAScript you can declare class properties. You can use class properties now with Babel and the transform-class-properties plugin (also in the stage-2 preset):
class Greeting extends React.Component {
static propTypes = {
...
}
}
This is syntactic sugar and works exactly the same as the static getter acting as a static property of the class.
1 Static meaning "unchanging" because the property doesn't change based on instance, it's the same across all instances because it's not associated with just one instnace.
PropTypes is a React specific API. It's a way that o tell React to perform basic runtime type-checking of the properties you pass to a component. In your example, you are saying that Greeting components can take a name property of type string, but it's not required.
The way that this special propTypes property is defined is not specific to React, though, it's just an ES6 static class property. It's a property associated with the class declaration itself (Greeting.propTypes), not instances of the class (new Greeting().propTypes is undefined). There's actually a newer ES7+ syntax you can use which is equivalent:
class Greeting extends React.Component {
static propTypes = {
name: PropTypes.string
};
render() { }
}
console.log(Greeting.propTypes) // { name: ... }
You declare / define a class and you instantiate objects of a certain class.

Statics in ES2015 classes [duplicate]

Does the statics object work with ES6 classes in React?
class SomeComponent extends React.Component {
render() {
// ...
}
}
React.statics = {
someMethod: function() {
//...
}
};
Something like the above gives me undefined method someMethod when I do SomeComponent.someMethod()
statics only works with React.createClass. Simply declare the method as a static class method:
class SomeComponent extends React.Component {
static someMethod() {
//...
}
render() {
// ...
}
}
Regarding
React.statics = { ... }
You are literally creating a statics property on the React object. That property does not magically extend your component.
Although statics only works for React.createClass, you can still write static methods in ES6 notation. If you are using ES7, then you can also write static properties.
You can write statics inside ES6+ classes this way:
class Component extends React.Component {
static propTypes = {
...
}
static someMethod(){
}
}
Or outside the class like this:
class Component extends React.Component {
....
}
Component.propTypes = {...}
Component.someMethod = function(){....}
If you want to write it like the former, then you have to set stage: 0 on Babel (since its experimental).
Statics can be accessed without having to instantiate a component. Normally they aren't that useful but there are a few special cases. For example into routing when you leave the current page with doing a ACTION PERFORM then through Statics methods you can hold/ASKED the user whether he really want to leave the page.
For example:
exampleComponent= React.createClass({
statics:{
willTransitionFrom: function(transition,component){
// check any state here or value Aasked the user.
}
}
});
It exposes willTransitionTo and willTransitionFrom lifecycle methods. both are particular is useful as a static as you can actually cancel a transition before instantiating a component.
Stop. Just declare a class without extending React.Component and it will works.
class YourStaticClass {
static YourMethod(){
}
}
export default YourStaticClass;
in the other classes,
You can simply import your class and trigger the function
import YourStaticClass from "whatever";
...
YourStaticClass.YourMethod();
...
statics works only for React components, check docs.

Categories