react教程，如何利用useSyncExternalStore订阅联网状态？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

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

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

useSyncExternalStore

函数原型：

useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)

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

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

navigator.onLine

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

开始监控联网状态：

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

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

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

完整代码

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;

结束语

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

• https://newsn.net/tag/react/

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