组件使用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 按照固定的顺序去提示。

总结

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

相关推荐
y先森28 分钟前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy28 分钟前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu108301891131 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
虾球xz3 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇3 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒3 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐4 小时前
前端图像处理(一)
前端