[發明專利]視圖元件狀態管理方法、裝置、電子設備和存儲介質

在審

• 申請號: 202110013533.3
• 申請日: 2021-01-06
• 公開（公告）號: CN112698824A
• 公開（公告）日: 2021-04-23
• 發明（設計）人: 陳勇;高鑫
• 申請（專利權）人: 北京有竹居網絡技術有限公司
• 主分類號: G06F8/34
• 分類號: G06F8/34
• 代理公司: 上海光柵知識產權代理有限公司 31340
• 代理人: 關浩;馬雯雯

本實施例提供的視圖元件狀態管理方法、裝置、電子設備和存儲介質，該方法首先獲取目標視圖元件的目標狀態行為，然后在狀態管理庫中，根據目標狀態行為確定目標管理工具，再然后調用目標管理工具處理目標狀態行為，以確定目標視圖元件的新狀態。本公開實施例的狀態管理庫將狀態行為與處理狀態行為的邏輯處理器結合在一起形成管理工具，在對狀態行為進行處理時，直接將管理工具實例化，就能夠完成狀態更新，無需像現有技術通過多個中轉模塊進行狀態行為傳遞，解決了現有技術中狀態管理框架存在模板代碼過多、類型支持薄弱，接口定義復雜的技術問題。達到了將狀態管理框架簡化，大量減少模板代碼，適用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拆分了很多模塊，導致一個數據的修改需要連帶修改與之關聯的眾多模塊，給狀態管理開發工作帶來了極大不便。

即現有技術中狀態管理框架存在模板代碼過多，類型支持薄弱，接口定義復雜的技術問題。

發明內容

本公開實施例提供一種視圖元件狀態管理方法、裝置、電子設備和存儲介質，以克服現有技術中狀態管理框架存在模板代碼過多，類型支持薄弱，接口定義復雜的技術問題。

第一方面，本公開實施例提供一種視圖元件狀態管理方法，包括：

獲取目標視圖元件的目標狀態行為，目標狀態行為用于確定狀態的變化類型，狀態為目標視圖元件的邏輯狀態；

在狀態管理庫中，根據目標狀態行為確定一個目標管理工具，狀態管理庫中包括多個管理工具，管理工具包括邏輯處理器，邏輯處理器用于處理管理工具中視圖元件的狀態與狀態行為之間的邏輯關系；

調用目標管理工具處理目標狀態行為，以確定目標視圖元件的新狀態。

第二方面，本公開實施例提供一種視圖元件狀態管理裝置，包括：

獲取模塊，用于獲取目標視圖元件的目標狀態行為，目標狀態行為用于確定狀態的變化類型，狀態為目標視圖元件的邏輯狀態；

狀態管理庫模塊，用于根據目標狀態行為確定一個目標管理工具，狀態管理庫模塊中包括多個管理工具，管理工具包括邏輯處理器，邏輯處理器用于處理管理工具中視圖元件的狀態與狀態行為之間的邏輯關系；

處理模塊，用于調用目標管理工具處理目標狀態行為，以確定目標視圖元件的新狀態。