核心架构
Reflex 的架构
了解驱动 Reflex 应用的核心组件
Reflex 采用简洁而强大的架构设计，让开发者能够专注于业务逻辑而非技术细节
状态管理
应用状态定义为 类变量，通过响应式更新驱动 UI 变化
UI 组件
丰富的 60+ 内置组件 库，如按钮、输入框和布局，可轻松定制
事件处理
响应 用户交互 的函数，如点击和输入，触发状态更新
路由系统
支持 多页面应用，在不同视图间组织导航
实践案例
示例应用程序
使用 Reflex 构建 DALL-E 图像生成器
状态定义
import reflex as rx
import openai
class State(rx.State):
prompt = “”
image_url = “”
processing = False
complete = False
def get_image(self):
if self.prompt == “”:
return rx.window_alert(“提示词为空”)
self.processing, self.complete = True, False
yield
response = openai.images.generate(
prompt=self.prompt, n=1, size=“1024×1024”
)
self.image_url = response.data[0].url
self.processing, self.complete = False, True
UI 组件
def index():
return rx.center(
rx.vstack(
rx.heading(“DALL-E”, font_size=“1.5em”),
rx.input(
placeholder=“输入提示词…”,
on_blur=State.set_prompt,
width=“25em”,
),
rx.button(
“生成图像”,
on_click=State.get_image,
width=“25em”,
loading=State.processing
),
rx.cond(
State.complete,
rx.image(src=State.image_url, width=“20em”),
),
align=“center”,
width=“100%”,
height=“100vh”,
)
)
应用预览
此示例展示了如何仅使用 Python 和 Reflex 创建 DALL-E 图像生成器。该应用包括：
文本输入
按钮交互
加载状态
图像显示
核心概念
此示例展示了几个重要的 Reflex 概念：
状态管理
响应式更新
API 集成
条件渲染
布局组件
事件处理
仅用 约 40 行 Python 代码，我们就创建了一个通常需要前端和后端开发技能的全功能 Web 应用程序。
