tab切换卡顿问题

2,759 阅读1分钟

这个版本在开发一个档案中心模块,其中有个功能是弹窗中进行tab切换,起初切换时页面非常卡顿,经过排查发现,在进行切换时每个tab页面都会渲染3次,原因是antd的tab组件在切换时默认不完全销毁。首先我想到的办法是使用memo包装函数组件和使用pureComponent组件,这样只要props相同时就会使用缓存,实验表明还是有用的,切换时每个tab页面的渲染次数减少到了1次。(备注:在tab切换时,我通过打印发现,最外层组件会渲染3次,也是因为没有使用memo缓存的缘故,它导致下面的子组件都渲染3次。)

这里还是会有1次渲染,是因为我给组件的props仍然是一个大的reducer,而在切换tab时会有一次接口请求和赋值,会发生props变更。变更对象对非激活tab页其实是不需要的,这里我给每个tab组件的props进行了过滤 ,只保留自己页面需要的props,经实验发现tab切换时,就不会再渲染其他tab页面了!