关于 Redux的connect 造成组件重复挂载
2021-08-29 本文已影响0人
Asuler
现象：
1.组件的didmount触发了两次，由此可见，是引起了重复挂载，并非简单的重复渲染。
-
写法上是有个路由配置，根据后端接口返回的值，把这份配置过滤下，再根据这份配置去map遍历，生成<Route>，Route组件加了key的。
-
<Route> 的render参数，传入了组件<Route render={props=><Com {...props} otherProps={item}/>}>
-
对应的组件，是被redux的connect连接过了，把connect取消掉，直接把组件导出，就只触发一次，变正常了。但是有些情况下又不可能把connect取消掉，所以还是想要 在connect连接下的解决方案
-
后来发现是深拷贝问题，这份路由配置，在过滤的时候我深拷贝了一下，导致每次render计算的路有配置虽然值一样，但是内存地址都不一样了，（被redux的connect检测到，导致了重新挂载？）
-
如果把connect去掉，即便深拷贝了，也只触发一次
结论：
- 在父组件的render里深拷贝出的数组去map return子组件，React不会因为父组件的re-render而让子组件重新挂载。但是如果子组件接入的connect的话，就会使父组件的re-render引起子组件的remount。
解决：
方案1：不使用connect，使用对应的redux hooks来获取store的值，
方案2：那个过滤路由配置的函数，用immutable方式去更改，就是浅拷贝；如果接入了connect，需要浅拷贝，才能不引发re-mount。我这是因为深拷贝了才导致的
