[发明专利]基于react项目的全局状态数据管理方法及系统

说明书

本发明提供了一种基于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，需将项目组件写成函数式的组件，不是完整的解决方案，需开发者自己组织通用的解决方案，且使用场景仅限函数式的组件。