javascript中静态方法的名称不应该重复吗? [英] The name of static method in javascript should not be duplicated?
问题描述
我正在使用 React Native 制作应用程序.最困难的部分是处理 javascript.我使用 Xamarin.Forms 制作了一些应用程序.现在我被 React Native 所吸引.
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.
顺便说一下.
当我打电话时console.log('我应该得到 B', B.getInstance())
在 App.js 文件中.
When I call
console.log('I should be given B', B.getInstance())
in App.js file.
我不明白为什么我得到 A 的实例而不是 B 的实例,即使我调用了 B 的静态方法.
I can't understand why I get A's instance instead of B's even though I called B's static method.
谢谢.
[Root.js]
import App from './App'
import A from './A'
export default class Root extends React.Component{
render(){
return (
<View>
<App/>
<A/>
</View>
)
}
}
[App.js]
import A from './A'
import B from './B'
export default class App extends React.Component{
componentDidMount(){
console.log('I should be given B', B.getInstance())
//*************** BUT I get A's instance!!!!!!! ****************
}
render(){
return (
<View>
<A/>
<B/>
</View>
)
}
}
[A.js]
import React from 'react'
import { Text } from 'react-native';
export default class A extends React.Component{
static instance = null;
static getInstance(){
return A.constructor.instance;
}
title = 'I\'m A';
componentWillMount(){
A.constructor.instance = this;
}
render(){
return <Text>I'm A</Text>
}
}
[B.js]
import React from 'react'
import { Text } from 'react-native';
export default class B extends React.Component{
static instance = null;
static getInstance(){
return B.constructor.instance;
}
title = 'I\'m B';
componentWillMount(){
B.constructor.instance = this;
}
render(){
return <Text>I'm B</Text>
}
}
推荐答案
Short
B.constructor 和 A.constructor 引用同一个对象 在 JS 函数中也是对象 所以如果在 B 中改变一些数据.constructor 它也会影响 A.constructor
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
为了弄清楚当前情况,让我们忘记 React 和 Classes.您尝试执行的操作如下所示:
To make current situation clear lets forget about React and Classes. What you are trying to do looks like this:
const constructor = () => {} // 'constructor' is just a demonstrative it can be anything else as other variables
const 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
为避免此问题不要将数据存储在构造函数中.我认为您可以通过使用 React 的参考
To avoid this problem don't store your data in constructors. I think you can handle this problem by using React's ref's
希望对你有帮助
这篇关于javascript中静态方法的名称不应该重复吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!