组件使用props数据速度渲染太慢?不如学着用治理国家的方式去试试!

事情的开始

在某一天的下午,我刚开完需求会,需求也不算难。大概就是内部设计一个填报表格,大概是四个数据相同 的table表格数据,然后外部则是将table中每个cell渲染成inPut输入框 ,进行数据交互,客户输入完成之后再进行数据验证传给后端。

乍一看,还是蛮简单的,主要是外部的渲染和数据输入,我是使用的antd中table组件,使用自定义渲染的时候,自定义渲染成Input组件,我一开始使用的是将四个数据所有的数据,通过遍历的方式,分派给每个table,然后使用父组件的数据state传入子组件 ,子组件的input调用方法,将父组件的state进行统一修改

出现问题

这样也是可以实现这个需求的,但是问题是速度特别慢 ,如果在输入的快的话,会出现延缓一秒甚至多秒后才进行响应。这样下来明显对于用户的体验效果极差,我开始思考如何去进行优化。

因为,我使用的是父组件的数据去渲染子组件,然后子组件中input触发事件,然后去emit给父组件,父组件使用set方法更新state,然后进行页面的渲染的情况。这样下来,对于每次re-render来说,四个table均需要更新,导致更新数据缓慢。

思路出现

后面,我在思考如何进行性能优化的时候,突然想起了国家治理的方式,每个省和市和县分别进行自治 ,如何进行修改,盈利和招商等内容,大部分都是区域进行自治的。如果国家需要全国数据的话,只需要将命令告诉每个省 ,然后依次将命令往下传,等到收集完成之后 ,则进行数据回流,最终国家拿到全国的数据。

好了,思路有了,开始实践!

代码实现

在这个架构下面,父组件所需要的是需要一个state(flag) ,来告诉子组件什么时候需要进行内容自检和数据回流 ,同时还需要一个ref 来实时获取,从子组件获取的数据是否都已经就绪

子组件则是需要监听父组件传进的(flag),如果一旦出现flag发生改变为true 的情况下,在组件内部进行自检和获取值的操作,同时使用emit的方式返回结果 ,传给父组件,父组件根据传过来的值判断是否所有table的数据都均以自检通过

以上大概就是代码中的思路,下面将一步步的去修改代码。

首先,我们需要修改的是,我们不需要 子组件在每次进行修改的时候,直接修改父组件的值,而是在将父组件的state传入子组件之后,将数据在子组件内使用useState复制一份。从此以后在子组件内每次修改,只需要去修改内部的state的值,因为每次更新都是仅限于组件内,所以每次Input更新的速度很快。

那么就有问题了,如何去进行提交操作呢,总得把数据拿出来吧,我使用的是监听props中的flag属性

这个属性一旦发生改变,子组件就会使用一个函数去进行自检操作,判断是否已经全部自检通过了

如果进行通过之后,子组件调用自定义emit的事件去进行数据回流,父组件接收到emit的值并修改一个ref(不可以使用useState,ref具有即时性)。

每次父组件接收到子组件中的emit的时候都要去去判断Ref的值是否已经是全的了,一旦有一个没全就去显示message提示哪个模块没有填写完全,还可以加一个errorlist 按照固定的顺序去提示。

总结

这个是我在日常开发中遇到的问题,并拿出的解决方案。可能大家有用过这样的方法,没用过的,也算是为大家提供一条性能优化的思路

相关推荐
王哈哈^_^37 分钟前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie1 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic2 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿2 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具2 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161773 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test4 小时前
js下载excel示例demo
前端·javascript·excel
Yaml44 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事4 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶4 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json