React 18 下从 Context 迁移到 Zustand 4：一次首屏渲染耗时从 380ms 降到 120ms 的记录

// store/ConfigContext.tsx （迁移前）
import React, { createContext, useContext, useReducer } from 'react';

type State = {
  draft: Record;
  skus: Array;
};

type Action =
  | { type: 'SET_FIELD'; path: string; value: any }
  | { type: 'SET_SKU'; id: string; patch: Partial };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'SET_FIELD':
      return { ...state, draft: { ...state.draft, [action.path]: action.value } };
    case 'SET_SKU':
      return {
        ...state,
        skus: state.skus.map((s) => (s.id === action.id ? { ...s, ...action.patch } : s)),
      };
    default:
      return state;
  }
}

const ConfigContext = createContext } | null>(null);

export function ConfigProvider({ children }: { children: React.ReactNode }) {
  const [state, dispatch] = useReducer(reducer, { draft: {}, skus: [] });
  return {children};
}

export function useConfig() {
  const ctx = useContext(ConfigContext);
  if (!ctx) throw new Error('useConfig must be used within ConfigProvider');
  return ctx;
}

// store/useEditorStore.ts
import { create } from 'zustand';
import { subscribeWithSelector } from 'zustand/middleware';

type SKU = { id: string; price: number; stock: number };

type EditorState = {
  draft: Record;
  skus: SKU[];
  selectedSkuId: string | null;
  // actions
  setField: (path: string, value: any) => void;
  setSku: (id: string, patch: Partial) => void;
  selectSku: (id: string | null) => void;
  reset: () => void;
};

const initialState = {
  draft: {} as Record,
  skus: [] as SKU[],
  selectedSkuId: null as string | null,
};

export const useEditorStore = create()(
  subscribeWithSelector((set, get) => ({
    ...initialState,
    setField: (path, value) =>
      set((s) => ({ draft: { ...s.draft, [path]: value } })),
    setSku: (id, patch) =>
      set((s) => ({
        skus: s.skus.map((sku) => (sku.id === id ? { ...sku, ...patch } : sku)),
      })),
    selectSku: (id) => set({ selectedSkuId: id }),
    reset: () => set(initialState),
  }))
);

function TitleInput() {
  const { state, dispatch } = useConfig();
  return (
     dispatch({ type: 'SET_FIELD', path: 'title', value: e.target.value })}
    />
  );
}

// components/TitleInput.tsx
import { useEditorStore } from '../store/useEditorStore';

export function TitleInput() {
  // 只订阅 draft.title，其它字段变化不会触发本组件重渲染
  const title = useEditorStore((s) => s.draft.title ?? '');
  const setField = useEditorStore((s) => s.setField);
  return (
     setField('title', e.target.value)} />
  );
}

// ❌ 每次返回新对象，引用变了，Zustand 4 默认用 Object.is 比较
const { title, price } = useEditorStore((s) => ({ title: s.draft.title, price: s.draft.price }));

// ✅ 写法一：分开订阅，最省心
const title = useEditorStore((s) => s.draft.title);
const price = useEditorStore((s) => s.draft.price);

// ✅ 写法二：用 useShallow 包一层（zustand 4.4+ 内置）
import { useShallow } from 'zustand/react/shallow';
const { title, price } = useEditorStore(
  useShallow((s) => ({ title: s.draft.title, price: s.draft.price }))
);

// components/SkuRow.tsx
import { useEditorStore } from '../store/useEditorStore';
import { memo } from 'react';

type Props = { id: string };

export const SkuRow = memo(function SkuRow({ id }: Props) {
  // 只取这一行，别的行更新不会让它重渲染
  const sku = useEditorStore((s) => s.skus.find((x) => x.id === id));
  const setSku = useEditorStore((s) => s.setSku);
  if (!sku) return null;
  return (

      {sku.id}

         setSku(id, { price: Number(e.target.value) })}
        />


         setSku(id, { stock: Number(e.target.value) })}
        />


  );
});

// utils/validate.ts
import { useEditorStore } from '../store/useEditorStore';

export function validateDraft() {
  const { draft, skus } = useEditorStore.getState();
  const errors: string[] = [];
  if (!draft.title) errors.push('标题不能为空');
  if (skus.some((s) => s.price  a + b.price * b.stock, 0)` 写在 selector 里，虽然结果是个 number 不会触发重渲染，但计算本身每次 store 变化都会跑。解决：拆出一个独立 selector 函数，或者用第三方 `reselect` 缓存。

**坑 2：`subscribeWithSelector` 配合 `useEffect` 时，订阅回调里的 setState 触发额外渲染。**

我用来做“草稿自动保存到 localStorage”，最初写在组件里：

```ts
useEffect(() => {
  const unsub = useEditorStore.subscribe(
    (s) => s.draft,
    (draft) => saveDraft(draft)
  );
  return unsub;
}, []);