rn-app/docs/INSTALLED_PACKAGES.md

# 📦 已安装的工具库总结

本文档列出了项目中新安装的所有工具库及其用途。

## ✅ 安装完成的库

### 🛠️ 工具类库

#### 1. **Lodash-ES** `^4.17.21`
- **用途**: 强大的 JavaScript 工具函数库（ES modules 版本）
- **功能**: 数组、对象、字符串操作，防抖、节流等
- **优势**: 支持 tree-shaking，按需导入，减小包体积
- **文档**: https://lodash.com/docs/
- **示例**:
  ```typescript
  import { debounce, uniq } from 'lodash-es';
  debounce(fn, 300);  // 防抖
  uniq([1, 2, 2, 3]);  // 去重
  ```

#### 2. **Day.js** `^1.11.19`
- **用途**: 轻量级日期处理库（仅 2KB）
- **功能**: 日期格式化、相对时间、日期计算
- **文档**: https://day.js.org/
- **示例**:
  ```typescript
  import dayjs from 'dayjs';
  dayjs().format('YYYY-MM-DD');
  dayjs().fromNow();  // '几秒前'
  ```

#### 3. **Axios** `^1.13.1`
- **用途**: HTTP 请求库
- **功能**: Promise API、请求/响应拦截器、取消请求
- **文档**: https://axios-http.com/
- **示例**:
  ```typescript
  import axios from 'axios';
  const data = await axios.get('/api/users');
  ```

#### 4. **Zustand** `^5.0.8`
- **用途**: 轻量级状态管理库
- **功能**: 简单的全局状态管理，比 Redux 简单得多
- **文档**: https://zustand-demo.pmnd.rs/
- **示例**:
  ```typescript
  import { create } from 'zustand';
  const useStore = create((set) => ({
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
  }));
  ```

#### 5. **React Hook Form** `^7.66.0`
- **用途**: 高性能表单处理库
- **功能**: 表单验证、错误处理、性能优化
- **文档**: https://react-hook-form.com/
- **示例**:
  ```typescript
  import { useForm } from 'react-hook-form';
  const { register, handleSubmit } = useForm();
  ```

#### 6. **Zod** `^4.1.12`
- **用途**: TypeScript 优先的数据验证库
- **功能**: 数据验证、类型推断、错误处理
- **文档**: https://zod.dev/
- **示例**:
  ```typescript
  import { z } from 'zod';
  const schema = z.object({
    email: z.string().email(),
  });
  ```

---

### 📱 Expo 原生模块

#### 7. **AsyncStorage** `^2.2.0`
- **包名**: @react-native-async-storage/async-storage
- **用途**: React Native 本地持久化存储
- **功能**: 键值对存储、异步 API
- **文档**: https://react-native-async-storage.github.io/async-storage/
- **示例**:
  ```typescript
  import AsyncStorage from '@react-native-async-storage/async-storage';
  await AsyncStorage.setItem('key', 'value');
  ```

#### 8. **Expo Image** `^3.0.10`
- **用途**: 性能优化的图片组件
- **功能**: 占位符、缓存、渐进加载
- **文档**: https://docs.expo.dev/versions/latest/sdk/image/
- **示例**:
  ```typescript
  import { Image } from 'expo-image';
  <Image source={{ uri: 'https://...' }} />
  ```

#### 9. **Expo Haptics** `^15.0.7`
- **用途**: 触觉反馈功能
- **功能**: 震动反馈、成功/错误/警告反馈
- **文档**: https://docs.expo.dev/versions/latest/sdk/haptics/
- **示例**:
  ```typescript
  import * as Haptics from 'expo-haptics';
  Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
  ```

---

### 🔧 开发工具

#### 10. **@types/lodash-es** `^4.17.12`
- **用途**: Lodash-ES 的 TypeScript 类型定义
- **功能**: 提供完整的类型提示和类型检查
- **安装类型**: devDependencies

---

## 📊 安装统计

- **总计**: 10 个包
- **生产依赖**: 9 个
- **开发依赖**: 1 个
- **总大小**: 约 15MB（node_modules）

---

## 🎯 使用场景

### 数据处理
- **Lodash**: 数组、对象操作
- **Day.js**: 日期时间处理

### 网络请求
- **Axios**: HTTP 请求
- **Zod**: API 响应验证

### 状态管理
- **Zustand**: 全局状态
- **AsyncStorage**: 本地持久化

### 表单处理
- **React Hook Form**: 表单管理
- **Zod**: 表单验证

### 用户体验
- **Expo Image**: 图片优化
- **Expo Haptics**: 触觉反馈

---

## 🚀 快速开始

### 1. 查看使用指南
详细的使用方法请查看 [LIBRARIES.md](./LIBRARIES.md)

### 2. 推荐的项目结构
```
src/
├── utils/
│   ├── api.ts          # Axios 配置
│   ├── storage.ts      # AsyncStorage 封装
│   └── date.ts         # Day.js 工具函数
├── stores/
│   ├── userStore.ts    # 用户状态（Zustand）
│   └── settingsStore.ts
├── schemas/
│   ├── auth.ts         # 认证相关的 Zod schema
│   └── user.ts
└── hooks/
    ├── useDebounce.ts  # Lodash debounce 封装
    └── useThrottle.ts
```

### 3. 创建基础工具文件

**utils/api.ts** - Axios 配置
```typescript
import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
});

api.interceptors.request.use(async (config) => {
  const token = await AsyncStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

export default api;
```

**utils/storage.ts** - 存储工具
```typescript
import AsyncStorage from '@react-native-async-storage/async-storage';

class Storage {
  static async setObject<T>(key: string, value: T) {
    await AsyncStorage.setItem(key, JSON.stringify(value));
  }

  static async getObject<T>(key: string): Promise<T | null> {
    const value = await AsyncStorage.getItem(key);
    return value ? JSON.parse(value) : null;
  }
}

export default Storage;
```

**stores/userStore.ts** - 用户状态
```typescript
import { create } from 'zustand';

interface UserState {
  user: any | null;
  setUser: (user: any) => void;
}

export const useUserStore = create<UserState>((set) => ({
  user: null,
  setUser: (user) => set({ user }),
}));
```

---

## 💡 最佳实践

### 1. 性能优化
- ✅ 使用 Lodash-ES 的按需导入，减小包体积
- ✅ 使用 `debounce` 和 `throttle` 优化频繁触发的事件
- ✅ 使用 Zustand 的选择器避免不必要的重渲染
- ✅ 使用 Expo Image 的缓存策略优化图片加载

### 2. 类型安全
- ✅ 使用 Zod 定义数据结构并自动生成 TypeScript 类型
- ✅ 为 Zustand store 定义完整的类型接口
- ✅ 使用 `@types/lodash-es` 获得完整的类型提示

### 3. 代码组织
- ✅ 将 API 配置集中在 `utils/api.ts`
- ✅ 将存储操作封装在 `utils/storage.ts`
- ✅ 将状态管理放在 `stores/` 目录
- ✅ 将验证规则放在 `schemas/` 目录

### 4. 错误处理
- ✅ 在 Axios 拦截器中统一处理错误
- ✅ 使用 try-catch 包裹异步操作
- ✅ 提供用户友好的错误提示

---

## 📚 相关文档

- [LIBRARIES.md](./LIBRARIES.md) - 详细的使用指南和示例
- [README.md](./README.md) - 项目总体说明
- [KNOWN_ISSUES.md](./KNOWN_ISSUES.md) - 已知问题和解决方案

---

## 🎉 总结

所有工具库已成功安装并可以直接使用！这些库涵盖了：

- ✅ **数据处理** - Lodash-ES（支持 tree-shaking）, Day.js
- ✅ **网络请求** - Axios
- ✅ **状态管理** - Zustand
- ✅ **表单处理** - React Hook Form, Zod
- ✅ **本地存储** - AsyncStorage
- ✅ **用户体验** - Expo Image, Expo Haptics

开始使用这些强大的工具来构建你的应用吧！🚀