当前位置：首页 > news >正文

React中的useSyncExternalStore使用

news 2025/5/13 7:25:09

官方的解释是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>);
}