前言

三年前，我們還在 Reddit 上吵得不可開交：
“Redux 太啰嗦！” “Zustand 太黑盒！” “Jotai 會內(nèi)存泄漏！”

今天，React 19 直接把“外掛倉庫”拆成了無數(shù)顆微狀態(tài)膠囊（Micro-State Capsules）——隨用隨取，隨丟隨滅。
狀態(tài)不再集中，而是散落在組件樹的最小粒度，靠框架自動合并、同步、持久化。

變化

實戰(zhàn)

3.1 數(shù)據(jù)請求：3 行代碼搞定“拉取-緩存-重試”

// UserCard.tsx
export default function UserCard({ id }: { id: string }) {
  // ① 接口返回 Promise，React 自動去重、緩存、過期重驗證
  const user = use(fetchUser(id));   // ← 同步寫法，卻具備 swr 全部能力

  return (
    <article>
      <h1>{user.name}</h1>
      <img src={user.avatar} alt={user.name} />
    </article>
  );
}

流程圖：React 19 如何管理 use(promise)

3.2 主題切換：0 行 JavaScript 渲染邏輯

// DarkModeToggle.tsx
export default function DarkModeToggle() {
  const [theme, setTheme] = use(storage('theme', 'light'));

  // 樣式原子實時注入，不觸發(fā) React 渲染
  use(style`
    :root {
      --bg: ${theme === 'dark' ? '#1e1e1e' : '#ffffff'};
      --fg: ${theme === 'dark' ? '#ffffff' : '#1e1e1e'};
    }
  `);

  return (
    <button onClick={() => setTheme(t => t === 'dark' ? 'light' : 'dark')}>
      {theme === 'dark' ? '??' : '??'}
    </button>
  );
}

架構圖：主題膠囊在瀏覽器各線程間的流向

3.3 路由即狀態(tài)：語言切換不再刷新整頁

// LangSwitcher.tsx
export default function LangSwitcher() {
  // 把 /[lang]/blog 中的 lang 當成狀態(tài)
  const [lang, setLang] = use(navigation().param('lang'));

  return (
    <select value={lang} onChange={e => setLang(e.target.value)}>
      <option value="en">English</option>
      <option value="zh">中文</option>
    </select>
  );
}

關鍵點

• 改變 lang 等價于 router.push，但 Next.js 15 會只 RSC 渲染變更區(qū)域。
• 若同一頁面有多語言段落，React 會流式返回 diff，首字節(jié)時間 < 50 ms。

3.4 持久化遷移：把 Redux Store 搬進“膠囊”

假設你有一個舊 userSlice 結構：

// legacy:userSlice
interface UserSlice {
  id: string;
  name: string;
  vip: boolean;
}

遷移 3 步曲

1. 聲明兼容類型

// migrate.ts
export const userCapsule = storage<UserSlice>('user', {
  id: '',
  name: '',
  vip: false,
  version: 1, // React 會根據(jù) version 自動執(zhí)行 migrate 函數(shù)
});

2. 在根組件做一次“搬家中轉”

// App.tsx
function Bootstrap() {
  const dispatch = useDispatch();
  const legacyUser = useSelector(state => state.user);

  // ② 把 Redux 數(shù)據(jù)寫入膠囊，只需一次
  const [, setUserCapsule] = use(userCapsule);
  useEffect(() => setUserCapsule(legacyUser), [legacyUser]);

  return <NextUI />;
}

3. 業(yè)務組件直接訂閱膠囊

// UserBadge.tsx
export default function UserBadge() {
  const user = use(userCapsule);   // ← 不再經(jīng)過 Redux
  return <span>{user.vip ? '??' : '??'} {user.name}</span>;
}

遷移流程圖

遷移

1. 漸進式切片
   把 Redux Store 拆成頁面級 slice → 封裝 toCapsule() 轉換函數(shù) → 灰度 10 % 用戶。
2. 雙調(diào)度共存
   舊組件 createLegacyRoot() 跑舊調(diào)度器，新組件 createRoot() 跑微狀態(tài)調(diào)度器，通過 useSyncExternalStore 雙向同步。
3. 類型即契約
   一份 GlobalState.d.ts 映射舊字段 → TypeScript 自動提示“無人訂閱”字段 → 安全刪除。

結語

當緩存、持久化、路由、樣式都被框架做成聲明式原語，
我們終于可以把 100% 的腦力放在產(chǎn)品邏輯而非“管數(shù)據(jù)”上。