Zustand在ReactNative中的工程实践与性能优化总结

在 React Native 项目中，状态管理几乎是绕不开的话题。Redux 足够成熟，但样板代码偏重；Context 灵活，却容易失控。本文结合真实 RN 项目经验，系统总结 Zustand 在 React Native 中的工程化使用方式，帮助你在复杂度与开发效率之间找到平衡点。

一、为什么在 React Native 中选择 Zustand

在 RN 工程中，引入状态管理通常会面临几个现实问题：

项目可能是 Hybrid 架构，RN 只是一个子模块
原生工程结构复杂，不希望引入侵入式方案
状态类型混杂：UI 状态 + 业务状态 + 缓存状态
对性能和渲染稳定性要求较高

Zustand 的优势，正好命中这些痛点：

1. 无 Provider，天然适合 RN Module

tsx 复制代码

// 不需要 <Provider />
const count = useCounterStore((s) => s.count);

不依赖 React Context
RN 作为子工程接入成本极低
非常适合 RN Library / 子业务模块

2. API 极简，降低心智负担

ts 复制代码

const useStore = create((set) => ({
  count: 0,
  inc: () => set((s) => ({ count: s.count + 1 })),
}));

没有 reducer、action、slice 的概念，状态即逻辑。

3. 天然支持异步，符合 RN 直觉

ts 复制代码

fetchList: async () => {
  set({ loading: true });
  const data = await request();
  set({ list: data, loading: false });
}

无需 thunk / saga，减少工程复杂度。

二、Zustand 的核心设计理念

在工程实践中，可以将 Zustand 的理念总结为三点：

1️⃣ Store 是"模块状态容器"，不是全局垃圾桶

2️⃣ Selector 是性能优化的核心

3️⃣ 状态拆分优于状态归一化

如果忽略这三点，Zustand 也会被用"烂"。

三、React Native 项目中的推荐目录结构

text 复制代码

src/
 ├── store/
 │    ├── auth/
 │    │    └── useAuthStore.ts
 │    ├── ui/
 │    │    └── useUIStore.ts
 │    ├── list/
 │    │    └── useListStore.ts
 │    └── index.ts
 ├── pages/
 ├── components/
 └── services/

设计原则

按领域拆 store，而不是按技术拆
一个 store 只解决一个问题
不搞 rootStore

四、基础 Store 的工程化写法

登录态 Store 示例

ts 复制代码

type User = {
  id: string;
  name: string;
};

type AuthState = {
  user?: User;
  token?: string;
  login: (user: User, token: string) => void;
  logout: () => void;
};

export const useAuthStore = create<AuthState>((set) => ({
  user: undefined,
  token: undefined,
  login: (user, token) => set({ user, token }),
  logout: () => set({ user: undefined, token: undefined }),
}));

使用方式（关键）

ts 复制代码

const user = useAuthStore((s) => s.user);
const logout = useAuthStore((s) => s.logout);

❗永远不要直接解构整个 store

五、性能优化：RN 中必须重视的问题

1. 禁止全量订阅

❌ 错误示例：

ts 复制代码

const store = useAuthStore();

这会导致 任何状态变化都触发组件重渲染。

2. Selector + shallow 是标配

ts 复制代码

import { shallow } from 'zustand/shallow';

const { user, token } = useAuthStore(
  (s) => ({ user: s.user, token: s.token }),
  shallow
);

适用于：

Header
TabBar
List Item

3. 高频 UI 状态单独 Store

ts 复制代码

type UIState = {
  loading: boolean;
  show: () => void;
  hide: () => void;
};

避免与业务状态混用，减少渲染链路。

六、异步数据 + 列表场景实践

列表 Store 示例

ts 复制代码

type ListState = {
  list: any[];
  page: number;
  loading: boolean;
  refreshing: boolean;
  fetch: (refresh?: boolean) => Promise<void>;
};

export const useListStore = create<ListState>((set, get) => ({
  list: [],
  page: 1,
  loading: false,
  refreshing: false,

  fetch: async (refresh = false) => {
    const page = refresh ? 1 : get().page;

    set(refresh ? { refreshing: true } : { loading: true });

    const data = await fetchListApi(page);

    set((state) => ({
      list: refresh ? data : [...state.list, ...data],
      page: page + 1,
      loading: false,
      refreshing: false,
    }));
  },
}));

FlatList 使用

tsx 复制代码

const list = useListStore((s) => s.list);
const fetch = useListStore((s) => s.fetch);
const refreshing = useListStore((s) => s.refreshing);

<FlatList
  data={list}
  onRefresh={() => fetch(true)}
  refreshing={refreshing}
  onEndReached={() => fetch(false)}
/>

逻辑集中、UI 干净，非常适合 RN。

七、持久化：Zustand + AsyncStorage

ts 复制代码

import { persist } from 'zustand/middleware';
import AsyncStorage from '@react-native-async-storage/async-storage';

export const useAuthStore = create(
  persist(
    (set) => ({
      token: '',
      setToken: (t: string) => set({ token: t }),
      clear: () => set({ token: '' }),
    }),
    {
      name: 'auth-store',
      storage: {
        getItem: AsyncStorage.getItem,
        setItem: AsyncStorage.setItem,
        removeItem: AsyncStorage.removeItem,
      },
    }
  )
);

注意点

冷启动恢复是 异步的
首屏渲染要考虑 token 未恢复完成的情况

八、Zustand vs Redux Toolkit（RN 实战结论）

维度	Zustand	RTK
代码量	极少	多
心智负担	低	中
RN Module	非常适合	一般
超大型项目	一般	更稳妥

实际建议

RN 业务模块 / 子工程：Zustand
跨端统一状态 / 超复杂逻辑：RTK
两者完全可以共存

九、真实项目中的使用边界

Zustand 非万能：

不适合的场景：

复杂状态流转（有限状态机）
强约束的数据一致性
超大团队协作的核心状态

非常适合的场景：

页面级 / 模块级状态
UI 状态管理
Hybrid RN 工程

十、总结

Zustand 在 React Native 中的价值不在于"替代 Redux"，而在于：

降低状态管理门槛
提升开发效率
保持工程结构清晰
对 Hybrid 架构极度友好

用对地方，它就是 RN 项目的效率放大器。