React Native 指南 · 4/6

Data and State

本章目前僅提供英文版。

State in React Native works exactly as in React. This chapter covers state with hooks, fetching server data with fetch, storing data on the device, and the state libraries teams commonly use.

State with hooks

Keep component state in useState or useReducer, and move values shared across screens into Context or a state library. TextInput is usually a controlled component, wired to state through value and onChangeText.

import { useState } from "react";
import { Button, Text, TextInput, View } from "react-native";

export function Greeting() {
  const [name, setName] = useState("");
  const [count, setCount] = useState(0);
  return (
    <View style={{ padding: 16, gap: 8 }}>
      <TextInput value={name} onChangeText={setName} placeholder="Name" />
      <Text>Hello, {name || "guest"} ({count})</Text>
      <Button title="+1" onPress={() => setCount((c) => c + 1)} />
    </View>
  );
}

Fetching data with fetch

React Native provides the same fetch API as the web. Cancel requests with AbortController in case the screen goes away before the response arrives.

import { useEffect, useState } from "react";
import { ActivityIndicator, FlatList, Text } from "react-native";

type Post = { id: number; title: string };
const API_URL = process.env.EXPO_PUBLIC_API_URL;

export function Posts() {
  const [posts, setPosts] = useState<Post[]>([]);
  const [error, setError] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const controller = new AbortController();
    fetch(`${API_URL}/posts`, { signal: controller.signal })
      .then((res) => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json() as Promise<Post[]>;
      })
      .then(setPosts)
      .catch((e) => { if (e.name !== "AbortError") setError(String(e)); })
      .finally(() => setLoading(false));
    return () => controller.abort();
  }, []);

  if (loading) return <ActivityIndicator />;
  if (error) return <Text>Error: {error}</Text>;
  return <FlatList data={posts} keyExtractor={(p) => String(p.id)} renderItem={({ item }) => <Text>{item.title}</Text>} />;
}

A few things to keep in mind:

In Expo, only environment variables prefixed with EXPO_PUBLIC_ are inlined into app code. Anyone can unpack an app bundle, so never put secrets there.
From the Android emulator, reach a dev server on your computer at 10.0.2.2 instead of localhost.
Both platforms restrict plain HTTP by default, so serve production APIs over HTTPS.

Server-state libraries

Instead of hand-rolling loading, error, caching and retry logic, a library such as TanStack Query keeps the code short.

對本章有疑問嗎？

Use	Library
simple key-value data (settings, cache)	`@react-native-async-storage/async-storage`
sensitive values such as tokens	`expo-secure-store`, `react-native-keychain`
large structured data	`expo-sqlite`
fast synchronous key-value	`react-native-mmkv`

Data and State

State with hooks

Fetching data with fetch

Server-state libraries

Storing data on the device

Global state libraries

Summary

0 則留言