[發明專利]基于react項目的全局狀態數據管理方法及系統

在審

• 申請號: 202011167627.8
• 申請日: 2020-10-27
• 公開（公告）號: CN112241282A
• 公開（公告）日: 2021-01-19
• 發明（設計）人: 吳廣;鄭斌斌;程然;劉偉國;李智博;李亞峰;井輝輝;黃守毅;闕磊磊
• 申請（專利權）人: 上海萬向區塊鏈股份公司
• 主分類號: G06F8/65
• 分類號: G06F8/65
• 代理公司: 上海段和段律師事務所 31334
• 代理人: 李佳俊;郭國中

本發明提供了一種基于react項目的全局狀態數據管理方法及系統，包括：定義全局共享數據模塊以及每個全局共享數據模塊對應的屬性字段值；建立全局狀態管理模塊，通過全局狀態管理模塊導出源頭組件和連接器；將項目最外層組件嵌套進源頭組件，根據全局共享數據模塊以及每個全局共享數據對應的屬性字段值初始化源頭組件；并通過源頭組件向項目內部注入共享數據以及更新共享數據的函數；通過連接器包裝需要獲取全局狀態數據的組件，組件在經過連接器包裝處理后，獲取源頭組件注入的共享數據。本發明將更新狀態的邏輯下放給組件內部，不分離更新狀態值的邏輯，發明本身只專注數據的管理，從而也解決了各種異步狀態更新的問題。

技術領域

本發明涉及數據處理技術領域，具體地，涉及一種基于react項目的全局狀態數據管理方法及系統。

背景技術

React是一個用于構建用戶界面的JavaScript庫，使用React可方便地基于組件(可理解為獨立的界面塊，可嵌套)進行開發，組件的界面展示內容是通過組件內的渲染函數(render)對數據(該數據包括二部分，一是組件內部狀態數據稱之為state，可通過組件內部邏輯維護，二是外部傳遞進來的數據稱之為props，組件本身不可更改props)的使用得到的。組件的這種編寫方式，讓開發者從界面的控制邏輯中解放出來，通過數據驅動界面，數據更新界面隨之更新，從而讓開發者更專注于數據的正確處理，提高界面開發效率。

由于組件可以嵌套，項目的數據流從外層到內層步步傳遞，當數據傳遞超過3層時，數據傳遞和維護將變得難以維護。開發者引用的第三方解決方案，存在不易學習、難以使用的困境。

組件的包裹和嵌套，組件使用時是以標簽的形式書寫的，如componentA/componentA表示A組件，如componentAcomponentB/componentB/componentA，表示A組件包裹了B組件，也可以理解為B組件嵌套在A組件內部。

React createContext是React原生的api，createContext提供2個組件Provider和Consumer，Provider是容器組件，包裹需要共享數據的組件，在其包裹下的任意層級組件，都可以獲取Provider組件提供的共享數據，該共享數據是通過Provider的value屬性傳遞的進去的。被Provider包裹的子孫組件，想要獲取共享數據，必須通過Consumer包裹，內部執行一個回調函數，回調函數的參數即是共享數據。

key-value格式對象，是一種通過key映射到value的數據結構，如建立一份數據對象obj01，包含“姓名”、“電話”和“是否顯示”3條數據，可以寫為let obj01＝{″name″：″張三″，″phone″：″15012345678″，″isShow″：false}，通過key的名字即可訪問到內容，如obj01[″name″]可獲取姓名的內容，key-value格式對象是javascript中非常通常對象格式。

全局狀態管理開源解決方案redux，該技術提供一套嚴格的數據傳遞路徑，提出了各種不易理解的概念和模塊(store、action、reducer，預測化的狀態管理，數據不可修改、純函數)，每次更新都要將更新邏輯剝離出去，遇到異步問題更是要引用第三方中間件才能解決，API對開發者極度不友好。無法進行多組數據同時更新的操作。

全局狀態管理開源解決方案mobx，該技術使用觀察者模式來觀測數據的變化(常用見概念有Observable state、Computed values、Reactiohs、Actiohs)，簡單、透明、可伸縮，API使用起來比較簡單。但是此更新狀態時依然是將更新邏輯分離出去的，無法進行多組數據同時更新的操作。

原生api React hooks，該技術是新版React框架自身提供的API，需將項目組件寫成函數式的組件，不是完整的解決方案，需開發者自己組織通用的解決方案，且使用場景僅限函數式的組件。