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

    • 及时清理订阅
    • 避免内存泄漏
相关推荐
贵沫末2 分钟前
React——基础
前端·react.js·前端框架
aklry14 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9321 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子22 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982422 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug24 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端
zhanshuo24 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
前端·javascript·harmonyos
JohnYan25 分钟前
模板+数据的文档生成技术方案设计和实现
javascript·后端·架构
撰卢1 小时前
如何提高网站加载速度速度
前端·javascript·css·html
10年前端老司机1 小时前
在React项目中如何封装一个可扩展,复用性强的组件
前端·javascript·react.js