起因
在写微信小程序的时候;用Tabs.TabPane包裹自定义组件,每次 change 事件会导致页面的重复渲染多次。
代码如下
分析
- 接口没有重新触发,说明只是在切换的时候
<Casecard />组件重复渲染多次; - 已经将
<Casecard />中的caseDetailList进行缓存处理,但还是触发多次,怀疑问题是change 事件触发了setState,造成页面重新render。 - 也就是说 nutui-tabs 他在用户切换后, 可能不删除之前渲染过的节点。
解决
方案:运用react的条件渲染,在每一次tab切换的时候将上个页面移出Dom树
效果: