Warum klappt if nicht? Kompilierzeit vs. Laufzeit

In Lektion 2 hast du rx.cond statt if verwendet, in Lektion 3 rx.foreach statt for. Es ist doch Python, warum also nicht einfach die normale Python-Syntax? Wenn du den Grund in dieser Lektion verstanden hast, wird dir auf einen Schlag klar, woher die meisten Fehler kommen, die dir in Reflex begegnen.

4-1. Zwei Zeitpunkte, zu denen Code läuft (3 Min.)

Der Code einer Reflex-App läuft zu zwei verschiedenen Zeitpunkten.

UI-Funktionen werden beim Start der App in JavaScript übersetzt und an den Browser geschickt. Beim Übersetzen weiß noch niemand, welcher Nutzer was anklicken wird. Deshalb ist LoginState.logged_in in einer UI-Funktion kein echtes True/False, sondern ein „Platzhalter, der später im Browser gefüllt wird“. Genau dieser Platzhalter ist eine Var.

Event-Handler dagegen werden nicht übersetzt, sondern laufen als ganz normales Python auf dem Server. Darum kannst du in einem Handler beliebigen Python-Code und beliebige Bibliotheken verwenden.

4-2. In Handlern ist es echtes Python (2 Min.)

Der Handler unten verwendet ein if und ruft sogar eine Funktion auf, die außerhalb des State definiert ist. Da er zur Laufzeit auf dem Server läuft, ist das kein Problem.

def check_even(num: int):
    return num % 2 == 0


class MyState3(rx.State):
    count: int = 0
    text: str = "even"

    @rx.event
    def increment(self):
        # Use any Python code within state.
        # Even reference functions defined outside the state.
        if check_even(self.count):
            self.text = "even"
        else:
            self.text = "odd"
        self.count += 1


def count_and_check():
    return rx.box(
        rx.heading(MyState3.text, as_="h2"),
        rx.button("Increment", on_click=MyState3.increment),
    )

Auch in UI-Funktionen kannst du Python verwenden, allerdings nur für Dinge, deren Wert schon zur Kompilierzeit feststeht (also ohne State-Vars). range(5) und check_even(i) unten sind bereits beim Start der App fertig berechnet.

def show_numbers():
    return rx.vstack(*[rx.text(f"{i} is {'even' if check_even(i) else 'odd'}") for i in range(5)])

4-3. Drei Dinge, die im UI-Code nicht gehen (2 Min.)

Da der Wert einer State-Var zur Kompilierzeit unbekannt ist, führt jeder der folgenden Codes in einer UI-Funktion zu einem Fehler.

Den Wert einer Var mit if prüfen: Ob er wahr oder falsch ist, steht noch nicht fest. Das gilt auch, wenn du damit einen Prop-Wert auswählst.

class BadState(rx.State):
    count: int = 0


def count_if_even():
    return rx.box(
        rx.heading("Count: ", as_="h2"),
        # This will raise a compile error, as BadState.count is a var and not known at compile time.
        rx.text(BadState.count if BadState.count % 2 == 0 else "Odd"),
        # Using an if statement with a var as a prop will NOT work either.
        rx.text("hello", color="red" if BadState.count % 2 == 0 else "blue"),
    )

Mit for über eine Listen-Var iterieren: Wie viele Einträge es gibt, steht noch nicht fest.

class BadState(rx.State):
    items: list[str] = ["Apple", "Banana", "Cherry"]


def loop_over_list():
    return rx.box(
        # This will raise a compile error, as BadState.items is a list and not known at compile time.
        *[rx.text(item) for item in BadState.items]
    )

Eine Var an Python-Funktionen wie len() übergeben: Es gibt noch gar keinen String, dessen Zeichen man zählen könnte.

class BadTextState(rx.State):
    text: str = "Hello world"


def format_text():
    return rx.box(
        # Python operations such as `len` will not work on state vars.
        rx.text(len(BadTextState.text)),
    )

4-4. Die Lösung: Var-Operationen (3 Min.)

Wie zeigst du in der Oberfläche also „Even bei gerader Zahl, Odd bei ungerader“ an? Reflex stellt dafür Var-Operationen bereit, die du auf Vars anwenden kannst. Verwendest du Operatoren wie %, == oder > mit einer Var, ist auch das Ergebnis eine Var. Die eigentliche Berechnung passiert erst im Browser, sobald der Wert da ist.

class CountEvenState(rx.State):
    count: int = 0

    @rx.event
    def increment(self):
        self.count += 1


def count_if_even():
    return rx.box(
        rx.heading("Count: ", CountEvenState.count, as_="h2"),
        rx.cond(
            # Here we use the `%` and `==` var operations to check if the count is even.
            CountEvenState.count % 2 == 0,
            rx.text("Even"),
            rx.text("Odd"),
        ),
        rx.button("Increment", on_click=CountEvenState.increment),
    )

Jetzt lässt sich in einer Tabelle zusammenfassen, warum du die Werkzeuge aus Lektion 1 bis 3 gebraucht hast.

Übungen

1. Korrigiere format_text aus 4-3 so, dass die Anzahl der Zeichen angezeigt wird. Tipp: BadTextState.text.length().
2. Lass count_if_even „Big!“ anzeigen, sobald count 10 oder mehr erreicht. Tipp: rx.cond(CountEvenState.count >= 10, ...).
3. Vergleiche den Ansatz, im Handler zu rechnen (wie bei MyState3), mit dem Ansatz über Var-Operationen (wie bei CountEvenState). Welcher braucht weniger State-Variablen?

Checkliste zu dieser Lektion

• Ich kann erklären, wann und wo UI-Funktionen und Event-Handler jeweils laufen.
• Ich kann erklären, warum ich im UI-Code kein if, for oder len() auf State-Vars anwenden kann.
• Ich weiß, wie ich dasselbe mit Var-Operationen, rx.cond und rx.foreach erreiche.