韩

Posted on Jun 6

Reflex的5个隐藏用法 🔥

Reflex 是一个让你用纯 Python 构建全栈 Web应用的框架——不需要 JavaScript，不需要前后端分离。GitHub 上拥有 28,457颗星，2026 年 6 月仍在活跃开发中，它是 Python Web框架中最被低估的黑马。但问题是——大多数开发者只用它来搭建简单的仪表盘，根本不知道它真正的能力。

2026 年，Web 框架和 AI Agent 框架之间的界限正在快速模糊。Reflex 恰好站在这个交叉点上，而且几乎没有人谈论它。

隐藏用法 #1：AI Builder——用一句话生成完整全栈应用

大多数人的用法： 他们手动构建 Reflex 应用——逐行编写状态类、定义组件、连接事件处理器。

隐藏技巧： Reflex 的 AI Builder（build.reflex.dev）可以从自然语言描述生成完整的 Reflex 应用。描述"一个带用户登录和 SQLite 后端的任务管理器"，它就会搭建整个项目——状态、路由、表单、数据库模型——然后用 uv run reflex run 直接运行。

# AI Builder 为你生成的内容：
# 文件: task_manager.py
import reflex as rx

class State(rx.State):
    tasks: list[dict]
    new_task: str = ""

    def add_task(self):
        if self.new_task.strip():
            self.tasks.append({"text": self.new_task, "done": False})
            self.new_task = ""

    def toggle_task(self, index: int):
        self.tasks[index]["done"] = not self.tasks[index]["done"]

def index() -> rx.Component:
    return rx.vstack(
        rx.heading("任务管理器"),
        rx.input(placeholder="新任务...", on_blur=State.set_new_task),
        rx.button("添加", on_click=State.add_task),
        rx.foreach(State.tasks, lambda task, i: rx.checkbox(
            task["text"], checked=task["done"], on_change=lambda: State.toggle_task(i)
        )),
        padding="2rem",
    )

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

效果： 一个功能完整的人物管理器，带状态管理、用户输入和交互式复选框——几秒钟生成，直接在浏览器中运行。

数据来源： Reflex GitHub 28,457 Stars，AI Builder（build.reflex.dev）2026-06-06 确认可访问。

隐藏用法 #2：Agent Toolkit——把 Reflex变成 AI Agent 控制面板

大多数人的用法： 他们只用 Reflex 构建面向人类的 Web 应用，把它当作 Flask/FastAPI 的替代品。

隐藏技巧： Reflex 的 Agent Toolkit 让你将 MCP（Model Context Protocol）服务器连接到前端，直接暴露 AI 工具。你可以构建一个 Web UI 来控制 AI Agent——Agent 的推理过程实时渲染在浏览器中。

# 将 MCP 服务器连接到 Reflex 应用
import reflex as rx
from reflex_agent import ReflexAgent

# 初始化带 MCP 工具的 Agent
agent = ReflexAgent(
    mcp_servers=[
        "https://registry.modelcontextprotocol.io/servers/github.json",
        "https://registry.modelcontextprotocol.io/servers/filesystem.json",
    ]
)

class AgentState(rx.State):
    messages: list[dict]
    reasoning: str = ""

    async def send_message(self, user_input: str):
        self.messages.append({"role": "user", "content": user_input})
        # Agent实时思考
        async for event in agent.stream(user_input):
            if event.type == "reasoning":
                self.reasoning = event.content
            elif event.type == "tool_call":
                # 在浏览器中实时渲染工具调用
                self.messages.append({"role": "assistant", "content": f"正在调用 {event.tool}..."})
            elif event.type == "response":
                self.messages.append({"role": "assistant", "content": event.content})

def agent_ui() -> rx.Component:
    return rx.vstack(
        rx.heading("AI Agent 控制面板"),
        rx.foreach(State.messages, lambda m: rx.box(m["content"], bg="gray.100")),
        rx.text(State.reasoning, color="gray.500", font_size="sm"),
        rx.input(placeholder="向 Agent 提问...", on_blur=State.send_message),
    )

效果： 一个实时的 AI Agent 仪表盘，用户可以在其中与 MCP 驱动的 Agent 交互、观察它逐步推理、调用工具——全部用纯 Python 实现。

数据来源： Reflex GitHub 28,457 Stars，Agent Toolkit 文档（reflex.dev/docs/ai/integrations/ai-onboarding/）确认可访问。

隐藏用法 #3：无 React Hooks 的响应式状态

大多数人的用法： 他们用和 React 相同的方式管理 Reflex状态——使用 useState 等价物，手动调用 setState。

隐藏技巧： Reflex 的 rx.var 模式让你创建真正响应式的变量，当依赖项变化时自动更新 UI——无需显式 setState。结合 rx.State 计算属性，你可以在零样板文件的情况下获得细粒度响应式。

class CalculatorState(rx.State):
    a: float = 0
    b: float = 0

    # 计算属性——当 a 或 b 变化时自动重新计算
    @rx.var
    def sum(self) -> float:
        return self.a + self.b

    @rx.var
    def product(self) -> float:
        return self.a * self.b

    @rx.var
    def is_large(self) -> bool:
        return self.sum > 100  #响应 sum 的变化

def calculator() -> rx.Component:
    return rx.vstack(
        rx.number_input(
            value=CalculatorState.a,
            on_change=lambda v: CalculatorState.set_a(float(v)),
            placeholder="第一个数字"
        ),
        rx.number_input(
            value=CalculatorState.b,
            on_change=lambda v: CalculatorState.set_b(float(v)),
            placeholder="第二个数字"
        ),
        rx.hstack(
            rx.text(f"和：{CalculatorState.sum}"),
            rx.text(f"积：{CalculatorState.product}"),
            rx.text("大！" if CalculatorState.is_large else "小", color="blue"),
        ),
    )

效果： 一个计算器，当任一输入变化时，sum、product 和 is_large 都会自动更新——无需手动刷新，无 useEffect 等价物。

数据来源： Reflex GitHub 28,457 Stars，Var 模式文档（reflex.dev/docs/state/var/）。

隐藏用法 #4：用 rx.Component 嵌入任意 React 组件

大多数人的用法： 他们坚持使用 Reflex 内置的组件库，只用 Python编写自定义组件。

隐藏技巧： rx.Component 装饰器和 dangerouslySetInnerHTML 模式让你直接在 Reflex Python 代码中嵌入任意 React 组件——npm 包、自定义小部件、甚至整个第三方 React 应用。

import reflex as rx

# 嵌入来自 npm 的 React 组件
@rx.component
def chart_component(props: dict) -> rx.Component:
    return rx.box(
        rx.script("""
            // 从 React 初始化 Chart.js 图表
            const ctx = document.getElementById('myChart');
            new Chart(ctx, {
                type: 'bar',
                data: { labels: %s, datasets: [{ label: '收入', data: %s }] },
                options: { responsive: true }
            });
        """ % (props['labels'], props['data'])
        ),
        rx.canvas(id="myChart"),
        width="100%",
        height="300px",
    )

class ChartState(rx.State):
    labels: list[str] = ["1月", "2月", "3月", "4月"]
    data: list[int] = [100, 200, 150, 300]

def dashboard() -> rx.Component:
    return rx.vstack(
        rx.heading("收入仪表盘"),
        chart_component({"labels": ChartState.labels, "data": ChartState.data}),
    )

效果： 一个集成了 Chart.js 可视化的仪表盘，通过原始 JavaScript 嵌入——仅使用 Python，无需 npm 配置，无需独立的 React 构建步骤。

数据来源： Reflex GitHub 28,457 Stars，自定义组件文档（reflex.dev/docs/components/overview/）。

隐藏用法 #5：零样板文件的实时 WebSocket 更新

大多数人的用法： 他们把 Reflex 当作传统的请求-响应框架——用户提交表单，服务器处理，服务器返回新页面。

隐藏技巧： Reflex 的 rx.session 上下文为每个客户端提供持久的 WebSocket 连接。你可以用一个装饰器将实时更新从服务器推送到所有连接的客户端——无需 WebSocket 样板文件，无需 Socket.IO 配置。

import reflex as rx
import asyncio

class LiveDashboardState(rx.State):
    metrics: dict = {"cpu": 0, "memory": 0, "requests": 0}

    @rx.background
    async def poll_metrics(self):
        """每秒向所有连接的客户端推送指标。"""
        while True:
            # 模拟指标收集
            self.metrics["cpu"] = (self.metrics["cpu"] + 1) % 100
            self.metrics["memory"] = (self.metrics["memory"] + 2) % 100
            self.metrics["requests"] += 1
            # 这会自动推送到所有浏览器会话
            yield LiveDashboardState.set_metrics(self.metrics)
            await asyncio.sleep(1)

def live_dashboard() -> rx.Component:
    return rx.vstack(
        rx.heading("实时服务器指标"),
        rx.progress(value=LiveDashboardState.metrics["cpu"], width="100%"),
        rx.text(f"CPU：{LiveDashboardState.metrics['cpu']}%"),
        rx.progress(value=LiveDashboardState.metrics["memory"], width="100%"),
        rx.text(f"内存：{LiveDashboardState.metrics['memory']}%"),
        rx.text(f"总请求数：{LiveDashboardState.metrics['requests']}"),
        on_mount=LiveDashboardState.poll_metrics,  # 页面加载时开始轮询
    )

效果： 一个每秒自动更新的实时仪表盘——CPU、内存、请求计数——通过 Reflex 内置的 WebSocket 层从服务器推送到浏览器。

数据来源： Reflex GitHub 28,457 Stars，后台任务文档（reflex.dev/docs/background-tasks/）。

总结

AI Builder——用自然语言提示生成完整全栈应用
Agent Toolkit——通过 MCP 将 Reflex 变成 AI Agent 控制面板
Var 响应式状态——无需 React Hooks 的细粒度响应式
自定义 React 组件——通过 rx.Component 嵌入任意 npm 包
实时 WebSocket 更新——用 @rx.background 向所有客户端推送服务器数据

你发现 Reflex 的隐藏用法了吗？在评论区分享出来——我很想听听你用它构建了什么。

本系列之前的文章：

smolagents 的 5 个隐藏用法——代码优先的 AI Agent
TradingAgents 的 5 个隐藏用法——多 Agent 股票交易
gptme 的 5 个隐藏用法——终端 AI编程助手

DEV Community