低代码后端前端开发工具【免费下载链接】openblocks The Open Source Retool Alternative项目地址https://gitcode.com/gh_mirrors/op/openblocks点击查看免费下载临时状态Temporary State是 Openblocks 中用于在应用内存储和引用局部数据的轻量级机制它的值只存在于当前应用的一次加载会话中每次加载或刷新应用都会重置回初始值非常适合跟踪用户交互过程中的临时变量、存放仅运行期需要、无需落库的数据以及充当内置属性如{{table.selectedRow}}、{{select.value}}无法覆盖场景下的临时属性。读完本文你将掌握临时状态的创建、初始值配置、setValue()/setIn()两种赋值方法并能通过事件处理器与 JavaScript 查询两条路径实现一个完整的自增计数器。本文对应的官方文档为 docs/build-apps/write-javascript/temporary-state.md核心实现位于 temporaryStateComp.tsx。什么是临时状态会话级数据的存放区临时状态可以理解为应用内的一块便签纸——你可以随时写入、改写和读取它但它的生命周期只跟随当前应用页面每次加载或刷新应用临时状态的值都会被重置为你在编辑器中设定的初始值刷新前的运行期写入值不会持久化也不会跨页面、跨应用保留它保存的数据是任意合法的 JSON 值对象、数组、字符串、数字、布尔值等这与源码中初始值控件jsonValueStateControl(null)的定义一致见 temporaryStateComp.tsx。从底层实现看临时状态是作为底部资源BottomRes挂载在应用根组件上的TemporaryStateListComp通过bottomResListComp生成器注册到根组件tempStates字段见 rootComp.tsx编辑器在运行时按名称查找并暴露其value见 rootComp.tsx。这种只在运行时生效、仅持久化初始值的设计正是withTmpState机制中只保存 defaultValueonly save defaultValue的体现见 codeStateControl.tsx。典型使用场景官方文档给出的临时状态适用场景包括跟踪用户交互过程中的临时变量值例如统计按钮点击次数、记录当前步骤等仅在运行期存放数据而不写入数据库避免为一次性操作创建持久化存储充当临时属性当 Openblocks 内置属性如{{table.selectedRow}}、{{select.value}}无法满足你的用例时用临时状态承接中间数据。注意区分临时状态只在当前应用、当前会话内有效。若需要跨应用保存和访问数据应改用localStorage而不是临时状态。创建临时状态在查询编辑器Query Editor中点击 New选择Temporary state即可创建一个新的临时状态。创建后你可以重命名为临时状态取一个符合语义的名字默认命名前缀为state源码中bottomResListComp的namePrefix参数即state见 temporaryStateComp.tsx设置初始值在属性面板的 Init value 输入框中填写初始值。该值可以是任意合法 JSON 值编辑器提示语为 The initial Value stored in the temporary state can be any valid JSON Value.见 en.ts。初始值支持表达式绑定例如可以直接写{{ input1.value }}、一个对象字面量或数组在运行时作为临时状态的起点。设置状态值setValue 与 setIn临时状态暴露两个赋值方法setValue()与setIn()。它们可以在 JavaScript 查询中直接调用也可以在事件处理器中作为Set temporary state动作使用。从实现上看这两个方法通过withMethodExposing注册为组件的可执行方法见 temporaryStateComp.tsx。setValue(value)整体替换setValue()用于直接改变临时状态的整个值签名为state.setValue(value)其中value可以是任意 JSON 值// state.setValue(value: any) state.setValue(3) state.setValue(input1.value)底层实现非常简单——直接调用状态控件的change方法写入新值// 源码节选temporaryStateComp.tsx execute: async (comp, params) { comp.children.value.change(params?.[0]); },调用setValue后{{ state.value }}会立即反映新值并触发依赖它的组件与查询重新计算。setIn(path, value)按路径修改当临时状态的初始值是一个对象或数组时可以用setIn()修改指定路径上的值而无需整体替换。签名为state.setIn(path, value)其中path是由键名或索引组成的数组并且只有路径中的最后一项会被修改。官方文档示例初始值 state2// 初始值 state2 如下 { girl: { name: Lucy, age: 18, city: { name: New York } }, boy: { name: Bob, age: 21, city: { name: Los Angeles } } } // 修改指定路径的值 // state.setIn(path, any value) // path: 由键或索引组成的数组只有路径最后一项会被修改 state2.setIn([girl, city], { name: Seatle }) state2.setIn([boy, age], 18) // 修改数组值 // init value [hello, world] state2.setIn([1], foo) // 结果为 [hello, foo]setIn的源码实现揭示了几个重要约束见 temporaryStateComp.tsxpath 必须是数组且每个元素只能是字符串键名或数字数组索引否则抛出pathTypeErrorPath must be either a string or an array of values当前值必须是普通对象或数组否则抛出unStructuredErrorUnstructured data {prev} cant be updated by {path}——也就是说若当前值退化为字符串、数字等标量setIn无法工作底层使用_.set(_.cloneDeep(prev), path, value)实现先深拷贝原值再按路径写入新值最后整体写回因此原值不会被原地修改天然具备不可变性。在事件处理器中调用除了 JavaScript 查询你还可以在**事件处理器Event Handlers**中调用这两个方法为组件如按钮添加事件处理器选择动作Set temporary state选择目标临时状态和方法setValue或setIn按需传入参数。事件处理器的这个动作由SetTempStateAction实现它会列出当前应用中所有临时状态供选择然后以name.method()的形式动态调用其暴露方法见 setTempStateValueAction.tsx 与 executeCompAction.tsx。在属性面板中动作会显示为state1.setValue()这样的调用形式参数按方法的参数类型如JSONValue自动渲染输入框。实战示例自增计数器下面通过一个经典的自增计数器完整走一遍临时状态的使用流程。计数器用于跟踪按钮被点击的次数每次点击文本组件中的数字加一。方式一事件处理器 Set temporary state按以下步骤构建添加组件拖入一个按钮组件button1和一个文本组件text1创建临时状态新建临时状态state1将其初始值设为0绑定文本将text1的显示文本绑定为{{state1.value}}。添加事件处理器为button1添加事件处理器选择动作Set temporary state、方法setValue并把值设置为{{state1.value 1}}。点击验证运行应用每点击一次按钮text1中的数字就增加 1。方式二JavaScript 查询同样的效果也可以通过 JavaScript 查询实现新建查询添加一个新查询选择Run JavaScript code即js类型查询见 ResCreatePanel.tsx编写代码在查询中写入以下代码并将查询设为手动触发Manualstate1.setValue(state1.value 1)挂接事件处理器为button1添加事件处理器动作选择Run query并指向query1。完成后点击Increment counter按钮即可看到与方式一完全相同的结果。两种方式的差别在于方式一在事件处理器中直接调用状态方法无需额外创建查询方式二则适合需要在赋值前后叠加更多逻辑如计算、条件分支、调用其他查询的场景。进阶理解临时状态的重置与生命周期临时状态之所以临时根源在于withTmpState的求值机制见 codeStateControl.tsx临时状态在 DSL应用定义中只持久化初始值defaultValue运行时的value字段不写入持久化数据每次应用加载运行时值由求值器重新计算为初始值因此刷新即重置setValue/setIn的写入动作仅作用于当前运行会话的内存状态不会改变 DSL 中的初始值配置。这意味着你完全可以把临时状态当作应用运行期的工作变量无需担心污染应用定义或数据库。结合withMethodExposing的统一方法暴露机制见 withMethodExposing.tsx临时状态的方法调用与组件、查询的方法调用遵循同一套事件处理器体系学习成本极低。如果你还需要更复杂的派生计算可进一步阅读 Openblocks 的 transformers 与 data responder 相关文档它们与临时状态一起构成了应用内数据编排的完整工具链。赞分享低代码后端前端开发工具【免费下载链接】openblocks The Open Source Retool Alternative项目地址https://gitcode.com/gh_mirrors/op/openblocks点击查看免费下载相关推荐霞鹜臻楷AI加持的免费商用中文字体完整使用指南霞鹜臻楷AI加持的免费商用中文字体完整使用指南 霞鹜臻楷是一款基于「霞鹜文楷」衍生的开源中文字体前期通过手动加粗调整字形后期借助AI技术生成字形辅助补字。MST 易失状态Volatile State完全指南在 mobx-state-tree 中管理不可序列化的临时状态MST 易失状态Volatile State完全指南在 mobx state tree 中管理不可序列化的临时状态 易失状态volatile state状态管理前端Cherry Studio 怎么一次装对Windows、macOS、Linux 跨平台安装指南Cherry Studio 怎么一次装对Windows、macOS、Linux 跨平台安装指南 Cherry Studio 是一款跨平台的 AI 对话桌面客户AI 应用大模型桌面应用本地部署RAG创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考