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

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

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

• 项目可能是Hybrid 架构，RN 只是一个子模块

• 原生工程结构复杂，不希望引入侵入式方案

• 状态类型混杂：UI 状态 + 业务状态 + 缓存状态

• 对性能和渲染稳定性要求较高

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

1. 无 Provider，天然适合 RN Module

// 不需要 

const count = useCounterStore((s) => s.count);

• 不依赖 React Context

• RN 作为子工程接入成本极低

• 非常适合RN Library / 子业务模块

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

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

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

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 项目中的推荐目录结构

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

• 按领域拆 store，而不是按技术拆

• 一个 store 只解决一个问题

• 不搞rootStore

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

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

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

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

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

五、性能优化：RN 中必须重视的问题 1. 禁止全量订阅

❌ 错误示例：

const store = useAuthStore();

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

2. Selector + shallow 是标配

import { shallow } from 'zustand/shallow';


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

适用于：

• Header

• TabBar

• List Item

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

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

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

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

 export const useListStore = create 
 ((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,
    }));
  },
}));

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


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

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

七、持久化：Zustand + AsyncStorage

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


 exportconst 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

RTK

代码量

极少

心智负担

RN Module

非常适合

一般

超大型项目

一般

更稳妥

实际建议

• RN 业务模块 / 子工程：Zustand

• 跨端统一状态 / 超复杂逻辑：RTK

• 两者完全可以共存

Zustand 非万能：

不适合的场景：

• 复杂状态流转（有限状态机）

• 强约束的数据一致性

• 超大团队协作的核心状态

非常适合的场景：

• 页面级 / 模块级状态

• UI 状态管理

• Hybrid RN 工程

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

• 降低状态管理门槛

• 提升开发效率

• 保持工程结构清晰

• 对 Hybrid 架构极度友好

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