一种React组件的使用优化方法及存储介质技术

本发明专利技术涉及一种React组件的使用优化方法及存储介质，所述方法包括以下步骤：业务组件启动后，遍历所有子组件，所述业务组件为正常拆分编写的React组件，所述子组件通过JSX代码编写包裹在业务组件内部；判断子组件是否为配置组件，所述配置组件为表示其对应的业务组件的配置信息；若是，则提取出子组件中的配置信息，并解析配置信息，根据配置信息创建新的组件，将新的组件替换当前的子组件，并进行显示；遍历所有子组件后，渲染处理过的业务组件。允许在JSX环境中初始化组件时，统一使用JSX格式向组件传递配置，从而解决采用JSON格式进行配置参数的传递存在的问题。

A React Component Optimizing Method and Storage Medium

【技术实现步骤摘要】
一种React组件的使用优化方法及存储介质
本专利技术涉及React框架
，特别涉及一种React组件的使用优化方法及存储介质。
技术介绍
FaceBook提供的基于组件化设计思想的React框架，是目前最流行的前端开发框架之一。React将前端功能拆分成各种组件，然后通过拼装这些组件，实现业务的快速开发。每个组件都各自的配置，默认使用JSON格式进行传递。然而，在复杂的业务环境中，单个组件的配置参数往往非常复杂，如果我们在代码中将JSON格式的配置参数直接传递给组件，就会存在以下缺点：1、导致代码看上去非常不规整，而且十分冗长；2、外由于React组件基于JSX语言编写，大规模的JSON穿插在JSX中间，导致代码变得不容易阅读；3、JSON格式的配置，不利于利用React组件提供的Props特性，实现参数的默认值，特别是复杂类型的参数；4、难以扩展业务组件内部的动态显示功能，例如一个报表业务组件，现在希望在报表的每行中间添加一些内容，这种需求的配置就会非常复杂，实现起来成本也很高。
技术实现思路
为此，需要提供一种React组件的使用优化方法及存储介质，解决现有React组件中每个组件间通过JSON格式进行配置参数传递存在的问题。为实现上述目的，专利技术人提供了一种React组件的使用优化方法，包括以下步骤：业务组件启动后，遍历所有子组件，所述业务组件为正常拆分编写的React组件，所述子组件通过JSX代码编写包裹在业务组件内部；判断子组件是否为配置组件，所述配置组件为表示其对应的业务组件的配置信息；若是，则提取出子组件中的配置信息，并解析配置信息，根据配置信息创建新的组件，将新的组件替换当前的子组件，并进行显示；遍历所有子组件后，渲染处理过的业务组件。进一步优化，所述“判断子组件是否为配置组件，所述配置组件为表示其对应的业务组件的配置信息”之后还包括以下步骤：若不是配置组件，则将子组件直接显示出来。进一步优化，所述业务组件包括登录组件、注册组件及搜索组件。进一步优化，所述配置组件具有唯一的类型，对应业务组件的单个业务。专利技术人还提供了另一个技术方案：一种存储介质，所述存储介质包含有计算机程序，其特征在于，所述计算机程序被处理器运行时执行以下步骤：业务组件启动后，遍历所有子组件，所述业务组件为正常拆分编写的React组件，所述子组件通过JSX代码编写包裹在业务组件内部；判断子组件是否为配置组件，所述配置组件为表示其对应的业务组件的配置信息；若是，则提取出子组件中的配置信息，并解析配置信息，根据配置信息创建新的组件，将新的组件替换当前的子组件，并进行显示；遍历所有子组件后，渲染处理过的业务组件。进一步优化，所述计算机程序被处理器运行时执行步骤“判断子组件是否为配置组件，所述配置组件为表示其对应的业务组件的配置信息”之后还执行以下步骤：若不是配置组件，则将子组件直接显示出来。进一步优化，所述业务组件包括登录组件、注册组件及搜索组件。进一步优化，所述配置组件具有唯一的类型，对应业务组件的单个业务。区别于现有技术，上述技术方案，子组件通过JSX代码编写包裹在业务组件内部，当业务组件启动时，遍历所有的子组件，判断子组件是否为配置组件，当子组件为配置组件时，解析其配置信息，根据配置信息进行做出相应的处理，然后渲染处理过的业务组件，允许在JSX环境中初始化组件时，统一使用JSX格式向组件传递配置，从而解决采用JSON格式进行配置参数的传递存在的问题。附图说明图1为具体实施方式所述React组件的使用优化方法的一种流程示意图；图2为具体实施方式所述存储介质的一种结构示意图。附图标记说明：200、存储介质。具体实施方式为详细说明技术方案的
技术实现思路
、构造特征、所实现目的及效果，以下结合具体实施例并配合附图详予说明。名词解释：HTML：超文本标记语言，一种浏览器能够识别的代码。JSON：JS原生支持的，一种轻量的数据格式。React：由FaceBook提供的高性能前端开发框架。JSX：一种类似HTML风格的编程语言，这项技术，让JavaScript代码变得更加简洁。UI：UserInterface，用户界面的简称。请参阅图1，本实施例所述React组件的使用优化方法，包括以下步骤：步骤S110：业务组件启动后，遍历所有子组件，所述业务组件为正常拆分编写的React组件，所述子组件通过JSX代码编写包裹在业务组件内部；根据业务特性，先定义一系列(一个或多个)配置组件，每个配置组件都有一个唯一的类型，单个配置组件只负责单个具体的业务。开发者通过基于JSX语法，将配置组件和自定义UI组件作为子组件包裹在业务组件内部，并且将配置参数作为属性传递给配置组件。业务组件通常对应在浏览器上显示的某个功能模块，例如登录组件、注册组件及搜索组件等。步骤S120：判断子组件是否为配置组件，所述配置组件为表示其对应的业务组件的配置信息；若是，则执行步骤S131：提取出子组件中的配置信息，并解析配置信息，根据配置信息创建新的组件，将新的组件替换当前的子组件，并进行显示；步骤S140：遍历所有的子组件后，渲染处理过的业务组件。通过利用JSX中树状数据结构的特征，在父节点渲染前，遍历其子节点，然后创建出新的子节点。子组件通过JSX代码编写包裹在业务组件内部，当业务组件启动时，遍历所有的子组件，判断子组件是否为配置组件，当子组件为配置组件时，解析其配置信息，根据配置信息进行做出相应的处理，当遍历所有子组件后，根据子组件中的配置组件进行对业务组件进行处理后，渲染处理过的业务组件，允许在JSX环境中初始化组件时，统一使用JSX格式向组件传递配置，而基于JSX风格的代码，能够实现自定义组件的任意穿插，这是JSON无法具备的功能，从而解决采用JSON格式进行配置参数的传递存在的问题。在本实施例中，子组件可能是原生的组件或者可能是业务组件，所述“判断子组件是否为配置组件，所述配置组件为表示其对应的业务组件的配置信息”之后还包括以下步骤S132：若不是配置组件，则将子组件直接显示出来。当遍历子组件时，发现子组件不是配置组件时，则之间将子组件显示出来，无需进行解析处理。例如，当需要提供一个业务组件为报表搜索组件(SearchComponent)时，能够根据配置动态生成需要搜索的字段及能够根据配置动态生成相关的按钮。通过基于JSX代码，进行设计两个配置组件：ConfigField和ConfigButton，其中ConfigField负责配置搜索字段，ConfigButton负责配置相关的按钮；其具体实现步骤如下：业务组件(SearchComponent)启动后，遍历所有子组件；当发现子组件时搜索字段类型的配置组件(ConfigField)时，那么提取出该子组件的配置信息，并且根据配置信息创建新的搜索UI；当发现子组件时搜索按钮类型的配置组件(ConfigButton)时，那么提取出该子组件的配置信息，并且根据配置信息创建新的按钮UI；发现子组件不属于配置组件时，则原样显示该子组件；然后渲染解析后的业务组件。请参阅图2，在另一个实施例中，一种存储介质，所述存储介质包含有计算机程序，其特征在于，所述计算机程序被处理器运行时执行以下步骤：业务组件启动后，遍历所有子组件本文档来自技高网...

【技术保护点】
1.一种React组件的使用优化方法，其特征在于，包括以下步骤：业务组件启动后，遍历所有子组件，所述业务组件为正常拆分编写的React组件，所述子组件通过JSX代码编写包裹在业务组件内部；判断子组件是否为配置组件，所述配置组件为表示其对应的业务组件的配置信息；若是，则提取出子组件中的配置信息，并解析配置信息，根据配置信息创建新的组件，将新的组件替换当前的子组件，并进行显示；遍历所有子组件后，渲染处理过的业务组件。

【技术特征摘要】
1.一种React组件的使用优化方法，其特征在于，包括以下步骤：业务组件启动后，遍历所有子组件，所述业务组件为正常拆分编写的React组件，所述子组件通过JSX代码编写包裹在业务组件内部；判断子组件是否为配置组件，所述配置组件为表示其对应的业务组件的配置信息；若是，则提取出子组件中的配置信息，并解析配置信息，根据配置信息创建新的组件，将新的组件替换当前的子组件，并进行显示；遍历所有子组件后，渲染处理过的业务组件。2.根据权利要求1所述React组件的使用优化方法，其特征在于，所述“判断子组件是否为配置组件，所述配置组件为表示其对应的业务组件的配置信息”之后还包括以下步骤：若不是配置组件，则将子组件直接显示出来。3.根据权利要求1所述React组件的使用优化方法，其特征在于，所述业务组件包括登录组件、注册组件及搜索组件。4.根据权利要求1所述React组件的使用优化方法，其特征在于，所述配置组件具有唯一的类型，对应业务组件的单个业务。5....

【专利技术属性】
技术研发人员：廖兴旺，赖诗长，
申请(专利权)人：福建睿思特科技股份有限公司，
类型：发明
国别省市：福建,35