一种数据处理方法、装置及计算机可读存储介质制造方法及图纸

技术编号:33470390 阅读:15 留言:0更新日期:2022-05-19 00:48
本申请实施例涉及数据分析技术领域,提供一种数据处理方法、装置及计算机可读存储介质,包括:获取当前项目的根目录中的配置文件,其中,所述配置文件包括地址信息;根据所述配置文件中的地址信息确定所述当前项目中的至少一个待处理的class组件;根据第一规则将所述至少一个待处理的class组件中的每一个待处理的class组件分别转换为hook组件。本申请实施例,可以提高前端react框架的组件转换效率。可以提高前端react框架的组件转换效率。可以提高前端react框架的组件转换效率。

【技术实现步骤摘要】
一种数据处理方法、装置及计算机可读存储介质


[0001]本申请实施例涉及数据分析
,尤其涉及一种数据处理方法、装置及计算机可读存储介质。

技术介绍

[0002]前端react框架早期的组件化实现,可以通过定义class组件实现。但是随着应用场景不断丰富和组件逻辑的复杂化,class组件有几个问题显得比较突出,如大型组件对于重构、拆分和测试会变得很困难;业务逻辑分布在组件的不同方法之中,使得逻辑代码重复以及关联逻辑梳理困难等。为了处理这些问题,前端react框架早期采用了引入渲染属性(render props)和高阶组件,但是反而让编程模式变得更加复杂。
[0003]在16.8.0版本,react推出了hooks组件的写法,不仅在语法上更加规范整洁,整体的设计思路也更容易让用户接受。从开发用户的角度来说,class组件和hook组件是可以并存的,但是从整体规划上,且从项目组件整理维护的角度出发,统一采用hook会是一个非常合适的选择。但是,对于大多数的早期开发的react项目,处于class组件与hook组件长期混用的状态,且hook组件的语法相对于class组件会有不小的区别,因此,在class组件与hook组件转换过程中,用户需要长期维护两种语法结构和逻辑思路的代码,需要花费很长的时间才能转换成符合框架设计者思想的组件代码。因此,如何提高前端react框架的组件转换效率是亟待解决的问题。

技术实现思路

[0004]本申请实施例提供了一种数据处理方法、装置及计算机可读存储介质,可以提高前端react框架的组件转换效率。
[0005]第一方面,本申请实施例提供了一种数据处理方法,可以包括:获取当前项目的根目录中的配置文件,其中,所述配置文件包括地址信息;根据所述配置文件中的地址信息确定所述当前项目中的至少一个待处理的class组件;根据第一规则将所述至少一个待处理的class组件中的每一个待处理的class组件分别转换为hook组件。
[0006]在本申请提供的方案中,终端设备可以根据第一规则将当前项目中的class组件转换为hook组件。不同于现有技术,由于hook组件的语法相对于class组件会有不小的区别,需要开发人员花费一定的时间并加以实践,才可以得到真正符合框架设计者思想的hook组件代码。从class组件转换到hook组件在人为的转换过程中,由于部分语法实现具备一定的难度,会造成组件的转换效率较低。本申请实施例,通过第一规则将当前项目中的class组件一一转换为hook组件,由于转换按照一定的规则进行设定与执行,减少人为原因导致的异常问题的发生,从而可以提高前端react框架的组件转换效率。
[0007]在一种可能的实现方式中,在根据第一规则将所述至少一个待处理的class组件中的每一个待处理的class组件分别转换为hook组件之前,所述方法还包括:根据预设规则修改第一待处理的class组件的名字,所述第一待处理的class组件为所述至少一个待处理
的class组件中的任一待处理的class组件;新增所述第一待处理的class组件对应的第一hook组件,所述第一hook组件的名字与所述第一待处理的class组件的名字相同。
[0008]在本申请提供的方案中,将当前项目的class组件一一转换为hook组件之前,可以先创建每个class组件对应的新的hook组件,从而可以实现后续步骤的根据第一规则将当前项目中的class组件一一转换为hook组件,由于转换按照一定的规则进行设定与执行,减少人为原因导致的异常问题的发生,从而可以提高前端react框架的组件转换效率。
[0009]在一种可能的实现方式中,所述根据第一规则将所述至少一个待处理的class组件中的每一个待处理的class组件分别转换为hook组件,包括:查找所述第一待处理的class组件内的构造函数;调用函数useState修改所述构造函数的变量;将修改变量后的构造函数保存至所述第一hook组件中。
[0010]在本申请提供的方案中,一个class组件中包含一个或多个函数,对于不同的函数,转换规则不一样。例如,对于class组件中的构造函数(constructor)来说,可以调整组件中的定义和修改变量的方法,如原本在class组件内,通过this.state方法定义变量,通过this.setState方法修改变量,而转换hook组件时,可以通过useState方法定义变量,通过useState方法返回的函数修改变量。对不同的函数使用不同的规则进行class组件转换hook组件,可以提高转换的准确性。
[0011]在一种可能的实现方式中,所述根据第一规则将所述至少一个待处理的class组件中的每一个待处理的class组件分别转换为hook组件,包括:查找所述第一待处理的class组件内的与构造函数同一层级的渲染函数;确定所述渲染函数中的关键字return和所述关键字return的JSX语法结构的代码;对所述JSX语法结构的代码,查找是否存在通过语法this.获取变量的代码,若存在,去除所述通过语法this.获取变量的代码中的字符this.;或者对所述JSX语法结构的代码,查找是否存在通过函数this.setState修改变量的代码,若存在,调用函数useState修改所述JSX语法结构的代码中的变量;将所述关键字return和所述关键字return的修改后的JSX语法结构的代码保存至所述第一hook组件中。
[0012]在本申请提供的方案中,一个class组件中包含一个或多个函数,对于不同的函数,转换规则不一样。例如,对于class组件中的渲染函数(render),render函数定义了组件在页面上展示的元素的形式。如果在class组件中,存在render函数,通过查找render函数内return关键字,连同其后面跟的所有JSX语法结构的代码,保存到hook组件的return内容中,就可以作为hook组件的在页面上展示的元素定义。对JSX语法结构的代码,可以通过useState方法定义变量,通过useState方法返回的函数修改变量,从而实现组件转换。对不同的函数使用不同的规则进行class组件转换hook组件,可以提高转换的准确性。
[0013]在一种可能的实现方式中,所述根据第一规则将所述至少一个待处理的class组件中的每一个待处理的class组件分别转换为hook组件,包括:查找所述第一待处理的class组件内的与构造函数同一层级的生命周期函数;根据useEffect函数和箭头函数修改所述生命周期函数的变量;将修改变量后的生命周期函数保存至所述第一hook组件中。
[0014]在本申请提供的方案中,一个class组件中包含一个或多个函数,对于不同的函数,转换规则不一样。例如,对于class组件中的生命周期函数,生命周期函数可以在组件挂载到dom时、在组件在页面上完成更新时或者在组件在页面上即将卸载的时,可以触发执行。对于不同的生命周期函数,组件转换的方法不本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种数据处理方法,其特征在于,包括:获取当前项目的根目录中的配置文件,其中,所述配置文件包括地址信息;根据所述配置文件中的地址信息确定所述当前项目中的至少一个待处理的class组件;根据第一规则将所述至少一个待处理的class组件中的每一个待处理的class组件分别转换为hook组件。2.根据权利要求1所述的方法,其特征在于,在根据第一规则将所述至少一个待处理的class组件中的每一个待处理的class组件分别转换为hook组件之前,所述方法还包括:根据预设规则修改第一待处理的class组件的名字,所述第一待处理的class组件为所述至少一个待处理的class组件中的任一待处理的class组件;新增所述第一待处理的class组件对应的第一hook组件,所述第一hook组件的名字所述第一待处理的class组件的名字相同。3.根据权利要求2所述的方法,其特征在于,所述根据第一规则将所述至少一个待处理的class组件中的每一个待处理的class组件分别转换为hook组件,包括:查找所述第一待处理的class组件内的构造函数;调用函数useState修改所述构造函数的变量;将修改变量后的构造函数保存至所述第一hook组件中。4.根据权利要求2所述的方法,其特征在于,所述根据第一规则将所述至少一个待处理的class组件中的每一个待处理的class组件分别转换为hook组件,包括:查找所述第一待处理的class组件内的与构造函数同一层级的渲染函数;确定所述渲染函数中的关键字return和所述关键字return的JSX语法结构的代码;对所述JSX语法结构的代码,查找是否存在通过语法this.获取变量的代码,若存在,去除所述通过语法this.获取变量的代码中的字符this.;或者对所述JSX语法结构的代码,查找是否存在通过函数this.setState修改变量的代码,若存在,调用函数useState修改所述JSX语法结构的代码中的变量;将所述关键字return和所述关键...

【专利技术属性】
技术研发人员:黄康
申请(专利权)人:平安普惠企业管理有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1