当项目中使用异步加载
,ant design的Tabs组件处理ui时, 就会出现如题这种bug
例:
<Tabs
tabs={tab1}
initialPage={nav1}
tabBarPosition="top"
renderTab={tab => <span>{tab.title}</span>}
swipeable={false}
onChange={(tab, index) => {
this.bigNavchange(tab, index);
}}
>
<Fragment>
<Switch>
{routerlist.map((i, key) => {
return (
<Route
path={i.path}
component={i.component}
exact
key={key}
/>
);
})}
</Switch>
</Fragment>
</Tabs>
上面Tabs组件中的数据是由map遍历渲染, routerlist是子组件统一配置的路由列表,并且是使用了react-loadable异步加载组件,
这时同一个子组件componentDidMount中console.log(1)尽然触发了多次
, 说明组件被挂载了多次,
-
原因:
找遍了原因, 原来就是Tab组件这个坑, 它的子组件会根据tab数量来渲染,使得同一个子组件被多次挂载 -
解决:
方法1. 里面只能写纯函数组件, 将每一个子组件中生命周期要执行的方法, 全部放在Tab组件的change回调中, 父传子属性来渲染
方法2. 子组件放Tab组件外部来渲染, 子组件不再被挂载多次, Tab中的动画效果就不作用与子组件了, 可以自己写动画效果