Question

我创建了应用程序实例，如下所示。

import { NetInfo } from 'react-native'
function App() {
this.flag = {
  isConnected: false
}
...
return () => {
       NetInfo.addEventListener(
       'connectionChange',
         (__connectionInfo) => {
          if (__connectionInfo is not empty) {
          // check if network connection type is available
         // or not if not found than re-update flag to false.
         if (__connectionInfo.type !== 'none' && __connectionInfo.effectiveType !== 'unknown') {
           // update flag.
           this.flag.isConnected = true // <-- should be updated to App(this). if you try App.flag.isConnected it will return false
         } else {
           // update false network.
           this.flag.isConnected = false
         }
       }
     }) // network event listener.
   }
}

// calling instance.
let _morphine = new App()
_morphine = _morphine() <--- I am just importing this already created instance in every component for using it as system core handler for handling every task like saving data, updating notify network change using instance.

*在实际代码中，我将_morphine对象包装到了if容器中，以便仅创建单个实例每当应用在用户设备上首次启动时。

问题： 1.我想在网络更改时重新呈现我的布局组件，但似乎网络侦听器未将this.flag.isConnected更新为true ||。假。 2.上面提到的通过单个实例共享整个系统核心的模式好吗？

Answer 1

根据NetInfo Example，您的事件监听器应如下所示……

NetInfo.addEventListener('change', this._handleConnectionInfoChange);

Answer 2

您在常规函数中使用了this（您的App组件返回了常规函数，而不是箭头）。 this是从调用它的上下文中评估的。例如，像在代码段中一样在全局空间中调用它会使this成为global，而this.isConnected则是未定义的。您可以通过以下两种方法解决此问题：

返回App内部的箭头功能。箭头函数会将this绑定到声明的范围，因此您将拥有一个常量this
不要使用this而是只使用普通闭包，将isConnected声明为函数变量，您返回的函数将可以访问它。

关于像您一样的有关单例设计的问题，我个人更喜欢制作一个内部状态为isConnected的组件。可以将事件处理程序放在componentDidMount和componentWillUnmount中。然后可以使用渲染道具模式访问连接状态

class NetInfo extends Component {
      state = {isConnected: false}

      componentDidMount() {
        // set up event listener
}

componentWillUnmount() {
        // remove event listener
}

render() {
return this.props.children(this.state.isConnected)
}

}

事件监听器在普通的旧函数（）{}中不起作用

2 个答案: