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. 内存管理

    • 及时清理订阅
    • 避免内存泄漏
相关推荐
Kyle199410 分钟前
RollCode:高效低代码开发新体验
前端
这是个栗子10 分钟前
【Node.js安装注意事项】-安装路径不能有空格
前端·npm·node.js
源力祁老师12 分钟前
外部系统获取Odoo数据最便捷的方式
开发语言·前端·javascript
用户97141718142714 分钟前
picker-view选中框不居中
前端
YGY_Webgis糕手之路14 分钟前
Cesium 快速入门(十) JulianDate(儒略日期)详解
前端·gis·cesium
GISer_Jing29 分钟前
下次接好运~
开发语言·javascript·ecmascript
xingba37 分钟前
学习 TreeWalker api 并与普通遍历 DOM 方式进行比较
javascript·api·dom
燕山石头1 小时前
解决 IntelliJ IDEA Build时 Lombok 不生效问题
java·前端·intellij-idea
chancygcx_1 小时前
前端核心技术Node.js(二)——path模块、HTTP与模块化
前端·http·node.js