美文网首页
关于 Redux的connect 造成组件重复挂载

关于 Redux的connect 造成组件重复挂载

作者: Asuler | 来源:发表于2021-08-29 19:08 被阅读0次

现象:
1.组件的didmount触发了两次,由此可见,是引起了重复挂载,并非简单的重复渲染。

  1. 写法上是有个路由配置,根据后端接口返回的值,把这份配置过滤下,再根据这份配置去map遍历,生成<Route>,Route组件加了key的。

  2. <Route> 的render参数,传入了组件<Route render={props=><Com {...props} otherProps={item}/>}>

  3. 对应的组件,是被redux的connect连接过了,把connect取消掉,直接把组件导出,就只触发一次,变正常了。但是有些情况下又不可能把connect取消掉,所以还是想要 在connect连接下的解决方案

  4. 后来发现是深拷贝问题,这份路由配置,在过滤的时候我深拷贝了一下,导致每次render计算的路有配置虽然值一样,但是内存地址都不一样了,(被redux的connect检测到,导致了重新挂载?)

  5. 如果把connect去掉,即便深拷贝了,也只触发一次

结论:

  1. 在父组件的render里深拷贝出的数组去map return子组件,React不会因为父组件的re-render而让子组件重新挂载。但是如果子组件接入的connect的话,就会使父组件的re-render引起子组件的remount。

解决:
方案1:不使用connect,使用对应的redux hooks来获取store的值,
方案2:那个过滤路由配置的函数,用immutable方式去更改,就是浅拷贝;如果接入了connect,需要浅拷贝,才能不引发re-mount。我这是因为深拷贝了才导致的

相关文章

网友评论

      本文标题:关于 Redux的connect 造成组件重复挂载

      本文链接:https://www.haomeiwen.com/subject/iykgiltx.html