Zustand入门：React Native状态管理的正确用法|loading|native|react|spiderlinebreak|zustand|拆分

一、Zustand 是什么，适合什么场景

Zustand是一个轻量级、基于 hooks 的状态管理库，核心特点是：

无 Provider（无需 Context 包裹）
API 极简（create + hooks）
按需订阅（避免无关组件重渲染）
对 React Native 友好（无额外平台依赖）
可渐进式引入

非常适合以下 RN 场景：

中小规模应用
RN Hybrid / Module 化工程
UI 状态 + 业务状态混合管理
替代部分 Redux 的场景

二、安装

yarn add zustand
# 或
npm install zustand

React Native 无需额外配置。

三、最基础用法（核心必会） 1. 创建 Store

// store/useCounterStore.ts
import { create } from 'zustand';

 type CounterState = {
  count: number;
  inc: () => void;
  dec: () => void;
};

 export const useCounterStore = create 
 ((set) => ({
  count: 0,
  inc: () => set((state) => ({ count: state.count + 1 })),
  dec: () => set((state) => ({ count: state.count - 1 })),
}));

2. 在组件中使用

import React from 'react';
import { View, Text, Button } from 'react-native';
import { useCounterStore } from './store/useCounterStore';

 export default function Counter() {
  const count = useCounterStore((state) => state.count);
  const inc = useCounterStore((state) => state.inc);

   return (
    
 
      
 
 Count: {count} 
 
    
  );
}

关键点

selector 模式：useStore(state => state.xxx)
只订阅使用到的字段，避免全量刷新

四、推荐的工程化写法（重要） ❌ 不推荐

const store = useStore();

这样会导致任意状态变更都触发重渲染

✅ 推荐：拆分 selector

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

或：

const { count, inc } = useCounterStore(
  (s) => ({ count: s.count, inc: s.inc })
);

五、Zustand 在 React Native 中的常见模式 1. 全局 UI 状态（Loading / Modal）

type UIState = {
  loading: boolean;
  showLoading: () => void;
  hideLoading: () => void;
};


 export const useUIStore = create 
 ((set) => ({
  loading: false,
  showLoading: () => set({ loading: true }),
  hideLoading: () => set({ loading: false }),
}));

const loading = useUIStore((s) => s.loading);

2. 业务状态（登录信息）

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

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

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

3. 异步 Action（非常自然）

type ListState = {
  list: string[];
  loading: boolean;
  fetchList: () => Promise;
};


 export const useListStore = create 
 ((set) => ({
  list: [],
  loading: false,
  fetchList: async () => {
    set({ loading: true });
    const res = await fetch('https://example.com/list');
    const data = await res.json();
    set({ list: data, loading: false });
  },
}));

RN 中无需 thunk / saga。

六、性能优化（RN 场景非常关键） 1. 使用 shallow 避免对象对比

import { shallow } from 'zustand/shallow';


 const { count, inc } = useCounterStore(
  (s) => ({ count: s.count, inc: s.inc }),
  shallow
);

2. 将高频 UI 状态拆分 Store

store/
 ├── useAuthStore.ts
 ├── useUIStore.ts
 ├── useListStore.ts

避免一个大 Store。

七、持久化（AsyncStorage） RN 常用：zustand + persist

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


 exportconst useAuthStore = create(
  persist(
    (set) => ({
      token: '',
      setToken: (token: string) =>set({ token }),
      clearToken: () =>set({ token: '' }),
    }),
    {
      name: 'auth-storage',
      storage: {
        getItem: AsyncStorage.getItem,
        setItem: AsyncStorage.setItem,
        removeItem: AsyncStorage.removeItem,
      },
    }
  )
);