我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

本文将使用react的useSyncExternalStore函数订阅浏览器的联网状态，动态在页面上展示联网状态。useSyncExternalStore带着use开头，所以肯定是专用于函数组件的hook函数。主要用于在react项目中使用外部第三方的数据源。

苏南大叔：react教程，如何利用useSyncExternalStore订阅联网状态？ - 订阅设备联网状态
react教程，如何利用useSyncExternalStore订阅联网状态？（图3-1）

苏南大叔的程序如此灵动博客，记录苏南大叔和计算机代码的故事。测试环境：create-react-app@5.0.1，react@18.2.0，react-dom@18.2.0，node@16.14.2。

useSyncExternalStore

函数原型：

useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
JavaScript

react的函数，总是有些难以理解。

  • 第一个参数subscribe就是订阅函数（同时也处理退订）。
  • 第二个参数getSnapshot就是拿到数据后怎么处理，处理之后得到useSyncExternalStore的返回值。
  • 第三个参数，和ServerSideRender有关，目前就暂不生效。

苏南大叔：react教程，如何利用useSyncExternalStore订阅联网状态？ - 订阅事件
react教程，如何利用useSyncExternalStore订阅联网状态？（图3-2）

navigator.onLine

原理上来说，监控联网状态就是监控window.navigator.onLine。

开始监控联网状态：

var callback = ()=>{
    console.log("联网状态：", window.navigator.onLine);
};
window.addEventListener("online", callback);
window.addEventListener("offline", callback);
JavaScript

停止监控联网状态，需要特别说明的是：这里也需要传入callback参数。必须提取callback到一个变量，否则无法解除监控监听。

window.removeEventListener("online", callback);
window.removeEventListener("offline", callback);
JavaScript

苏南大叔：react教程，如何利用useSyncExternalStore订阅联网状态？ - 运行截图
react教程，如何利用useSyncExternalStore订阅联网状态？（图3-3）

完整代码

import {useSyncExternalStore} from "react";
function subscribe(callback) {
    window.addEventListener("online", callback);
    window.addEventListener("offline", callback);
    return () => {
        window.removeEventListener("online", callback);
        window.removeEventListener("offline", callback);
    };
}

function useOnlineStatus() {
    return useSyncExternalStore(
        subscribe,
        () => navigator.onLine,
        () => true     // 暂时用不到
    );
}

function App() {
    const isOnline = useOnlineStatus();
    return (
        <>苏南大叔检测你的网络状态：{isOnline.toString()}</>
    )
}
export default App;
JavaScript

结束语

更多react经验文章，请点击苏南大叔的相关文章：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   react