React Context 迁移到 Zustand 4.4：中台项目状态管理重构与性能对比

react: 18.2.0
react-dom: 18.2.0
typescript: 4.9.5
vite: 4.1.1
zustand: 4.4.1

src/stores/
  userStore.ts       // 用户信息、权限、登录态
  configStore.ts     // 全局配置、字典
  workspaceStore.ts  // 工作区、租户、仓库选择
  noticeStore.ts     // 通知、弹窗队列
  orderFilterStore.ts // 订单筛选页局部状态（从 useState 提升）

// 迁移前：WorkspaceContext.tsx
const WorkspaceContext = createContext(null);

export function WorkspaceProvider({ children }: { children: ReactNode }) {
  const [workspace, setWorkspace] = useState(null);
  const [tenantId, setTenantId] = useState('');
  const [warehouseId, setWarehouseId] = useState('');

  // 每次渲染都创建新对象，所有消费者重渲染
  const value = { workspace, setWorkspace, tenantId, setTenantId, warehouseId, setWarehouseId };

  return {children};
}

export function useWorkspace() {
  const ctx = useContext(WorkspaceContext);
  if (!ctx) throw new Error('useWorkspace must be used within WorkspaceProvider');
  return ctx;
}

// 迁移后：src/stores/workspaceStore.ts
import { create } from 'zustand';
import { devtools, persist } from 'zustand/middleware';
import { workspaceApi } from '@/api/workspace';

interface WorkspaceState {
  workspace: Workspace | null;
  tenantId: string;
  warehouseId: string;
  loading: boolean;
  setTenant: (id: string) => void;
  setWarehouse: (id: string) => void;
  fetchWorkspace: (id: string) => Promise;
}

export const useWorkspaceStore = create()(
  devtools(
    persist(
      (set, get) => ({
        workspace: null,
        tenantId: '',
        warehouseId: '',
        loading: false,

        setTenant: (id) => {
          // 切换租户时清空仓库选择，避免脏数据
          set({ tenantId: id, warehouseId: '' }, false, 'workspace/setTenant');
        },

        setWarehouse: (id) => set({ warehouseId: id }, false, 'workspace/setWarehouse'),

        fetchWorkspace: async (id) => {
          set({ loading: true }, false, 'workspace/fetchStart');
          try {
            const data = await workspaceApi.get(id);
            set({ workspace: data, loading: false }, false, 'workspace/fetchSuccess');
          } catch (e) {
            set({ loading: false }, false, 'workspace/fetchError');
            throw e;
          }
        },
      }),
      {
        name: 'workspace-storage',
        // 只持久化必要的字段，workspace 对象太大不存
        partialize: (state) => ({ tenantId: state.tenantId, warehouseId: state.warehouseId }),
      }
    ),
    { name: 'WorkspaceStore', enabled: import.meta.env.DEV }
  )
);

// 迁移后：组件内使用
import { useWorkspaceStore } from '@/stores/workspaceStore';
import { useShallow } from 'zustand/react/shallow';

function WarehouseSelector() {
  // 只订阅需要的字段，tenantId 变化不会触发这个组件重渲染
  const warehouseId = useWorkspaceStore((s) => s.warehouseId);
  const setWarehouse = useWorkspaceStore((s) => s.setWarehouse);

  return (

  );
}

// 需要多个字段时用 useShallow，避免对象引用每次都变
function WorkspaceHeader() {
  const { workspace, loading } = useWorkspaceStore(
    useShallow((s) => ({ workspace: s.workspace, loading: s.loading }))
  );
  // ...
}

// 迁移前：组件内散落的异步逻辑
function OrderFilter() {
  const { tenantId } = useWorkspace();
  const [dict, setDict] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (!tenantId) return;
    setLoading(true);
    fetchDict(tenantId).then(setDict).finally(() => setLoading(false));
  }, [tenantId]);
  // ...
}

// src/stores/configStore.ts
export const useConfigStore = create()((set, get) => ({
  dictMap: {} as Record,
  dictLoading: false,

  fetchDict: async (tenantId: string) => {
    if (get().dictMap[tenantId]) return; // 缓存命中直接返回
    set({ dictLoading: true });
    const data = await dictApi.list(tenantId);
    set((s) => ({ dictMap: { ...s.dictMap, [tenantId]: data }, dictLoading: false }));
  },
}));

useWorkspaceStore.subscribe(
  (s) => s.tenantId,
  (tenantId, prevTenantId) => {
    if (tenantId !== prevTenantId) {
      useOrderFilterStore.getState().reset();
    }
  }
);