[发明专利]视图元件状态管理方法、装置、电子设备和存储介质

说明书

本实施例提供的视图元件状态管理方法、装置、电子设备和存储介质，该方法首先获取目标视图元件的目标状态行为，然后在状态管理库中，根据目标状态行为确定目标管理工具，再然后调用目标管理工具处理目标状态行为，以确定目标视图元件的新状态。本公开实施例的状态管理库将状态行为与处理状态行为的逻辑处理器结合在一起形成管理工具，在对状态行为进行处理时，直接将管理工具实例化，就能够完成状态更新，无需像现有技术通过多个中转模块进行状态行为传递，解决了现有技术中状态管理框架存在模板代码过多、类型支持薄弱，接口定义复杂的技术问题。达到了将状态管理框架简化，大量减少模板代码，适用TypeScript类型系统的技术效果。

技术领域

本公开实施例涉及计算机与网络通信技术领域，尤其涉及一种视图元件状态管理方法、装置、电子设备和存储介质。

背景技术

近年来，随着单页面应用的兴起，JavaScript需要管理比任何时候都要多的状态，或者可以说是数据，这些状态包括：服务器响应、缓存数据、本地生成尚未持久化到服务器的数据，也包括UI状态，如激活的路由，被选中的标签，是否显示加载动效或者分页器等等，这些都是十年前二十年前的web开发没有遇到的挑战。由于前端渲染页面的单页应用占比越来越高，这就代表前端工作的复杂度也在直线上升，前端页面上展示的信息越来越多也越来越复杂。这就使得对于状态的管理越发重要。

目前，大量的前端项目都在使用或转向使用Vue.js和React.js等框架来进行开发。其中，在前端状态管理的第三方框架中，使用较多的是Flux、Redux、Vuex、Mobx等，而以Redux应用最为广泛。Redux的使用有两种模式：第一种是单纯的使用纯redux库，其缺点很明显，需要在改变和监听数据的地方都引入状态库store，并手动与组件关联，因此产生了第二种方式；第二种是使用redux+react-redux方式，相比第一种方式其不用手动处理全局状态与react(回应)的关系了，代码也变的简洁了，但是这种方式中，需要用到两个模块action creator和reducer。action creator要写大量的重复代码，reducer及其频繁的使用switch case语句；而且Redux框架过多的使用字符串类型进行传参，使得这种方式难以适应Typescript类型的系统，较难实现代码的严格约束，导致容易写出错误的代码；再者Redux拆分了很多模块，导致一个数据的修改需要连带修改与之关联的众多模块，给状态管理开发工作带来了极大不便。

即现有技术中状态管理框架存在模板代码过多，类型支持薄弱，接口定义复杂的技术问题。

发明内容

本公开实施例提供一种视图元件状态管理方法、装置、电子设备和存储介质，以克服现有技术中状态管理框架存在模板代码过多，类型支持薄弱，接口定义复杂的技术问题。

第一方面，本公开实施例提供一种视图元件状态管理方法，包括：

获取目标视图元件的目标状态行为，目标状态行为用于确定状态的变化类型，状态为目标视图元件的逻辑状态；

在状态管理库中，根据目标状态行为确定一个目标管理工具，状态管理库中包括多个管理工具，管理工具包括逻辑处理器，逻辑处理器用于处理管理工具中视图元件的状态与状态行为之间的逻辑关系；

调用目标管理工具处理目标状态行为，以确定目标视图元件的新状态。

第二方面，本公开实施例提供一种视图元件状态管理装置，包括：

获取模块，用于获取目标视图元件的目标状态行为，目标状态行为用于确定状态的变化类型，状态为目标视图元件的逻辑状态；

状态管理库模块，用于根据目标状态行为确定一个目标管理工具，状态管理库模块中包括多个管理工具，管理工具包括逻辑处理器，逻辑处理器用于处理管理工具中视图元件的状态与状态行为之间的逻辑关系；

处理模块，用于调用目标管理工具处理目标状态行为，以确定目标视图元件的新状态。