你如何在 React Native 应用中管理状态？

Question

Accepted Answer

React Native 中的状态管理（如同 React 中一样）从本地组件状态 (useState) 到通过 **Context** 或库（如 **Redux**、**Zustand** 等）进行的共享/全局状态。理解这些选项以及何时使用每一个很重要，因为应用会不断增长。

## 本地状态和状态提升

```text
useState → local component state (simple, for one component)
LIFTING STATE UP → move shared state to a common parent, pass down via props
  → works for moderate sharing, but "PROP DRILLING" (passing through many layers) is painful
```

## Context API — 内置共享状态

```jsx
// Context shares state across the tree WITHOUT prop drilling (built into React)
const ThemeContext = createContext();
// provide it high in the tree; consume with useContext anywhere below
const theme = useContext(ThemeContext);
// → good for low-frequency global data (theme, auth, user); can cause re-renders if overused
```

## 状态管理库

```text
For complex/global state, libraries help:
  REDUX (+ Redux Toolkit) → predictable centralized store; structured; popular for large
    apps; more boilerplate (RTK reduces it)
  ZUSTAND → minimal, simple, hooks-based store — popular modern lightweight choice
  Jotai / Recoil → atomic state; MobX → observable state
  React Query / TanStack Query → for SERVER state (caching, fetching) — often used
    alongside (handles API data, loading, caching)
```

## 选择

```text
Simple/local → useState; moderate sharing → lift up / Context
Complex global app state → Redux Toolkit or Zustand (by preference/complexity)
Server/API data → React Query (caching, sync) — distinct from client state
→ Don't over-engineer; match the solution to the app's complexity.
```

## 为什么这很重要

理解状态管理很重要，因为 **应用如何管理和共享状态是一个重要的架构问题**，随着应用复杂性的增加而增加，因此对于构建真实的 React Native 应用来说是宝贵的知识。

React Native 中的状态管理工作原理与 React 相同，从简单到复杂。

理解 **本地状态** (useState) 和 **状态提升** (将共享状态移到共同的父级) 涵盖了基本需求，而认识到 **prop-drilling 问题** (通过多个层级传递状态变得繁琐) 会激发寻找更好的解决方案。

**Context API**（React 的内置方式，可以在不进行 prop drilling 的情况下在树中共享状态）适合低频率的全局数据（主题、身份验证、当前用户），尽管如果过度使用可能会导致重新渲染。

理解 **复杂/全局状态的状态管理库** — **Redux**（配合 Redux Toolkit，一个可预测的集中存储，结构化且对大型应用很受欢迎）、**Zustand**（最小化、简单、基于 hooks、一个流行的现代轻量级选择）和其他库（Jotai、MobX）— 为管理重要的应用状态提供了选项。

重要的是，理解 **React Query/TanStack Query 用于服务器状态**（缓存和同步 API 数据，不同于客户端状态）反映了现代认识 **服务器状态和客户端状态是不同的关注点**（带有缓存/获取的 API 数据通常最好单独处理）— 这是一个宝贵的、越来越重要的区别。

理解如何 **选择**（本地使用 useState、适度共享使用 Context、复杂全局状态使用 Redux Toolkit 或 Zustand、服务器数据使用 React Query，不过度设计）反映了合理的判断，使解决方案与复杂性相匹配。

由于状态管理是一个影响可维护性且随应用复杂性扩展的重要架构问题，并且理解这个范围（本地状态、Context、库和服务器与客户端状态的区别）并适当选择对于构建真实应用很重要，所以理解 React Native 中的状态管理是宝贵的、实际相关的知识 — 构建可维护、可扩展的 React Native 应用的关键架构领域，选项和客户端/服务器状态的区别对于合理的状态架构很重要。