文章目录一、最小范式核心三要素Schema描述 UIRenderer解释执行Data Action驱动行为二、最小可运行 Demo核心结构页面 SchemaRenderer极简版状态 表达式系统Action 执行器三、这个“最小范式”本质是什么UI 是 AST抽象语法树行为是 DSL领域语言数据是响应式上下文四、为什么这是“最小范式”五、工程上常见扩展从 MVP → 企业级表达式系统升级版Action Pipeline组件协议关键数据源抽象插槽 / 作用域总结可以把“低代码 Schema 驱动前端”的最小范式理解为用一份 JSON或类似结构描述 UI 行为 数据然后用一个运行时解释执行。下面介绍一个工程上可落地的最小闭环模型MVP 级。一、最小范式核心三要素一个低代码页面最少只需要 3 个东西Schema描述 UI描述“长什么样”typeSchema{type:string;// 组件类型props?:Recordstring,any;children?:Schema[];};本质组件树 JSON 化。Renderer解释执行把 schema 渲染成 React/Vue 组件functionrender(schema:Schema):ReactNode{constCompcomponentMap[schema.type];return(Comp{...schema.props}{schema.children?.map(render)}/Comp);}本质JSON → UI 的解释器Data Action驱动行为让页面“活起来”typeAction|{type:request;api:string}|{type:setState;key:string;value:any}|{type:navigate;to:string};本质声明式行为系统替代写 JS二、最小可运行 Demo核心结构页面 Schema{type:Page,children:[{type:Button,props:{text:加载数据,onClick:{type:request,api:/api/list}}},{type:Table,props:{data:{{list}}}}]}Renderer极简版constcomponentMap{Page:({children})div{children}/div,Button:({text,onClick})(button onClick{()runAction(onClick)}{text}/button),Table:({data})pre{JSON.stringify(data)}/pre};状态 表达式系统conststore{list:[]};functionresolve(value){if(typeofvaluestringvalue.startsWith({{)){constkeyvalue.slice(2,-2);returnstore[key];}returnvalue;}Action 执行器asyncfunctionrunAction(action){switch(action.type){caserequest:constresawaitfetch(action.api).then(rr.json());store.listres;rerender();break;}}三、这个“最小范式”本质是什么一句话总结Schema UI AST 行为 DSL 数据绑定拆开看UI 是 AST抽象语法树Schema ≈ React Element Tree你是在“描述 UI”不是写 UI行为是 DSL领域语言{type:request,api:/api/list}替代onClick{()fetch()}数据是响应式上下文{{list}} → store.list类似Vue templateReact state selector四、为什么这是“最小范式”能力是否必须组件描述✅渲染器✅状态存储✅行为系统✅五、工程上常见扩展从 MVP → 企业级在这个最小模型上逐步长出来表达式系统升级版{visible:{{user.role admin}}}引入表达式解析器如 new Function / safe-evalAction Pipeline{type:sequence,actions:[{type:request,api:/api/a},{type:setState,key:a}]}组件协议关键typeLowCodeComponent{propsSchema:JSONSchema;events:string[];};解决设计器配置表单驱动数据源抽象{type:dataSource,fetch:/api/list,autoLoad:true}插槽 / 作用域{type:Table,children:[{type:Column,props:{render:{{row.name}}}}]}总结低代码 用 JSON 描述组件树 用解释器渲染 用 DSL 驱动行为 用表达式绑定数据