如何从函数组件访问可重用的 NetInfo 代码到类组件答案

【问题标题】：How do i access Reusable NetInfo code from function component to Class Component如何从函数组件访问可重用的 NetInfo 代码到类组件
【发布时间】：2020-10-28 11:05:06
【问题描述】：

我创建了一个自定义函数组件，它具有来自 NetInfo 的事件监听器用于 Internet 连接，它返回一个布尔值和方法名称。我想在每个类组件中调用该方法来检查互联网连接并使用布尔值来检查连接状态。

下面是我的代码。

//function Component
import React, { PureComponent, useEffect, useState } from 'react';
import  NetInfo  from "@react-native-community/netinfo";


export default () => {
const [isInternetReachable, setIsInternetReachable] = useState(false)
const InternetChecker = () => {
    useEffect(() => {
        // Subscribe
        const unsubscribe = NetInfo.addEventListener((state) => {
            setIsInternetReachable(state.isInternetReachable);
            console.log("Connection type", state.type);
            console.log("Is internet Reachable?", isInternetReachable);
        });
        return () => {
            unsubscribe();
        };
    },[])
}

return [InternetChecker, isInternetReachable];

};

类组件试图访问 InternetChecker() 方法

class HomeScreen extends React.Component {

 render() {
 const { navigate } = this.props.navigation;
 const [InternetChecker, isInternetReachable] = InternetHanlder();
 // if (!isInternetReachable) {
 //     <NoNetworkSign /> 
 // }
 InternetChecker()
 if (isInternetReachable){
  console.log("Internet is Reachable");
 } else {
  console.log("No Internet Connection");
  
 }
 return (
  <SafeAreaView style={styles.container}>
    <View style={styles.container}>
    </View>
  </SafeAreaView>
 )
 };

当我尝试以上述方式访问时，我得到无效的钩子调用，只能从函数组件的主体内部调用钩子。我们如何从类组件中调用它。

任何帮助表示赞赏。

【问题讨论】：

那不是功能组件。如果有的话，它是一个自定义钩子（由其他钩子组成的钩子）。组件返回 jsx 并打算被渲染。您的函数不会返回任何可以呈现的内容，并且您还可以将其称为钩子。类组件中不能调用钩子，类组件中也不能调用调用钩子的函数。

标签： reactjs react-native-ios react-component react-native-community-netinfo

【解决方案1】：

您展示的函数不是函数式组件，因为它不会返回可以渲染的内容。你也称它为钩子。您可以做的是首先解决自定义挂钩的问题：

它返回一个钩子（一个调用useEffect的函数InternetChecker）。那是不需要的。钩子应该只调用useEffect 本身，所以它会在挂载时订阅NetInfo。
unsubscribe 函数应该，正如它的名字已经暗示的那样，取消订阅NetInfo。否则会导致内存泄漏，因为即使你的组件已经卸载，你的监听器也会被调用。

const useInternetStatus = () => {
    const [reachable, setReachable] = useState(false);
    
    useEffect(() => {
        const subscribe = state => setReachable(state.isInternetReachable); 

        NetInfo.addEventListener(subscribe);

        return () => NetInfo.removeEventListener(subscribe);
    },[]);

    return reachable;
};

然后你可以将你的 HomeScreen 组件重写为一个函数式组件，这样你就可以在其中使用钩子：

const HomeScreen = () => {
    const isInternetReachable = useInternetStatus();

    console.log(isInternetReachable);

    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.container}>
            </View>
        </SafeAreaView>
    );
};

【讨论】：

【解决方案2】：

首先你应该阅读Hooks Rules，第一条规则是不要在基于类的组件中调用反应钩子，因此只需将 HomeScreen 组件更新为 FC 组件，然后再试一次它就会正常工作。

你的自定义钩子应该是这样的：

 export const useInternetStatus = () => {// I make a name to your hook is best in inspection and testing
const [isInternetReachable, setIsInternetReachable] = useState(false)
const InternetChecker = () => {
    useEffect(() => {
        // Subscribe
        const unsubscribe = NetInfo.addEventListener((state) => {
            setIsInternetReachable(state.isInternetReachable);
            console.log("Connection type", state.type);
            console.log("Is internet Reachable?", isInternetReachable);
        });
        return () => {
            unsubscribe();
        };
    },[isInternetReachable]) // in order to re-call the hooks whenever the netInfo status changed 
}

return [InternetChecker, isInternetReachable];

};

【讨论】：

钩子的命名约定是useXYZ，所以在这种情况下应该是useInternetStatus。如果你这样命名它，react hooks linting 规则也会对它进行 lint，以警告你不要误用它。

【解决方案3】：

为函数添加名称

import React, { PureComponent, useEffect, useState } from 'react';
import  NetInfo  from "@react-native-community/netinfo";


export default ConnectivityChecker = () => {
const [isInternetReachable, setIsInternetReachable] = useState(false)
const InternetChecker = () => {
    useEffect(() => {
        // Subscribe
        const unsubscribe = NetInfo.addEventListener((state) => {
            setIsInternetReachable(state.isInternetReachable);
            console.log("Connection type", state.type);
            console.log("Is internet Reachable?", isInternetReachable);
        });
        return () => {
            unsubscribe();
        };
    },[])
}

return [InternetChecker, isInternetReachable];

};

你想在哪里使用这个功能你应该导入它

【讨论】：