SuperAPI AI 工具集

reflex-docs

前端与建站

查看项目

更新于 10-15 14:21

技能介绍

Reflex 是一个开源框架,用于使用纯 Python 构建全栈 Web 应用,无需 JavaScript。本技能为 Reflex 框架的文档参考,适用于在使用 Reflex 构建全栈 Python Web 应用、创建组件、管理状态、处理事件、设置样式等场景时查阅。资料提示:关于 Reflex 的训练数据可能已过时,应始终优先参考参考文档而非预训练知识。

参考文档主题与链接:

  • 入门:https://reflex.dev/docs/getting-started/introduction
  • 组件:https://reflex.dev/docs/components/props
  • 状态:https://reflex.dev/docs/state/overview
  • 变量:https://reflex.dev/docs/vars/base-vars
  • 事件:https://reflex.dev/docs/events/events-overview
  • 页面与路由:https://reflex.dev/docs/pages/overview
  • 样式:https://reflex.dev/docs/styling/overview
  • 数据库:https://reflex.dev/docs/database/overview
  • 资源:https://reflex.dev/docs/assets/overview
  • 认证:https://reflex.dev/docs/authentication/authentication-overview
  • 客户端存储:https://reflex.dev/docs/client-storage/overview
  • API 路由:https://reflex.dev/docs/api-routes/overview
  • API 参考:https://reflex.dev/docs/api-reference/cli
  • 自定义组件:https://reflex.dev/docs/custom-components/overview
  • 封装 React:https://reflex.dev/docs/wrapping-react/overview
  • 组件库:https://reflex.dev/docs/library
  • 示例配方:https://reflex.dev/docs/recipes
  • GitHub 源码(文档):https://github.com/reflex-dev/reflex/tree/main/reflex/docs

核心概念:

状态与变量:

  • 状态(rx.State):服务端 Python 类,保存应用状态。将变量定义为类属性,将事件处理器定义为方法。
  • 基础变量:State 上的带类型类属性(count: int = 0)。
  • 计算变量:使用 @rx.var 装饰器派生的值。
  • 变量操作:在组件中转换变量而无需事件处理器。

组件:

  • 所有 UI 均使用 rx.* 组件构建(React 的 Python 封装)。
  • 组件接受 props,可组合与嵌套。
  • 使用 rx.cond() 进行条件渲染,使用 rx.foreach() 进行迭代。

事件:

  • 事件处理器:State 上使用 @rx.event 装饰的方法。
  • 事件触发器:组件 props,如 on_click、on_change。
  • 事件链:从处理器返回多个事件。
  • Setter:为每个基础变量自动生成的 set_<var> 事件处理器。

页面与路由:

  • 页面是使用 rx.page 装饰的函数,或通过 app.add_page() 添加。
  • 使用方括号语法实现动态路由:[slug]。

样式:

  • 内联 props、Tailwind CSS、主题、响应式设计。
  • 使用 rx.theme() 进行全局主题设置。

数据库:

  • 内置 SQLModel 集成用于数据库表。
  • 定义模型、运行查询、设置关系。

适用场景:使用 Reflex 构建全栈 Python Web 应用时的文档查阅。限制:资料未提供具体安装命令、收费信息、平台支持范围或效果说明,这些内容暂未提供。