The Name Of Static Method In Javascript Should Not Be Duplicated?

I'm making an app using React Native. The toughest part is dealing with javascript. I made few app using Xamarin.Forms. Now I'm attracted to React Native. By the way. When I call

Solution 1:

Short

B.constructor and A.constructor referencing the same object In JS functions also objects so if change some data in B.constructor it also will affect A.constructor

Detailed

To make current situation clear lets forget about React and Classes. What you are trying to do looks like this:

constconstructor = () => {} //  'constructor' is just a demonstrative it can be anything else as other variablesconst A = {
  constructor,
  componentDidMount(){ // Again could be anything alse than 'componentDidMount'
    A.constructor.instance = 'A instance';
  }
}
const B = {
  constructor,
  componentDidMount(){ // Again could be anything alse than 'componentDidMount'
    B.constructor.instance = 'B instance';
  }
}

// Now A and B are not equal to each other// But property 'constructor' in both objects(A,B) references to the same 'constructor' function//Now lets do what you did, In your examble you was rendering component A 2 times, and B 1 time. A -> B -> A. The last comonent was rendered is A. So what happens at that time//render A
A.componentDidMount() // This sets constructor.instance to 'A'console.log(A.constructor.instance);
B.componentDidMount() // This overwrites constructor.instance to 'B'|// Now if you call console.log(A.constructor.instance) // This will return 'B'// And at the last you are rendering 'A' 2th tiem
A.componentDidMount() // And this again overrides constructor.instance to 'B'//So after this you are trying to get data from B.constructor//which will be 'A' because A.constructor == B.constructor

To avoid this problem don't store your data in constructors. I think you can handle this problem by using React's ref's

Hope this was helpful for you

Solution 2:

What happens there, is that when you are referencing B in code below

componentDidMount(){
  console.log('I should be given B', B.getInstance())
}

you are referencing NOT the object B you just created in code

render(){
  return (
    <View><A/><B/></View>
  )
}

but the javascript function B (which is the the class B declaration under the hood), therefore the code

componentWillMount(){
  B.constructor.instance = this;
}

is 'translated' into the code

componentWillMount(){
   Function.instance = this;
 }

as the constructor property of the B is the javascript native object Function

the same happens to A class, from

componentDidMount(){ 
    A.constructor.instance = this;
  }

translated into the

componentWillMount(){
   Function.instance = this;
 }

consequently, each time you are setting A.constructor.instance or B.constructor.instance you are setting the same object property Function.instance.

Thus, if you want to reference static class member, you shouldn't apply to a constructor keyword, just use ClassName.staticMemberName, inside or outside the class , i.e.

componentWillMount(){
  B.instance = this;
}  

and it will work out as expected.

Solution 3:

That's the whole point of static methods. Static methods are there to share the same method between multiple instances of the same class. (First it might seem there are different classes, but look carefully and you'll see).

Thus static methods are not suitable for what you are trying to do.

As I understand, you are trying to share some state between components. This is a very common requirement in react and is usually handled by state managing frameworks like flux, redux or mobx. (React refs will do, but it's not scalable nor efficient)

For instance in redux, you will have one single state, which will be updated when B is rendered, and then you can refer the same state from App.js or any other component, you name it.