一种基于React项目的数据管理方法、控制装置及存储介质制造方法及图纸

本发明专利技术涉及数据处理技术领域，具体提供一种基于React项目的数据管理方法、控制装置及存储介质，旨在解决React项目开发中非父子组件间数据传递需要编写大量的样板代码问题。为此，本发明专利技术的基于React项目的数据管理方法包括：初始化React项目；React项目中安装需要用到的软件包；若React项目中存在异步函数，则修改React项目中的项目配置文件；在React项目根目录中创建src/models文件夹；在src/models文件夹中创建文件；将初始化React项目中的src/App.jsx文件进行修改，将数据存储对象store提供给React项目，创建一个数据管理模块的环境，所有要使用数据管理模块的业务组件都在此创建的数据管理模块的环境下；创建src/Home.jsx文件；在项目根目录下，执行启动项目命令：yarn start，以启动React项目。以启动React项目。以启动React项目。

【技术实现步骤摘要】
一种基于React项目的数据管理方法、控制装置及存储介质


[0001]本专利技术涉及数据处理
，具体提供一种基于React项目的数据管理方法、控制装置及存储介质。

技术介绍

[0002]React是一个用于构建用户界面的JavaScript库，使用React可方便地基于组件(可理解为独立的界面块，可嵌套)进行开发，组件的界面展示内容是通过组件内的渲染函数(render)对数据(该数据包括二部分，一是组件内部状态数据称之为state，可通过组件内部逻辑维护，二是外部传递进来的数据称之为props，组件本身不可更改props)的使用得到的。组件的这种编写方式，让开发者从界面的控制逻辑中解放出来，通过数据驱动界面，数据更新界面随之更新，从而让开发者更专注于数据的正确处理，提高界面开发效率。通过Redux，我们可以实现跨组件间的数据共享。
[0003]前端组件化开发(例如使用react框架做项目开发)中,非父子组件间数据传递比较麻烦,一般会基于第三方的数据管理工具,比如Redux等。Redux是一个优秀的应用状态容器，提供可预测的状态管理，拥有可预测、集中管理、可调试、灵活等特性。编写时需要提供Action、ActionType、Reducer、异步中间件等。但是原生的Redux需要编写Action、ActionType、Reducer等，异步处理需要额外的配置、编码等工作，我们实际工作中绝大部分跨组件数据传递场景比较简单，但是还是需要编写大量的样板代码。
[0004]相应地，本领域需要一种新的基于React项目的数据管理方案来解决上述问题。

技术实现思路

[0005]本专利技术旨在解决上述技术问题，即，解决当前跨组件数据传递场景比较简单时，react框架做项目开发中非父子组件间数据传递需要编写大量的样板代码的问题，本专利技术提供了一种基于React项目的数据管理方法、控制装置及存储介质。
[0006]在第一方面，本专利技术提供一种基于React项目的数据管理方法，该方法包括：
[0007]初始化一个React项目；
[0008]在所述React项目中安装需要用到的软件包；
[0009]若React项目中存在异步函数，则修改所述React项目中的项目配置文件，以识别异步函数；
[0010]在所述React项目根目录中创建src/models文件夹，src/models文件夹用于编写数据管理的代码；
[0011]在所述src/models文件夹中创建文件；
[0012]将初始化React项目中的src/App.jsx文件进行修改，将数据存储对象store提供给React项目，创建一个数据管理模块的环境，所有要使用数据管理模块的业务组件都在此创建的数据管理模块的环境下；
[0013]创建src/Home.jsx文件；
[0014]在项目根目录下，执行启动项目命令：yarn start，以启动React项目。
[0015]在上述基于React项目的数据管理方法的一个技术方案中，所述初始化一个React项目包括：
[0016]安装事件驱动的JavaScript运行时的版本node.js 14；
[0017]安装软件包管理器yarn；
[0018]使用脚手架工具create
‑
react
‑
app初始化所述React项目；
[0019]进入初始化的项目目录中，执行命令yarn eject暴露出项目配置。
[0020]在上述基于React项目的数据管理方法的一个技术方案中，在所述React项目中安装需要用到的软件包包括：
[0021]在项目根目录中，执行命令yarn add@ra
‑
lib/model@ra
‑
lib/model
‑
async
‑
function
‑
loader react
‑
redux redux redux
‑
thunk redux
‑
undo，用来安装@ra
‑
lib/model、@ra
‑
lib/model
‑
async
‑
function
‑
loader、react
‑
redux、redux、redux
‑
thunk和redux
‑
undo软件包；
[0022]其中，@ra
‑
lib/model软件包和@ra
‑
lib/model
‑
async
‑
function
‑
loader软件包是redux二次封装所需的；react
‑
redux软件包、redux软件包、redux
‑
thunk软件包和redux
‑
undo软件包是原生redux所需的。
[0023]在上述基于React项目的数据管理方法的一个技术方案中，若React项目中存在异步函数，则修改所述React项目中的项目配置文件，以识别异步函数包括：
[0024]在React.js库中的config/webpack.config.js中添加一个loader配置，其中，所述loader配置使用了所述@ra
‑
lib/model
‑
async
‑
function
‑
loader软件包。
[0025]在上述基于React项目的数据管理方法的一个技术方案中，在所述src/models文件夹中创建文件包括：
[0026]创建index.js文件，具体为：
[0027]在React.js库中的index.js文件中引入所有的用户自定义数据管理对象models；
[0028]从所述@ra
‑
lib/model软件包中引入创建函数createStoreByModels；
[0029]调用所述创建函数createStoreByModels，传入所有的用户自定义数据管理对象models；
[0030]创建store、connect和action；
[0031]对外导出数据管理的store和connect以model链接使用的高阶组件；
[0032]action model中定义的所有操作数据的方法；
[0033]创建用户自定义数据管理对象models中的一个对象的demo.js文件，具体为：
[0034]定义初始化数据的一个变量state，所述state用来存储数据；
[0035]编写操作数据的函数。
[0036]在上述基于React项目的数据管理方法的一个技术方案中，在所述src/models本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于React项目的数据管理方法，其特征在于，包括：初始化一个React项目；在所述React项目中安装需要用到的软件包；若React项目中存在异步函数，则修改所述React项目中的项目配置文件，以识别异步函数；在所述React项目根目录中创建src/models文件夹，src/models文件夹用于编写数据管理的代码；在所述src/models文件夹中创建文件；将初始化React项目中的src/App.jsx文件进行修改，将数据存储对象store提供给React项目，创建一个数据管理模块的环境，所有要使用数据管理模块的业务组件都在此创建的数据管理模块的环境下；创建src/Home.jsx文件；在项目根目录下，执行启动项目命令：yarn start，以启动React项目。2.根据权利要求1所述的基于React项目的数据管理方法，其特征在于，所述初始化一个React项目包括：安装事件驱动的JavaScript运行时的版本node.js 14；安装软件包管理器yarn；使用脚手架工具create
‑
react
‑
app初始化所述React项目；进入初始化的项目目录中，执行命令yarn eject暴露出项目配置。3.根据权利要求1所述的基于React项目的数据管理方法，其特征在于，在所述React项目中安装需要用到的软件包包括：在项目根目录中，执行命令yarn add@ra
‑
lib/model@ra
‑
lib/model
‑
async
‑
function
‑
loader react
‑
redux redux redux
‑
thunk redux
‑
undo，用来安装@ra
‑
lib/model、@ra
‑
lib/model
‑
async
‑
function
‑
loader、react
‑
redux、redux、redux
‑
thunk和redux
‑
undo软件包；其中，@ra
‑
lib/model软件包和@ra
‑
lib/model
‑
async
‑
function
‑
loader软件包是redux二次封装所需的；react
‑
redux软件包、redux软件包、redux
‑
thunk软件包和redux
‑
undo软件包是原生redux所需的。4.根据权利要求3所述的基于React项目的数据管理方法，其特征在于，若React项目中存在异步函数，则修改所述React项目中的项目配置文件，以识别异步函数包括：在React.js库中的config/webpack.config.js中添加一个loader配置，其中，所述load...

【专利技术属性】
技术研发人员：王淑彬，戈子根，罗馨钰，李晋晋，陈浩，张天一，孔德龙，
申请(专利权)人：北京结慧科技有限公司，
类型：发明
国别省市：