Zustand 与 useSyncExternalStore：现代 React 状态管理的极简之道

引言

在 React 生态中，状态管理始终是核心挑战。从 Redux 的样板代码到 Context API 的性能瓶颈，开发者一直在寻求更优雅的解决方案。Zustand 的出现带来了全新范式------无 Provider 的原子状态管理，而其秘密武器正是 React 18 引入的 useSyncExternalStore API。

Zustand初体验

先来看看Zustand是怎么使用的，摘自Zustand官网：

javascript 复制代码

// store.js
import { create } from 'zustand'

const useStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
  updateBears: (newBears) => set({ bears: newBears }),
}))

// app.jsx
function BearCounter() {
  const bears = useStore((state) => state.bears)
  return <h1>{bears} bears around here...</h1>
}

function Controls() {
  const increasePopulation = useStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}

是不是很简单？有没有一种感觉像是在些Vue？比如说Vue3中用到的Pinia那个小菠萝？以下是Vue3中使用的Pinia：

javascript 复制代码

// stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },
  // 也可以这样定义
  // state: () => ({ count: 0 })
  actions: {
    increment() {
      this.count++
    },
  },
})

// conponent.vue
<script setup>
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()

counter.count++
// 自动补全！ ✨
counter.$patch({ count: counter.count + 1 })
// 或使用 action 代替
counter.increment()
</script>

<template>
  <!-- 直接从 store 中访问 state -->
  <div>Current Count: {{ counter.count }}</div>
</template>

他们两个的区别就是，Pinia把状态和方法分开了，而Zustand是用一个对象来集中管理的整个Store，所以是平级放的。当然Pinia也可以这样：

javascript 复制代码

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  function increment() {
    count.value++
  }

  return { count, increment }
})

扯远了，说回来，我们似乎终于有了选择可以不用像Redux那么麻烦。可以原子化使用的、属于React的状态管理库了。

灵魂纽带

它能这么简单，是因为啥呢？我们接下来看看Zustand的核心，从源码找出关键（这里重点看React18之后）上代码：

javascript 复制代码

// 简化的 Zustand 核心实现，伪代码展示核心逻辑
const createStore = (initialState) => {
  let state = initialState
  const listeners = new Set()

  // Zustand store 的核心方法
  const setState = (partial) => {
    state = Object.assign({}, state, partial)
    listeners.forEach(listener => listener()) // 通知所有订阅者
  }

  const getState = () => state

  // 关键：连接 React 的 Hook
  const useStore = (selector) => {
    return useSyncExternalStore(
      (listener) => {
        listeners.add(listener)
        return () => listeners.delete(listener)
      },
      () => selector(state) // 获取当前快照
    )
  }

  return { setState, getState, useStore }
}

这里有一个核心API: useSyncExternalStore。这个API是干啥的？官网只说了它可以订阅一个外部的store。但其实它的核心作用是三点：

连接外部状态：订阅非 React 管理的状态源（如 Redux/Zustand 的 store、浏览器 API、全局变量等），并在状态变化时触发组件更新。
避免状态撕裂（Tearing）：在并发渲染中，确保同一渲染周期内所有组件读取的状态保持一致，防止部分组件显示旧值、部分显示新值的视觉不一致。
并发模式兼容：为 React 的并发特性（如 Suspense、选择性水合）提供安全的状态读取机制。

API参数解释：

arduino 复制代码

const state = useSyncExternalStore(
  subscribe,     // 订阅函数（必须）
  getSnapshot,   // 获取当前状态快照（必须）
  getServerSnapshot? // 服务端渲染快照（可选）
);

subscribe：接收一个回调函数（callback），当数据源变化时调用它。返回取消订阅的函数
getSnapshot：返回组件所需数据的当前快照（必须返回缓存值或不可变数据）
getServerSnapshot：返回服务端渲染时的初始快照（用于 SSR/SSG 避免水合错误）

协作逻辑

从上面可以看出来，这个API主要是利用发布订阅模式来更新组件的状态，当数据变化时。即使用set()来跟新数据的时候，Zustand会调用listeners里的监听器，监听执行更新逻辑（React内部管理），从而更新页面。其主要特点是：

自动清理：当组件卸载时，React 自动调用返回的清理函数

javascript 复制代码

// Zustand 的订阅实现
subscribe: (listener) => {
  listeners.add(listener)
  return () => listeners.delete(listener) // ✅ 符合 useSyncExternalStore 要求
}

批量更新：Zustand 内部合并状态更新，避免多次渲染
浅比较优化：Zustand 自动比较前后快照，避免无效渲染
并发模式安全：Zustand 通过 useSyncExternalStore 内置的版本控制机制，确保组件始终读取最新一致状态。

less 复制代码

// React 内部处理流程
1. 渲染开始：获取当前快照 Snapshot A
2. 状态更新：外部存储产生 Snapshot B
3. 渲染中断：React 丢弃未完成渲染
4. 重新渲染：获取新快照 Snapshot B ✅ 保持一致性

深入内部原理

useSyncExternalStore 是 React 18 并发渲染架构中的关键 Hook，其设计精巧地解决了外部状态源与 React 渲染机制的集成问题。我们深入其中解析内部工作原理，尤其是第一个订阅参数的核心机制。

订阅流程讲解

组件首次渲染时，React 调用 subscribe 函数并传入内部回调 handleStoreChange
React 保存返回的清理函数到组件对应的 Fiber 节点
订阅过程发生在 useLayoutEffect 阶段（而非 useEffect），确保及时响应
当外部存储状态变化时，调用 handleStoreChange()（此回调触发 React 的低优先级更新调度）
重新调用 getSnapshot() 获取最新状态
使用 Object.is 比较新旧快照
若状态变化，标记组件需要重新渲染
在渲染提交阶段更新 DOM
组件卸载时执行清理函数
当 subscribe 函数引用变化时（依赖项变更），先清理旧订阅再建立新订阅

订阅器伪代码

scss 复制代码

function useSyncExternalStore(subscribe, getSnapshot) {
  const fiber = currentlyRenderingFiber;
  const stateHook = createStateHook(fiber);
  
  // 首次渲染初始化
  if (isFirstRender) {
    stateHook.snapshot = getSnapshot();
    stateHook.getSnapshot = getSnapshot;
    
    // 创建订阅
    const listener = () => {
      const newSnapshot = getSnapshot();
      if (!Object.is(stateHook.snapshot, newSnapshot)) {
        // 调度更新
        scheduleStoreUpdate(fiber);
      }
    };
    
    stateHook.unsubscribe = subscribe(listener);
  }
  
  // 更新处理
  useEffect(() => {
    return () => {
      // 清理订阅
      if (stateHook.unsubscribe) stateHook.unsubscribe();
    };
  }, [subscribe]);
  
  // 快照一致性检查 (并发安全)
  const newSnapshot = getSnapshot();
  if (shouldCheckForTearing) {
    checkSnapshotConsistency(fiber, newSnapshot);
  }
  
  return newSnapshot;
}

订阅机制的底层交互

渲染阶段：
- 调用 getSnapshot() 获取状态
- 冻结当前快照用于本次渲染
提交阶段：
- 应用 DOM 更新
- 执行 useLayoutEffect（订阅建立点）
调度阶段：
- 订阅回调触发更新调度
- React 批量处理多个存储更新

useSyncExternalStore 是React中外部状态与 React 之间建立了安全高效的桥梁，尤其并发渲染，是现代 React 状态管理的基石之一。