React Context迁移Zustand：一次真实的性能优化与重构记录

{
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "typescript": "4.9.5",
  "vite": "4.4.9",
  "zustand": "4.4.1",
  "immer": "10.0.2",
  "react-router-dom": "6.15.0"
}

// 迁移前：AppContext.tsx
import { createContext, useContext, useState, useEffect } from 'react';

interface AppState {
  user: { id: string; name: string; avatar: string } | null;
  permissions: string[];
  unreadCount: number;
  theme: 'light' | 'dark';
}

const AppContext = createContext({} as AppState);

export function AppProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState(null);
  const [permissions, setPermissions] = useState([]);
  const [unreadCount, setUnreadCount] = useState(0);
  const [theme, setTheme] = useState('light');

  useEffect(() => {
    fetch('/api/user').then(r => r.json()).then(data => {
      setUser(data.user);
      setPermissions(data.permissions);
    });
    // 30秒轮询未读数，这里就是重渲染的罪魁祸首
    const timer = setInterval(() => {
      fetch('/api/notify/unread').then(r => r.json()).then(d => setUnreadCount(d.count));
    }, 30000);
    return () => clearInterval(timer);
  }, []);

  // 任意一个字段变化，value 都是新对象，所有消费者全部重渲染
  return (

      {children}

  );
}

export const useAppContext = () => useContext(AppContext);

// stores/userStore.ts
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';

interface UserInfo {
  id: string;
  name: string;
  avatar: string;
}

interface UserState {
  user: UserInfo | null;
  permissions: string[];
  loading: boolean;
  fetchUser: () => Promise;
  hasPermission: (code: string) => boolean;
  logout: () => void;
}

export const useUserStore = create()(
  devtools(
    (set, get) => ({
      user: null,
      permissions: [],
      loading: false,

      fetchUser: async () => {
        set({ loading: true }, false, 'user/fetchStart');
        try {
          const res = await fetch('/api/user');
          const data = await res.json();
          set({ user: data.user, permissions: data.permissions, loading: false }, false, 'user/fetchSuccess');
        } catch (e) {
          set({ loading: false }, false, 'user/fetchError');
          throw e;
        }
      },

      hasPermission: (code) => get().permissions.includes(code),

      logout: () => set({ user: null, permissions: [] }, false, 'user/logout'),
    }),
    { name: 'UserStore', enabled: import.meta.env.DEV }
  )
);

// 语义化封装，业务组件只用这个
export const useUserInfo = () => useUserStore((s) => s.user);
export const usePermissions = () => useUserStore((s) => s.permissions);

// stores/notifyStore.ts
import { create } from 'zustand';
import { subscribeWithSelector } from 'zustand/middleware';
import { useShallow } from 'zustand/react/shallow';

interface NotifyState {
  unreadCount: number;
  list: Array;
  setUnread: (n: number) => void;
  markRead: (id: string) => void;
}

export const useNotifyStore = create()(
  subscribeWithSelector((set) => ({
    unreadCount: 0,
    list: [],
    setUnread: (n) => set({ unreadCount: n }),
    markRead: (id) =>
      set((state) => ({
        list: state.list.map((item) => (item.id === id ? { ...item, read: true } : item)),
        unreadCount: Math.max(0, state.unreadCount - 1),
      })),
  }))
);

// 只订阅 unreadCount，list 变化不会触发使用该 hook 的组件
export const useUnreadCount = () => useNotifyStore((s) => s.unreadCount);

// 返回对象时必须用 useShallow，否则每次都是新引用，等于没优化
export const useNotifyActions = () =>
  useNotifyStore(
    useShallow((s) => ({ setUnread: s.setUnread, markRead: s.markRead }))
  );

// layouts/RootLayout.tsx 片段
import { useEffect } from 'react';
import { useNotifyStore } from '@/stores/notifyStore';

export function RootLayout({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    const timer = setInterval(async () => {
      const res = await fetch('/api/notify/unread');
      const data = await res.json();
      // getState() 直接取 action，不引起订阅
      useNotifyStore.getState().setUnread(data.count);
    }, 30000);
    return () => clearInterval(timer);
  }, []);

  return {children};
}