CN115268980A - react组件优化判断方法、装置、设备及存储介质 - Google Patents

Abstract

本发明涉及研发管理领域，揭露了一种react组件优化判断方法，包括：获取react项目的配置文件，遍历配置文件得到每个组件及对应的组件代码；逐个选取一个组件为目标组件，判断目标组件的代码中是否包含预设语法；若不包含，目标组件为不需要优化的组件；若包含，根据目标组件代码中的渲染函数确定重新渲染场景；为不必要重新渲染时，目标组件不需要优化；为父组件传值给子组件时，根据父组件的值判断是否对目标组件进行优化；为变量控制时，根据变量值判断是否对目标组件进行优化。此外，本发明还涉及区块链技术，配置文件可存储于区块链的节点。本发明还提出一种react组件优化判断装置、电子设备以及存储介质。本发明可以提高组件优化的精确度。

Description

react组件优化判断方法、装置、设备及存储介质

技术领域

本发明涉及研发管理领域，尤其涉及一种react组件优化判断方法、装置、设备及存储介质。

背景技术

目前前端react框架中，关于页面的性能优化机制是当父组件有任意更新的时候，其子组件也会重新更新一遍，对于拥有复杂的嵌套组件的父组件来说，当顶层的父组件有更新时，就会导致所有子组件以及子组件的子组件都会触发更新，并触发重新渲染，在这种情况下，用户的点击、滑动等事件会出现明显的卡顿。

现有的针对react框架的重新渲染工具是通过SCU(ShouldComponentUp date，React生命周期)方法，让开发者自己设定当父组件更新的时候，哪些子组件可以不更新。但是这个方式需要开发者自己进行组件的梳理，判断哪些子组件可以选择不更新，同时由于开发者对于react框架及SCU的理解程度不同，会出现可重新渲染场景的遗漏以及当业务逻辑代码有更新的时候，有可能以前不需要更新页面渲染的子组件需要更新，但是开发者往往会忘记清除以前设定不更新的代码，导致组件更新的准确性低下。

发明内容

本发明提供一种react组件优化判断方法、装置、设备及存储介质，其主要目的在于解决进行组件更新时的精确度较低的问题。

为实现上述目的，本发明提供的一种react组件优化判断方法，包括：

获取前端react框架项目的配置文件，根据所述配置文件遍历所述react 框架项目中的组件文件，得到所述前端react框架项目中每个组件及对应的组件代码；

逐个选取其中一个组件为目标组件，判断所述目标组件的组件代码中是否包含预设语法；

在所述目标组件的组件代码中不包含所述预设语法时，设置所述目标组件为不需要进行SCU优化的组件；

在所述目标组件的组件代码中包含所述预设语法时，根据所述目标组件的组件代码中的渲染函数确定每个所述目标组件的重新渲染场景；

在所述重新渲染场景为不必要进行重新渲染时，设置所述目标组件为不需要进行SCU优化的子组件；

在所述重新渲染场景为父组件传值给子组件场景时，根据所述父组件传递的变量值确定是否对所述目标组件进行SCU优化；

在所述重新渲染场景为变量控制组件更新渲染时，根据所述变量值确定所述目标组件是否需要进行SCU优化。

可选地，所述根据所述配置文件遍历所述react框架项目中的组件文件，包括；

根据所述配置文件确定所述react框架项目的根目录文件；

查找所述根目录下的组件文件，得到所述react框架项目的所有组件文件。

可选地，所述判断所述目标组件的组件代码中是否包含预设语法，包括：

根据所述预设的语法确定所述语法关键字；

利用所述语法关键字在所述目标组件代码中检索；

在检索到所述所述语法关键字时，则确定所述目标组件的组件代码中包含预设语法；

在没有检索到所述语法关键字时，则确定所述目标组件的组件代码中不包含预设语法。

可选地，所述根据所述目标组件的组件代码中的渲染函数确定每个所述目标组件的重新渲染场景，包括：

获取所述目标组件的组件代码中的渲染函数的输出数据；

查找所述输出数据中是否包含其它组件；

在所述输出数据中包含其它组件时，查找所述输出数据中是否包含预设预设标签；

在所述输出数据中不包含其它组件时，确定所述目标组件的渲染场景为变量控制组件更新渲染；

在不包含所述预设标签时，确定所述目标组件的重新渲染场景为不必要进行重新渲染；

在包含所述预设标签时，判断所述预设标签的来源；

在所述预设标签的来源为所述目标组件时，确定所述目标组件的重新渲染场景为变量控制组件更新渲染；

在所述预设预设标签的来源为其它组件时，确定所述目标组件的重新渲染场景为父组件传值给子组件。

可选地，所述设置所述目标组件为不需要进行SCU优化的子组件，包括；

查找所述目标组件代码中渲染函数的的调用链路，根据所述调用链路确定所述渲染函数的代码层级；

在所述相同的代码层级中添加预设的SCU优化方法。

可选地，所述根据所述父组件传递的变量值确定是否对所述目标组件进行SCU优化，包括：

获取所述目标组件代码中的传值对象中的初始变量值；

在所述目标组件的父组件进行SCU优化后，获取所述传递对象的当前变量值；

判断所述初始变量值与所述当前变量值是否一致；

在所述初始变量值与所述当前变量值一致时，所述目标组件不需要进行 SCU优化；

在所述初始变量值与所述当前变量值不一致时，所述目标组件需要进行 SCU优化。

可选地，所述根据所述变量值确定所述目标组件是否需要进行SCU优化，包括：

获取所述目标组件代码中的状态对象输出的当前变量值；

在所述当前变量值发生变化时，确定所述目标组件需要进行SCU优化；

在所述当前变量值不发生变化时，确定所述目标组件不需要进行SCU优化。

为了解决上述问题，本发明还提供一种react组件优化判断装置，所述装置包括：

遍历配置文件模块，用于获取前端react框架项目的配置文件，根据所述配置文件遍历所述react框架项目中的组件文件，得到所述前端react框架项目中每个组件及对应的组件代码；

预设语法判断模块，用于逐个选取其中一个组件为目标组件，判断所述目标组件的组件代码中是否包含预设语法；

设置目标组件第一优化模块，用于在所述目标组件的组件代码中不包含所述预设语法时，设置所述目标组件为不需要进行SCU优化的组件；

重新渲染场景确定模块，用于在所述目标组件的组件代码中包含所述预设语法时，根据所述目标组件的组件代码中的渲染函数确定每个所述目标组件的重新渲染场景；

设置目标组件第二优化模块，用于所述重新渲染场景为不必要进行重新渲染时，设置所述目标组件为不需要进行SCU优化的子组件；

设置目标组件第三优化模块，用于在所述重新渲染场景为父组件传值给子组件场景时，根据所述父组件传递的变量值确定是否对所述目标组件进行 SCU优化；

设置目标组件第四优化模块，用于在所述重新渲染场景为变量控制组件更新渲染时，根据所述变量值确定所述目标组件是否需要进行SCU优化。

为了解决上述问题，本发明还提供一种电子设备，所述电子设备包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的计算机程序，所述计算机程序被所述至少一个处理器执行，以使所述至少一个处理器能够执行上述所述的react组件优化判断方法。

为了解决上述问题，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质中存储有至少一个计算机程序，所述至少一个计算机程序被电子设备中的处理器执行以实现上述所述的react组件优化判断方法。

本发明实施例通过获取前端react项目中的每个组件及对应的组件代码，保证组件优化判断的全面性；再逐个选取一个作为目标组件，判断目标组件的代码中是否包含预设语法；若不包含，则所述目标组件为不需要进行SCU 优化的子组件，即父组件更新时目标组件不需要更新，提高了组件优化的准确度；若包含，根据目标组件代码中的中的渲染函数确定目标组件的重新渲染场景，根据重新渲染场景的不同，判断所述目标组件是否需要进行SCU优化及目标组件作为子组件时是否需要进行SCU优化，已实现组件SCU优化更高的的准确度，避免不必要的SCU优化。因此本发明提出的react组件优化判断方法、装置、电子设备及计算机可读存储介质，可以解决进行组件SCU 优化时的精确度较低的问题。

附图说明

图1为本发明一实施例提供的react组件优化判断方法的流程示意图；

图2为本发明一实施例提供的查找预设语法的流程示意图；

图3为本发明一实施例提供的父组件变量值判断优化的流程示意图；

图4为本发明一实施例提供的react组件优化判断装置的功能模块图；

图5为本发明一实施例提供的实现所述react组件优化判断方法的电子设备的结构示意图。

图6是本发明一实施例提供的react组件优化判断装置的功能模块图。

图7是本发明一实施例提供的实现react组件优化判断方法的电子设备的结构示意图。

本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

具体实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

本申请实施例提供一种react组件优化判断方法。所述react组件优化判断方法的执行主体包括但不限于服务端、终端等能够被配置为执行本申请实施例提供的该方法的电子设备中的至少一种。换言之，所述react组件优化判断方法可以由安装在终端设备或服务端设备的软件或硬件来执行，所述软件可以是区块链平台。所述服务端包括但不限于：单台服务器、服务器集群、云端服务器或云端服务器集群等。所述服务器可以是独立的服务器，也可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(ContentDelivery Network，CDN)、以及大数据和人工智能平台等基础云计算服务的云服务器。

参照图1所示，为本发明一实施例提供的react组件优化判断方法的流程示意图。在本实施例中，所述react组件优化判断方法包括以下步骤S1-S7：

S1、获取前端react框架项目的配置文件，根据所述配置文件遍历所述 react框架项目中的组件文件，得到所述前端react框架项目中每个组件及对应的组件代码；

本发明实施例中，所述配置文件为config.js，所述配置文件为所述react 框架项目开发者根据项目的需求自行配置的文本文件，所述配置文件中包括成功执行所述react框架项目的所需信息，如组件文件，组件代码、react框架项目的根目录文件地址信息等。

本发明其中一可选实施例中，可利用具有抓取功能的计算机语句(Java 语句、Python语句)从预先构建的用于存储配置文件的存储空间中抓取所述配置文件，其中，所述存储空间包括但不限于数据库、区块链节点等。

详细地，所述根据所述配置文件遍历所述react框架项目中的组件文件，包括；

根据所述配置文件确定所述react框架项目的根目录文件；

查找所述根目录下的组件文件，得到所述react框架项目的所有组件文件。

本发明实施例中，根据所述配置文件得到所述react框架项目中的所有组件文件，每个组价文件对应一个组件，并通过所述组件文件得到每个组件对应的组件代码，使得后续的优化判断更加全面准确。

S2、逐个选取其中一个组件为目标组件，判断所述目标组件的组件代码中是否包含预设语法；

本发明实施例中，所述预设的语法为目标组件的组件代码中引入其它组件的语法，所述预设的语法是通过import关键字来实现其它组件的引用。

详细地，参阅图2所示，所述判断所述目标组件的组件代码中是否包含预设语法，包括以下步骤S21-S24：

S21、根据所述预设的语法确定所述语法关键字；

S22、利用所述语法关键字在所述目标组件代码中检索；

S23、在检索到所述所述语法关键字时，则确定所述目标组件的组件代码中包含预设语法；

S24、在没有检索到所述语法关键字时，则确定所述目标组件的组件代码中不包含预设语法。

具体地，所述语法关键字为实现所述预设语法的程序结构，通过所述关键字能够确定所述目标组件代码中是否包含预设的语法，进一步地判断目标组件中是否引入了其它组件。

例如，本发明实施例中，所述预设语法的实现为import组件A from组件A的文件地址，通过所述import关键字实现组件的引用。

S3、在所述目标组件的组件代码中不包含所述预设语法时，设置所述目标组件为不需要进行SCU优化的组件；

详细地，本发明实施例中，在所述目标组件的组件代码中不包含预设语法时，即所述目标组件中不包含其它组件的引用，此时所述目标组件的优化对于所述react框架项目是非必要的，则将所述目标组件设置为不需要进行 SCU优化的组件。

S4、在所述目标组件的组件代码中包含所述预设语法时，根据所述目标组件的组件代码中的渲染函数确定每个所述目标组件的重新渲染场景；

本发明实施例中，在所述目标组件代码中包含所述预设语法时，即所述目标组件中包含其它组件的引用，此时所述目标组件可以作为父组件，包含子组件的引用，对于所述目标组件的SCU优化是有必要的。

本发明实施例中，所述重新渲染场景为所述目标组件的自身react框架渲染内容，以及所述目标组件的渲染变化会不会影响其子组件的渲染变化，不同的渲染场景下所述目标组件的渲染变化对于其子组件的影响也是不同的。

详细地，参阅图3所示，所述根据所述目标组件的组件代码中的渲染函数确定每个所述目标组件的重新渲染场景，包括以下步骤S41-S48：

S41、获取所述目标组件的组件代码中的渲染函数的输出数据；

S42、查找所述输出数据中是否包含其它组件；

S43、在所述输出数据中包含其它组件时，查找所述输出数据中是否包含预设预设标签；

S44、在所述输出数据中不包含其它组件时，确定所述目标组件的渲染场景为变量控制组件更新渲染；

S45、在不包含所述预设标签时，确定所述目标组件的重新渲染场景为不必要进行重新渲染；

S46、在包含所述预设标签时，判断所述预设标签的来源；

S47、在所述预设标签的来源为所述目标组件时，确定所述目标组件的重新渲染场景为变量控制组件更新渲染；

S48、在所述预设预设标签的来源为其它组件时，确定所述目标组件的重新渲染场景为父组件传值给子组件。

本发明实施例中，在所述渲染函数的输出数据中不包含其它组件时，表示所述目标组件中不包含子组件，所述目标组件为单独组件，单独组件的重新渲染只需要判断目标组件本身的变量关系，根据所述变量关系进一步地判断所述目标组件是否需要进行SCU优化。

具体地，本发明实施例中，所述预设的标签为所述渲染函数输出数据中的插值表达式的标签以及可以动态变化的值的标签，在不存在所述预设标签时，表示所述目标组件的渲染内容为纯静态文本格式，不会受到自身任何动态变化的影响，但当所述目标组件作为子组件时，此时其父组件的重新渲染更新都会导致所述目标组件强制更新优化，这种强制更新优化是无意义的。

S5、在所述重新渲染场景为不必要进行重新渲染时，设置所述目标组件为不需要进行SCU优化的子组件；

本发明实施例中，所述不必要重新渲染场景为所述目标组件的更新渲染是不必要的，所述目标组件作为子组件时不需要进行SCU优化。

详细地，所述设置所述目标组件为不需要进行SCU优化的子组件，包括；

查找所述目标组件代码中渲染函数的的调用链路，根据所述调用链路确定所述渲染函数的代码层级；

在所述相同的代码层级中添加预设的SCU优化方法。

具体地，本发明实施例中所述预设的SCU优化方法为在SCU优化方法的编写中只包含return false，表示不管所述目标组件的父组件如何变化，都不会导致所述目标组件的更新。

S6、在所述重新渲染场景为父组件传值给子组件场景时，根据所述父组件传递的变量值确定是否对所述目标组件进行SCU优化；

本发明实施例中，所述父组件传值给子组件的重新渲染场景，表示所述目标组件的渲染内容展示会受到外部父组件传递的变量值的影响，根据父组件传递地变量值的内容，判断所述目标组件需不需要进行SCU优化。

详细地，参阅图4所示，所述根据所述父组件传递的变量值确定是否对所述目标组件进行SCU优化，包括以下步骤S61-S65：

S61、获取所述目标组件代码中的传值对象中的初始变量值；

S62、在所述目标组件的父组件进行SCU优化后，获取所述传递对象的当前变量值；

S63、判断所述初始变量值与所述当前变量值是否一致；

S64、在所述初始变量值与所述当前变量值一致时，所述目标组件不需要进行SCU优化；

S65、在所述初始变量值与所述当前变量值不一致时，所述目标组件需要进行SCU优化。

具体地，本发明实施例中，所述传值对象为props对象，props对象所传值的变量来源于父组件，例如this.props.list.变量1，表示所述props对象自父组件传递的变量值为1。

本发明实施例中，所述根据所述目标组件的外部父组件所传递的变量值，进一步地判断所述目标组件的是否需要进行SCU优化，不会因为外部父组件的SCU优化导致子组件的强制SCU优化，提高了组件优化的准确度。

S7、在所述重新渲染场景为变量控制组件更新渲染时，根据所述变量值确定所述目标组件是否需要进行SCU优化。

本发明实施例中，所述重新渲染场景为变量控制组件更新渲染时，即所述目标组件的更新渲染由目标组件本身的变量值决定，当所述变量值发生变化时，需要对所述目标组件进行SCU优化，当变量值相同时，此时的目标组件进行重新更新渲染是非必要的，不需要进行SCU优化。

详细地，参阅图5所示，所述根据所述变量值确定所述目标组件是否需要进行SCU优化，包括以下步骤S71-S73：

S71、获取所述目标组件代码中的状态对象输出的当前变量值；

S72、在所述当前变量值发生变化时，确定所述目标组件需要进行SCU优化；

S73、在所述当前变量值不发生变化时，确定所述目标组件不需要进行SCU 优化。

详细地，本发明实施例中，所述状态对象为state对象，判断所述state 对象输出的变量值是否发生变化，例如this.state.变量2，当前变量值为2，在所述变量值发生变化时，表示所述组件的渲染内容也发生了变化，此时，所述目标组件的SCU优化是必要的。

应当知晓的是，本发明实施例中，在所述目标组件为不需要进行SCU优化时，所述目标组件的子组件也不会进行SCU优化，提高了SCU优化的速度，进一步地提高react框架项目中组件优化的准确性。

本发明实施例通过获取前端react项目中的每个组件及对应的组件代码，保证组件优化判断的全面性；再逐个选取一个作为目标组件，判断目标组件的代码中是否包含预设语法；若不包含，则所述目标组件为不需要进行SCU 优化的子组件，即父组件更新时目标组件不需要更新，提高了组件优化的准确度；若包含，根据目标组件代码中的中的渲染函数确定目标组件的重新渲染场景，根据重新渲染场景的不同，判断所述目标组件是否需要进行SCU优化及目标组件作为子组件时是否需要进行SCU优化，已实现组件SCU优化更高的的准确度，避免不必要的SCU优化。因此本发明提出的react组件优化判断方法，可以解决进行组件SCU优化时的精确度较低的问题。

如图6所示，是本发明一实施例提供的react组件优化判断装置的功能模块图。

本发明所述react组件优化判断装置100可以安装于电子设备中。根据实现的功能，所述react组件优化判断装置100可以包括遍历配置文件模块 101、预设语法判断模块102、设置目标组件第一优化模块103、重新渲染场景确定模块104、设置目标组件第二优化模块105、设置目标组件第三优化模块106及设置目标组件第四优化模块107。本发明所述模块也可以称之为单元，是指一种能够被电子设备处理器所执行，并且能够完成固定功能的一系列计算机程序段，其存储在电子设备的存储器中。

在本实施例中，关于各模块/单元的功能如下：

所述遍历配置文件模块101，用于获取前端react框架项目的配置文件，根据所述配置文件遍历所述react框架项目中的组件文件，得到所述前端 react框架项目中每个组件及对应的组件代码；

所述预设语法判断模块102，用于逐个选取其中一个组件为目标组件，判断所述目标组件的组件代码中是否包含预设语法；

所述设置目标组件第一优化模块103，用于在所述目标组件的组件代码中不包含所述预设语法时，设置所述目标组件为不需要进行SCU优化的组件；

所述重新渲染场景确定模块104，用于在所述目标组件的组件代码中包含所述预设语法时，根据所述目标组件的组件代码中的渲染函数确定每个所述目标组件的重新渲染场景；

所述设置目标组件第二优化模块105，用于所述重新渲染场景为不必要进行重新渲染时，设置所述目标组件为不需要进行SCU优化的子组件；

所述设置目标组件第三优化模块106，用于在所述重新渲染场景为父组件传值给子组件场景时，根据所述父组件传递的变量值确定是否对所述目标组件进行SCU优化；

所述设置目标组件第四优化模块107，用于在所述重新渲染场景为变量控制组件更新渲染时，根据所述变量值确定所述目标组件是否需要进行SCU优化。

详细地，本发明实施例中所述react组件优化判断装置100中所述的各模块在使用时采用与上述图1至图3中所述的react组件优化判断方法一样的技术手段，并能够产生相同的技术效果，这里不再赘述。

如图7所示，是本发明一实施例提供的实现react组件优化判断方法的电子设备的结构示意图。

所述电子设备1可以包括处理器10、存储器11、通信总线12以及通信接口13，还可以包括存储在所述存储器11中并可在所述处理器10上运行的计算机程序，如react组件优化判断程序。

其中，所述处理器10在一些实施例中可以由集成电路组成，例如可以由单个封装的集成电路所组成，也可以是由多个相同功能或不同功能封装的集成电路所组成，包括一个或者多个中央处理器(Central Processing Unit， CPU)、微处理器、数字处理芯片、图形处理器及各种控制芯片的组合等。所述处理器10是所述电子设备的控制核心(ControlUnit)，利用各种接口和线路连接整个电子设备的各个部件，通过运行或执行存储在所述存储器11内的程序或者模块(例如执行react组件优化判断程序等)，以及调用存储在所述存储器11内的数据，以执行电子设备的各种功能和处理数据。

所述存储器11至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、移动硬盘、多媒体卡、卡型存储器(例如：SD或DX存储器等)、磁性存储器、磁盘、光盘等。所述存储器11在一些实施例中可以是电子设备的内部存储单元，例如该电子设备的移动硬盘。所述存储器11在另一些实施例中也可以是电子设备的外部存储设备，例如电子设备上配备的插接式移动硬盘、智能存储卡(Smart Media Card，SMC)、安全数字(Secure Digital，SD)卡、闪存卡(Flash Card)等。进一步地，所述存储器11还可以既包括电子设备的内部存储单元也包括外部存储设备。所述存储器11不仅可以用于存储安装于电子设备的应用软件及各类数据，例如react组件优化判断程序的代码等，还可以用于暂时地存储已经输出或者将要输出的数据。

所述通信总线12可以是外设部件互连标准(Peripheral ComponentInterconnect，简称PCI)总线或扩展工业标准结构(Extended Industry StandardArchitecture，简称EISA)总线等。该总线可以分为地址总线、数据总线、控制总线等。所述总线被设置为实现所述存储器11以及至少一个处理器10等之间的连接通信。

所述通信接口13用于上述电子设备与其他设备之间的通信，包括网络接口和用户接口。可选地，所述网络接口可以包括有线接口和/或无线接口(如 WI-FI接口、蓝牙接口等)，通常用于在该电子设备与其他电子设备之间建立通信连接。所述用户接口可以是显示器(Display)、输入单元(比如键盘 (Keyboard))，可选地，用户接口还可以是标准的有线接口、无线接口。可选地，在一些实施例中，显示器可以是LED显示器、液晶显示器、触控式液晶显示器以及OLED(Organic Light-Emitting Diode，有机发光二极管)触摸器等。其中，显示器也可以适当的称为显示屏或显示单元，用于显示在电子设备中处理的信息以及用于显示可视化的用户界面。

图中仅示出了具有部件的电子设备，本领域技术人员可以理解的是，图中示出的结构并不构成对所述电子设备的限定，可以包括比图示更少或者更多的部件，或者组合某些部件，或者不同的部件布置。

例如，尽管未示出，所述电子设备还可以包括给各个部件供电的电源(比如电池)，优选地，电源可以通过电源管理装置与所述至少一个处理器10逻辑相连，从而通过电源管理装置实现充电管理、放电管理、以及功耗管理等功能。电源还可以包括一个或一个以上的直流或交流电源、再充电装置、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。所述电子设备还可以包括多种传感器、蓝牙模块、Wi-Fi模块等，在此不再赘述。

应该了解，所述实施例仅为说明之用，在专利申请范围上并不受此结构的限制。

所述电子设备1中的所述存储器11存储的react组件优化判断程序是多个指令的组合，在所述处理器10中运行时，可以实现：

获取前端react框架项目的配置文件，根据所述配置文件遍历所述react 框架项目中的组件文件，得到所述前端react框架项目中每个组件及对应的组件代码；

逐个选取其中一个组件为目标组件，判断所述目标组件的组件代码中是否包含预设语法；

在所述目标组件的组件代码中不包含所述预设语法时，设置所述目标组件为不需要进行SCU优化的组件；

在所述目标组件的组件代码中包含所述预设语法时，根据所述目标组件的组件代码中的渲染函数确定每个所述目标组件的重新渲染场景；

在所述重新渲染场景为不必要进行重新渲染时，设置所述目标组件为不需要进行SCU优化的子组件；

在所述重新渲染场景为父组件传值给子组件场景时，根据所述父组件传递的变量值确定是否对所述目标组件进行SCU优化；

在所述重新渲染场景为变量控制组件更新渲染时，根据所述变量值确定所述目标组件是否需要进行SCU优化。

具体地，所述处理器10对上述指令的具体实现方法可参考附图对应实施例中相关步骤的描述，在此不赘述。

进一步地，所述电子设备1集成的模块/单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读存储介质中。所述计算机可读存储介质可以是易失性的，也可以是非易失性的。例如，所述计算机可读介质可以包括：能够携带所述计算机程序代码的任何实体或装置、记录介质、U盘、移动硬盘、磁碟、光盘、计算机存储器、只读存储器 (ROM，Read-Only Memory)。

本发明还提供一种计算机可读存储介质，所述可读存储介质存储有计算机程序，所述计算机程序在被电子设备的处理器所执行时，可以实现：

获取前端react框架项目的配置文件，根据所述配置文件遍历所述react 框架项目中的组件文件，得到所述前端react框架项目中每个组件及对应的组件代码；

逐个选取其中一个组件为目标组件，判断所述目标组件的组件代码中是否包含预设语法；

在所述目标组件的组件代码中不包含所述预设语法时，设置所述目标组件为不需要进行SCU优化的组件；

在所述目标组件的组件代码中包含所述预设语法时，根据所述目标组件的组件代码中的渲染函数确定每个所述目标组件的重新渲染场景；

在所述重新渲染场景为不必要进行重新渲染时，设置所述目标组件为不需要进行SCU优化的子组件；

在所述重新渲染场景为父组件传值给子组件场景时，根据所述父组件传递的变量值确定是否对所述目标组件进行SCU优化；

在所述重新渲染场景为变量控制组件更新渲染时，根据所述变量值确定所述目标组件是否需要进行SCU优化。

在本发明所提供的几个实施例中，应该理解到，所揭露的设备，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。

所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能模块可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能模块的形式实现。

对于本领域技术人员而言，显然本发明不限于上述示范性实施例的细节，而且在不背离本发明的精神或基本特征的情况下，能够以其他的具体形式实现本发明。

因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本发明的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本发明内。不应将权利要求中的任何附关联图标记视为限制所涉及的权利要求。

本发明所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。

本申请实施例可以基于人工智能技术对相关的数据进行获取和处理。其中，人工智能(Artificial Intelligence，AI)是利用数字计算机或者数字计算机控制的机器模拟、延伸和扩展人的智能，感知环境、获取知识并使用知识获得最佳结果的理论、方法、技术及应用系统。

此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。系统权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第一、第二等词语用来表示名称，而并不表示任何特定的顺序。

最后应说明的是，以上实施例仅用以说明本发明的技术方案而非限制，尽管参照较佳实施例对本发明进行了详细说明，本领域的普通技术人员应当理解，可以对本发明的技术方案进行修改或等同替换，而不脱离本发明技术方案的精神和范围。

Claims (10)

1.一种react组件优化判断方法，其特征在于，所述方法包括：

获取前端react框架项目的配置文件，根据所述配置文件遍历所述react框架项目中的组件文件，得到所述前端react框架项目中每个组件及对应的组件代码；

逐个选取其中一个组件为目标组件，判断所述目标组件的组件代码中是否包含预设语法；

在所述目标组件的组件代码中不包含所述预设语法时，设置所述目标组件为不需要进行SCU优化的组件；

在所述目标组件的组件代码中包含所述预设语法时，根据所述目标组件的组件代码中的渲染函数确定每个所述目标组件的重新渲染场景；

在所述重新渲染场景为不必要进行重新渲染时，设置所述目标组件为不需要进行SCU优化的子组件；

在所述重新渲染场景为父组件传值给子组件场景时，根据所述父组件传递的变量值确定是否对所述目标组件进行SCU优化；

在所述重新渲染场景为变量控制组件更新渲染时，根据所述变量值确定所述目标组件是否需要进行SCU优化。

2.如权利要求1所述的react组件优化判断方法，其特征在于，所述根据所述配置文件遍历所述react框架项目中的组件文件，包括；

根据所述配置文件确定所述react框架项目的根目录文件；

查找所述根目录下的组件文件，得到所述react框架项目的所有组件文件。

3.如权利要求1所述的react组件优化判断方法，其特征在于，所述判断所述目标组件的组件代码中是否包含预设语法，包括：

根据所述预设的语法确定所述语法关键字；

利用所述语法关键字在所述目标组件代码中检索；

在检索到所述所述语法关键字时，则确定所述目标组件的组件代码中包含预设语法；

在没有检索到所述语法关键字时，则确定所述目标组件的组件代码中不包含预设语法。

4.如权利要求1所述的react组件优化判断方法，其特征在于，所述根据所述目标组件的组件代码中的渲染函数确定每个所述目标组件的重新渲染场景，包括：

获取所述目标组件的组件代码中的渲染函数的输出数据；

查找所述输出数据中是否包含其它组件；

在所述输出数据中包含其它组件时，查找所述输出数据中是否包含预设预设标签；

在所述输出数据中不包含其它组件时，确定所述目标组件的渲染场景为变量控制组件更新渲染；

在不包含所述预设标签时，确定所述目标组件的重新渲染场景为不必要进行重新渲染；

在包含所述预设标签时，判断所述预设标签的来源；

在所述预设标签的来源为所述目标组件时，确定所述目标组件的重新渲染场景为变量控制组件更新渲染；

在所述预设预设标签的来源为其它组件时，确定所述目标组件的重新渲染场景为父组件传值给子组件。

5.如权利要求1所述的react组件优化判断方法，其特征在于，所述设置所述目标组件为不需要进行SCU优化的子组件，包括；

查找所述目标组件代码中渲染函数的的调用链路，根据所述调用链路确定所述渲染函数的代码层级；

在所述相同的代码层级中添加预设的SCU优化方法。

6.如权利要求1所述的react组件优化判断方法，其特征在于，所述根据所述父组件传递的变量值确定是否对所述目标组件进行SCU优化，包括：

获取所述目标组件代码中的传值对象中的初始变量值；

在所述目标组件的父组件进行SCU优化后，获取所述传递对象的当前变量值；

判断所述初始变量值与所述当前变量值是否一致；

在所述初始变量值与所述当前变量值一致时，所述目标组件不需要进行SCU优化；

在所述初始变量值与所述当前变量值不一致时，所述目标组件需要进行SCU优化。

7.如权利要求1所述的react组件优化判断方法，其特征在于，所述根据所述变量值确定所述目标组件是否需要进行SCU优化，包括：

获取所述目标组件代码中的状态对象输出的当前变量值；

在所述当前变量值发生变化时，确定所述目标组件需要进行SCU优化；

在所述当前变量值不发生变化时，确定所述目标组件不需要进行SCU优化。

8.一种react组件优化判断装置，其特征在于，所述装置包括：

遍历配置文件模块，用于获取前端react框架项目的配置文件，根据所述配置文件遍历所述react框架项目中的组件文件，得到所述前端react框架项目中每个组件及对应的组件代码；

预设语法判断模块，用于逐个选取其中一个组件为目标组件，判断所述目标组件的组件代码中是否包含预设语法；

设置目标组件第一优化模块，用于在所述目标组件的组件代码中不包含所述预设语法时，设置所述目标组件为不需要进行SCU优化的组件；

重新渲染场景确定模块，用于在所述目标组件的组件代码中包含所述预设语法时，根据所述目标组件的组件代码中的渲染函数确定每个所述目标组件的重新渲染场景；

设置目标组件第二优化模块，用于所述重新渲染场景为不必要进行重新渲染时，设置所述目标组件为不需要进行SCU优化的子组件；

设置目标组件第三优化模块，用于在所述重新渲染场景为父组件传值给子组件场景时，根据所述父组件传递的变量值确定是否对所述目标组件进行SCU优化；

设置目标组件第四优化模块，用于在所述重新渲染场景为变量控制组件更新渲染时，根据所述变量值确定所述目标组件是否需要进行SCU优化。

9.一种电子设备，其特征在于，所述电子设备包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的计算机程序，所述计算机程序被所述至少一个处理器执行，以使所述至少一个处理器能够执行如权利要求1至7中任意一项所述的react组件优化判断方法。

10.一种计算机可读存储介质，存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至7中任意一项所述的react组件优化判断方法。

Images