1
const snapshot = useSyncExternalStore(
2
  subscribe,    // 订阅外部存储的函数
3
  getSnapshot,  // 获取外部存储当前值的函数
4
  getServerSnapshot? // 可选，服务端渲染时获取初始快照的函数
5
);

1
import { useSyncExternalStore } from 'react';
2

3
// 封装获取窗口尺寸的自定义Hook
4
function useWindowSize() {
5
  // 1. 定义订阅函数：监听 resize 事件
6
  const subscribe = useCallback((callback) => {
7
    window.addEventListener('resize', callback);
8
    // 返回取消订阅函数
9
    return () => window.removeEventListener('resize', callback);
10
  }, []);
11

12
  // 2. 定义获取快照函数：返回当前窗口尺寸（原始类型，不可变）
13
  const getSnapshot = () => {
14
    return {
15
      width: window.innerWidth,
16
      height: window.innerHeight,
17
    };
18
  };
19

20
  // 3. 服务端快照（可选）：服务端无 window，返回默认值
21
  const getServerSnapshot = () => {
22
    return { width: 0, height: 0 };
23
  };
24

25
  // 4. 调用 useSyncExternalStore
26
  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
27
}
28

29
// 组件中使用
30
function WindowSizeDisplay() {
31
  const size = useWindowSize();
32
  return (
33
    <div>
34
      窗口宽度：{size.width}px<br />
35
      窗口高度：{size.height}px
36
    </div>
37
  );
38
}

1
import { useSyncExternalStore } from 'react';
2
import { store } from './redux/store'; // 已创建的 Redux store
3

4
// 封装订阅 Redux store 的自定义Hook
5
function useReduxStore(selector) {
6
  // 1. 订阅 Redux store 的变化
7
  const subscribe = useCallback((callback) => {
8
    return store.subscribe(callback); // Redux store 内置 subscribe 方法
9
  }, []);
10

11
  // 2. 获取快照：通过 selector 筛选需要的状态（返回不可变值）
12
  const getSnapshot = useCallback(() => {
13
    return selector(store.getState());
14
  }, [selector]);
15

16
  // 3. 服务端快照（假设服务端有初始 state）
17
  const getServerSnapshot = useCallback(() => {
18
    return selector(store.getInitialState());
19
  }, [selector]);
20

21
  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
22
}
23

24
// 组件中使用：订阅 Redux 中的 user 状态
25
function UserProfile() {
26
  const user = useReduxStore((state) => state.user);
27
  if (!user) return <div>加载中...</div>;
28
  return (
29
    <div>
30
      用户名：{user.name}<br />
31
      邮箱：{user.email}
32
    </div>
33
  );
34
}

1
// 错误：返回同一个可变对象，内容变化但引用不变，组件不更新
2
const getSnapshot = () => windowSizeObj;
3

4
// 正确：返回新对象，引用变化触发更新
5
const getSnapshot = () => ({ ...windowSizeObj });

1
// 错误：每次渲染都创建新的 subscribe 函数
2
const subscribe = (callback) => { /* ... */ };
3

4
// 正确：稳定的订阅函数
5
const subscribe = useCallback((callback) => { /* ... */ }, []);

1
const getServerSnapshot = () => {
2
  // 服务端无 window，返回默认尺寸
3
  return typeof window === 'undefined' ? { width: 1200, height: 800 } : getSnapshot();
4
};

1
const getSnapshot = () => {
2
  fetch('/api/data'); // 副作用：异步请求
3
  return window.innerWidth;
4
};

1
const subscribe = useCallback((callback) => {
2
  const handleChange = () => {
3
    startTransition(callback); // 低优先级更新
4
  };
5
  window.addEventListener('resize', handleChange);
6
  return () => window.removeEventListener('resize', handleChange);
7
}, []);

1
// 传统写法（并发模式有风险）
2
const [width, setWidth] = useState(window.innerWidth);
3
useEffect(() => {
4
  const handleResize = () => setWidth(window.innerWidth);
5
  window.addEventListener('resize', handleResize);
6
  return () => window.removeEventListener('resize', handleResize);
7
}, []);
8

9
// 推荐写法（兼容并发模式）
10
const width = useSyncExternalStore(
11
  useCallback((cb) => {
12
    window.addEventListener('resize', cb);
13
    return () => window.removeEventListener('resize', cb);
14
  }, []),
15
  () => window.innerWidth,
16
  () => 1200
17
);