State

Erster Versuch

Eine normale Variable reicht nicht: Antippen ändert den Wert, aber die Anzeige bleibt gleich.

export function WeatherScreen({ city, weather }: WeatherScreenProps) {
  let isCelsius = true; // funktioniert nicht!

  return (
    <Pressable onPress={() => (isCelsius = !isCelsius)}>
      <Text>{isCelsius ? '°C' : '°F'}</Text>
    </Pressable>
  );
}

Hook useState

useState gibt den aktuellen Wert und eine Funktion zum Ändern zurück. React merkt sich den Wert über das erneute Aufrufen hinweg.

const [isCelsius, setIsCelsius] = useState(true);

<Pressable onPress={() => setIsCelsius(!isCelsius)}>
  <Text>{isCelsius ? '°C' : '°F'}</Text>
</Pressable>

Neu rendern

Merksatz wie bei Compose und Flutter: UI = f(State). Ändert sich der State, ruft React die Komponente neu auf.

Lifting State Up

Den State dort halten, wo alle ihn brauchen, und ihn nach unten weitergeben. Änderungen kommen als Callbacks zurück nach oben.

Lifting State Up

const [isCelsius, setIsCelsius] = useState(true);

<UnitToggle
  isCelsius={isCelsius} // State ↓
  onToggle={() => setIsCelsius(!isCelsius)} // Event ↑
/>
<CurrentWeatherCard city={city} weather={weather} isCelsius={isCelsius} />

Übung: Zähler

In Expo Snack einen Zähler bauen:

• eine große Zahl, darunter Buttons „+1“, „+10“ und „Zurücksetzen“
• Bonus: Button „−1“, der nicht unter 0 zählt
• Bonus: die Buttons in eine eigene Komponente CounterButtons auslagern

Zusammenfassung