React中的useSyncExternalStore使用

官方的解释是useSyncExternalStore 是一个让你订阅外部 store 的 React Hook。😄官方就爱打马虎眼,这样说随能一下子明白它的作用,接下来我们就来仔细的讲解下它的作用和应用场景。

useSyncExternalStore 作为 React 18 引入的一个 Hook,主要用于订阅外部数据源,确保在并发渲染下数据的一致性。它主要用于:

  • 订阅浏览器 API(如 window.width)
  • 订阅第三方状态管理库
  • 订阅任何外部数据源

直接上例子:

  • 基本语法

    const state = useSyncExternalStore(
    subscribe, // 订阅函数
    getSnapshot, // 获取当前状态的函数
    getServerSnapshot // 可选:服务端渲染时获取状态的函数
    );

  • 实战 浏览器网络状态

    //useOnlineStatus hooks
    import { useSyncExternalStore } from 'react';

    export function useOnlineStatus() {
    const isOnline = useSyncExternalStore(subscribe, getSnapshot);
    return isOnline;
    }

    function getSnapshot() {
    return navigator.onLine;
    }

    function subscribe(callback) {
    window.addEventListener('online', callback);
    window.addEventListener('offline', callback);
    return () => {
    window.removeEventListener('online', callback);
    window.removeEventListener('offline', callback);
    };
    }

  • 实战浏览器窗口宽高

    // useWindowSize hooks
    function useWindowSize() {
    const getSnapshot = () => ({
    width: window.innerWidth,
    height: window.innerHeight
    });

    复制代码
    const subscribe = (callback) => {
      window.addEventListener('resize', callback);
      return () => window.removeEventListener('resize', callback);
    };
    
    return useSyncExternalStore(subscribe, getSnapshot);

    }

    // 组建中 hooks使用
    function NavComponent() {
    const { width, height } = useWindowSize();

    复制代码
    return (
      <div>
        Window size: {width} x {height}
      </div>
    );

    }

  • 实战 切换主题

    function createThemeStore() {
    let theme = 'light';
    const listeners = new Set();

    复制代码
    return {
      subscribe(listener) {
        listeners.add(listener);
        return () => listeners.delete(listener);
      },
      getSnapshot() {
        return theme;
      },
      toggleTheme() {
        theme = theme === 'light' ? 'dark' : 'light';
        listeners.forEach(listener => listener());
      }
    };

    }

    const themeStore = createThemeStore();

    function useTheme() {
    return useSyncExternalStore(
    themeStore.subscribe,
    themeStore.getSnapshot
    );
    }

    function ThemeToggle() {
    const theme = useTheme();

    复制代码
    return (
      <button onClick={() => themeStore.toggleTheme()}>
        Current theme: {theme}
      </button>
    );

    }

注意事项

  1. 保持一致性

    • subscribe 函数应该返回清理函数
    • getSnapshot 应该返回不可变的数据
  2. 避免频繁更新

    • 考虑使用节流或防抖
    • 实现选择性订阅机制
  3. 服务端渲染

    • 提供 getServerSnapshot
    • 确保服务端和客户端状态同步
  4. 内存管理

    • 及时清理订阅
    • 避免内存泄漏
相关推荐
江城开朗的豌豆6 分钟前
小程序登录不迷路:一篇文章搞定用户身份验证
前端·javascript·微信小程序
aesthetician11 分钟前
React 19.2.0: 新特性与优化深度解析
前端·javascript·react.js
Django强哥14 分钟前
JSON Schema Draft-07 详细解析
javascript·算法·代码规范
FIN666825 分钟前
射频技术领域的领航者,昂瑞微IPO即将上会审议
前端·人工智能·前端框架·信息与通信
U.2 SSD35 分钟前
ECharts漏斗图示例
前端·javascript·echarts
江城开朗的豌豆35 分钟前
我的小程序登录优化记:从短信验证到“一键获取”手机号
前端·javascript·微信小程序
excel38 分钟前
Vue Mixin 全解析:概念、使用与源码
前端·javascript·vue.js
IT_陈寒1 小时前
Java性能优化:这5个Spring Boot隐藏技巧让你的应用提速40%
前端·人工智能·后端
勇往直前plus1 小时前
CentOS 7 环境下 RabbitMQ 的部署与 Web 管理界面基本使用指南
前端·docker·centos·rabbitmq
Never_Satisfied1 小时前
在JavaScript / HTML中,Chrome报错此服务器无法证实它就是xxxxx - 它的安全证书没有指定主题备用名称
javascript·chrome·html