您如何架构 React Native 应用程序？

Question

Accepted Answer

架构良好的 React Native 应用程序涉及**组织代码**、**关注点分离**（UI、逻辑、数据）、选择**状态管理**，以及为**可维护性、可测试性和可扩展性**构建结构。随着应用程序的增长，良好的架构至关重要。

## 项目组织

```text
Organize code by FEATURE or by TYPE (feature-based scales better for large apps):
  src/features/auth/{components, screens, hooks, api, store}/   (feature-based)
  OR src/{components, screens, hooks, services, store, navigation, utils}/  (type-based)
→ Keep related code together; separate reusable from feature-specific code.
```

## 关注点分离（层）

```text
PRESENTATION → components/screens (UI, display, user interaction) — keep "dumb" where possible
LOGIC → hooks, state management, business logic (separate from UI)
DATA → API services / repositories (abstract data access); server state via React Query
→ Components display; hooks/state hold logic; services handle data → testable, maintainable.
```

## 关键架构决策

```text
✓ STATE MANAGEMENT → local (useState), Context, or a library (Redux Toolkit/Zustand) by
  complexity; React Query for SERVER state (separate from client state)
✓ CUSTOM HOOKS → extract reusable logic (useAuth, useFetch) — a key RN/React pattern
✓ COMPONENT structure → small, reusable, composable components; presentational vs container
✓ NAVIGATION structure (React Navigation); TYPED with TypeScript
✓ Abstract API/data access (services/repositories) — swappable, testable
```

## 原则

```text
✓ Separation of concerns; testability; reusability (components + hooks)
✓ Keep components focused; logic in hooks/services (not bloated components)
✓ Don't over-engineer small apps; scale architecture to complexity
```

## 为什么这很重要

理解如何架构 React Native 应用程序是重要的高级知识，因为**良好的架构对于构建可维护、可测试、可扩展的应用程序**至关重要，因为它们随着增长而变化，所以对于认真的 React Native 开发很有价值。

随着应用程序超越简单示例而增长，不良架构（逻辑堆积在组件中，没有分离）使它们难以维护、测试和扩展——使架构思维变得重要。

理解**项目组织**（对于较大的应用程序按功能组织，将相关代码保持在一起，将可重用代码与功能特定的代码分离）提供了可扩展的结构。

理解**关注点分离**（演示组件用于 UI、hooks/state 用于逻辑、services/repositories 用于数据——保持组件