Question

我正在使用React Native制作应用。最棘手的部分是处理JavaScript。我使用Xamarin.Forms制作了一些应用程序。现在我被React Native吸引了。

顺便说一下。

我打电话的时候 $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, 'http://accbd.com/api/send_req'); curl_setopt($curl, CURLOPT_HTTPHEADER, array('Content-Type' => 'application/json')); curl_setopt($curl, CURLOPT_HEADER, 1); curl_setopt($curl, CURLOPT_USERPWD, "myusername:mypassword"); curl_setopt($curl, CURLOPT_TIMEOUT, 30); curl_setopt($curl, CURLOPT_POST, 1); curl_setopt($curl, CURLOPT_POSTFIELDS, '{"text":"Hello, #param#.","port":[2],"param":[{"number":"123456","text_param ":["John"],"user_id":1}]}'); curl_setopt($curl, CURLOPT_RETURNTRANSFER, TRUE); $data = curl_exec($curl); curl_close($curl); echo $data;exit; 在App.js文件中。

即使我打电话给B的静态方法，我也无法理解为什么我得到A的实例而不是B＆＃39; s。

感谢。

[Root.js]

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

[App.js]

import App from './App'
import A from './A'

export default class Root extends React.Component{
    render(){
        return (
            <View>
                <App/>
                <A/>
            </View>
        )
    }
}

[A.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>
        )
    }
}

[B.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>
    }
}

Answer 1

短

B.constructor 和 A.constructor 引用相同的对象在JS函数中也是对象所以如果在 B中更改一些数据.constructor 它也会影响 A.constructor

详细

要使当前情况清楚，请忘记React和Classes。你要做的是这样的：

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's ref's

来解决此问题

希望这对你有帮助

Answer 2

当您在下面的代码中引用 B

时，会发生什么

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

您引用的不是您刚刚在代码中创建的对象B

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

但javascript函数B（这是引擎盖下的B类声明），因此代码

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

被“翻译”到代码中

 componentWillMount(){
   Function.instance = this;
 }

因为B的构造函数属性是javascript原生对象功能

同样的情况发生在A类中，来自

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

翻译成

 componentWillMount(){
   Function.instance = this;
 }

因此，每次设置A.constructor.instance或B.constructor.instance时，都要设置相同的对象属性Function.instance。

因此，如果要引用静态类成员，则不应该应用于构造函数关键字，只需在类的内部或外部使用ClassName.staticMemberName，即

componentWillMount(){
  B.instance = this;
}

它将按预期运行。

Answer 3

这就是静态方法的重点。静态方法可以在同一个类的多个实例之间共享相同的方法。（首先看起来似乎有不同的类，但仔细看，你会看到。）

因此，静态方法不适合您要做的事情。

据我了解，您正试图在组件之间共享一些状态。这是反应中非常常见的要求，通常由状态管理框架（如flux，redux或mobx）处理。（React refs会这样做，但它不可扩展也不高效）

例如在redux中，你将有一个单独的状态，它将在渲染B时更新，然后你可以从App.js或任何其他组件引用相同的状态，你可以命名它。

javascript中静态方法的名称不应该重复？

3 个答案:

短

详细