深入理解 useSyncExternalStore：React 开发的外部状态同步

const synchronizedState = useSyncExternalStore(
  subscribe,      // 订阅函数
  getSnapshot,    // 获取快照函数
  getServerSnapshot? // 可选：服务器端快照函数
);

import { useSyncExternalStore } from 'react'

// 1. 在组件外定义 getSnapshot：从外部源读取当前状态
function getOnlineStatusSnapshot() {
  return navigator.onLine
}

// 2. 在组件外定义 subscribe：设置监听器并在变化时调用React提供的回调
function subscribeToOnlineStatus(callback) {
  window.addEventListener('online', callback)
  window.addEventListener('offline', callback)
  
  // 返回清理函数
  return () => {
    window.removeEventListener('online', callback)
    window.removeEventListener('offline', callback)
  }
}

// 3. 创建自定义钩子
export function useOnlineStatus() {
  // useSyncExternalStore 确保同步读取和防止撕裂
  const isOnline = useSyncExternalStore(
    subscribeToOnlineStatus,
    getOnlineStatusSnapshot,
    // 对于健壮的SSR场景，应提供getServerSnapshot：
    () => true // 假设客户端为"在线"或合理的默认值
  )
  
  return isOnline
}

// 在组件中的使用：
function StatusBar() {
  const isOnline = useOnlineStatus()
  return <h1>{isOnline ? '✅ Online' : '❌ Disconnected'}</h1>
}

// ❌ 错误：subscribe 和 getSnapshot 每次渲染都重新创建
function MyComponentUsesStore() {
  // 这些函数在每次 MyComponentUsesStore 渲染时都有新标识
  function subscribe(callback) { /* ... */ }
  function getSnapshot() { /* ... */ }
  
  const value = useSyncExternalStore(subscribe, getSnapshot)
}

// ✅ 正确：subscribe 和 getSnapshot 是稳定的
function subscribeToStore(callback) { /* ... */ }
function getStoreSnapshot() { /* ... */ }

function MyComponentUsesStore() {
  const value = useSyncExternalStore(subscribeToStore, getStoreSnapshot)
}

// ✅ 也正确（如果依赖props，如storeId）：
import { useCallback, useSyncExternalStore } from 'react'

function MyComponentUsesStore({ storeId }) {
  const subscribe = useCallback(
    (callback) => {
      return externalStoreAPI.subscribe(storeId, callback)
    },
    [storeId]
  )
  
  const getSnapshot = useCallback(
    () => externalStoreAPI.getSnapshot(storeId),
    [storeId]
  )
  
  const value = useSyncExternalStore(subscribe, getSnapshot)
}

const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)

// 在你的钩子中
const getServerSnapshot = () => false // 或任何有意义的默认值
useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)

// 外部存储（示例）
const myExternalStore = {
  _data: {
    user: {
      name: 'Alex',
      preferences: {
        theme: 'dark'
      }
    }
  },
  listeners: [],
  getData() {
    return this._data
  },
  subscribe(listener) {
    /* ... */
  },
  // ... 更新 _data 和通知监听器的方法
}

// ❌ 错误：getSnapshot 总是返回新对象
function getPreferencesSnapshot_Bad() {
  // 即使首选项未更改，这也是每次的新对象实例。
  return { ...myExternalStore.getData().user.preferences }
}

// ✅ 正确：如果数据未更改，返回相同的对象引用。
// 这需要你的存储或快照逻辑更智能一些。

// 选项1：如果存储本身管理不可变数据以供选择。
function getPreferencesSnapshot_Good_Immutable() {
  // 假设 myExternalStore.getData().user.preferences *是*不可变对象，
  // 仅在实际更改时替换。
  return myExternalStore.getData().user.preferences
}

// 选项2：手动缓存派生快照。
let lastKnownPreferences = myExternalStore.getData().user.preferences
let cachedPreferencesSnapshot = { ...lastKnownPreferences }

function getPreferencesSnapshot_Good_Cached() {
  const currentPreferences = myExternalStore.getData().user.preferences
  
  // 浅比较；对于深层对象，可能需要深层比较
  // 或确保存储在任何嵌套更改时通过引用替换 `currentPreferences`。
  if (currentPreferences !== lastKnownPreferences) {
    cachedPreferencesSnapshot = { ...currentPreferences }
    lastKnownPreferences = currentPreferences
  }
  
  return cachedPreferencesSnapshot
}

import { Suspense, useSyncExternalStore } from 'react'
import * as ReactDOM from 'react-dom/client'

export function makeMediaQueryStore(mediaQuery: string) {
  function getSnapshot() {
    return window.matchMedia(mediaQuery).matches
  }

  function subscribe(callback: () => void) {
    const mediaQueryList = window.matchMedia(mediaQuery)
    mediaQueryList.addEventListener('change', callback)
    return () => {
      mediaQueryList.removeEventListener('change', callback)
    }
  }

  return function useMediaQuery() {
    return useSyncExternalStore(subscribe, getSnapshot)
  }
}

const useNarrowMediaQuery = makeMediaQueryStore('(max-width: 600px)')

function NarrowScreenNotifier() {
  const isNarrow = useNarrowMediaQuery()
  return isNarrow ? 'You are on a narrow screen' : 'You are on a wide screen'
}

function App() {
  return (
    <div>
      <div>This is your narrow screen state:</div>
      <Suspense fallback="...loading...">
        <NarrowScreenNotifier />
      </Suspense>
    </div>
  )
}

const root = ReactDOM.hydrateRoot(rootEl, <App />, {
  onRecoverableError(error) {
    if (String(error).includes('Missing getServerSnapshot')) return
    console.error(error)
  }
})