@nutui - 为什么我的Tabs|Tabs.TabPane 组件会在点击切换的时候渲染多次?

231 阅读1分钟

起因

在写微信小程序的时候;用Tabs.TabPane包裹自定义组件,每次 change 事件会导致页面的重复渲染多次。

代码如下

分析

  • 接口没有重新触发,说明只是在切换的时候<Casecard /> 组件重复渲染多次;
  • 已经将<Casecard /> 中的caseDetailList 进行缓存处理,但还是触发多次,怀疑问题是change 事件触发了setState,造成页面重新render。
  • 也就是说 nutui-tabs 他在用户切换后, 可能不删除之前渲染过的节点。

解决

方案:运用react的条件渲染,在每一次tab切换的时候将上个页面移出Dom树

效果: