事件觸發

之前我們寫到的on_click正是一種事件觸發，現在快速的看一下加上async版本。

import asyncio

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

    async def number_update(self) -> int:
        for i in range(10):
            await asyncio.sleep(0.5)
            self.count += 1
            yield

def index():
    return rx.center(
        rx.vstack(
            rx.heading(AsyncState.count),
            rx.button(
                '點我',
                on_click = AsyncState.number_update,
                style = {
                    "color_scheme" : 'twitter'
                }
            )
        )
    )

我們這邊使用了yield，在每次狀態更新的時候送往前端，這之中就包含事件的變更。
順帶一提，甚麼是yield？

yield通常是為了節省記憶體使用，如果一次遇到大量(如爬蟲)資料進入list內，會不會炸？(會不會我不知道，反正炸了剛好再買一台電腦)

答案是有可能...不過yield的設計目的就是為了單次輸出內容，yield並不是return，不會直接回傳，而是會繼續運行。

看上面的範例，打開頁面可以看見數字的變動。

子狀態

子狀態可以繼承其他子狀態。

class Father(rx.State):
    nums1: int = 0

class son1(Father):
    nums2: str = '1'

class son2(Father):
    color: str = 'green'

class son3(son1):
    text: str = '咕啦？'

def index():
    return rx.center(
        rx.text(
            son3.text,
            color = son2.color
        )
    )

反正就是一般的繼承，不用想太複雜。

存取父狀態屬性

我們可以從子屬性更改父屬性，可無法從父屬性更改子屬性。

# ...

class son3(son1):
    text: str = '咕啦？'

def index():
    # print(son3.nums1)
    son3.num1 = 3
    return rx.center(
        rx.text(
            son3.nums1,
            color = son2.color
        )
    )

出來結果一樣是0，由此可知無法更改。

State utility methods

• get_client_ip()：返回目前使用者的IP。
• get_current_page()：傳回目前頁面的URL。
• get_cookies()：傳回目前使用者的瀏覽器cookie。

# 官網範例
class State(rx.State):
    @rx.var
    def client_ip(self):
        return self.get_client_ip()

    @rx.var
    def current_page(self):
        return self.get_current_page()

    @rx.var
    def cookies(self):
        return str(self.get_cookies())


def index():
    return rx.vstack(
        rx.text(State.client_ip),
        rx.text(State.current_page),
        rx.text(State.cookies),
    )

app = rx.App()
app.add_page(index)

實際運行結果

state.py