React 19 useSyncExternalStore 状态订阅并发稳定性实践

概览`useSyncExternalStore` 提供 React 并发安全的外部数据订阅机制，避免在并发模式下出现撕裂更新与不一致渲染，适用于事件与全局状态同步场景。轻量 storetype Listener = () => void

class Store {

private value = 0

private listeners: Set<Listener> = new Set()

getSnapshot() { return this.value }

subscribe(fn: Listener) { this.listeners.add(fn); return () => this.listeners.delete(fn) }

set(v: number) { this.value = v; this.listeners.forEach((l) => l()) }

}

export const store = new Store()

React 组件订阅'use client'

import { useSyncExternalStore } from 'react'

import { store } from './store'

export default function Counter() {

const snap = useSyncExternalStore(store.subscribe.bind(store), store.getSnapshot.bind(store))

return (

<div>

<p>值：{snap}</p>

<button onClick={() => store.set(snap + 1)}>加一</button>

</div>

)

}

治理要点`getSnapshot` 必须是无副作用且快速；订阅与取消应健壮。对复杂对象提供不可变快照或版本号，避免比较与渲染异常。与并发特性（如 `useTransition`）协作，确保交互与订阅更新有序。验证与指标React：19.0+；Next.js：15.0+并发场景下订阅一致、无撕裂；事件驱动页面更新稳定