Umi: 开启 dynamicImport 造成 layout 组件重复渲染

[xuwenqing2014]

What happens?

config.ts里配置routers的wrappers，访问页面的时候，会渲染2次wrappers

最小可复现仓库

https://github.com/xuwenqing2014/umi-wrapper

复现步骤，错误日志以及相关配置

1、config.ts里面配置好routers的wrappers
2、访问页面
3、wrapper高阶组件里的log会打印2次

相关环境信息

• Umi 版本：3.2.3
• Node 版本：12.18.0
• 操作系统：windows 10

[xiaohuoni]

和 wrapper 无关，是使用了 dva 就会有页面渲染两次的问题。

[xiaohuoni]

找到了一些相关，也可能不相关的 Issues。
https://github.com/umijs/umi/issues/3746
https://github.com/umijs/umi/issues/3774
https://github.com/umijs/umi/issues/3712
https://github.com/umijs/umi/issues/4104

dva 插件没执行多次。node_modules/@umijs/renderer-react/dist/index.js 的 render 执行了两次。

[atzcl]

@xiaohuoni 我没有使用 dva 也渲染两次......

[xiaohuoni]

@atzcl 你注意看看 .umi 文件夹下有没有生成 plugin-dva 。如果是 wrapper 的问题，更新 umi 应该可以修复。然后看看有没有使用 plugin-layout 。如果没有，那可能还有其他原因，你可以给一个重现demo。（无语！）

[atzcl]

@xiaohuoni 跟 dva 无关，是 dynamicImport 的问题，最小化 demo: https://github.com/atzcl/umi-rerender-demo

[atzcl]

[xiaohuoni]

@atzcl 你的demo有问题。上面的demo里面并没有用 dynamicImport。

[atzcl]

@xiaohuoni 之前忘记提交代码了。。😂😂 已经更新上去了

[xiaohuoni]

@atzcl 你的demo，我看了，你的问题是会导致 layout 组件重复渲染的问题，和这里说的渲染两次的问题不是一个事情哈。是在切换页面的时候，再次渲染了layout。这个issues里面是每次初始化页面都渲染两次。不过可能是同一个原因引起的，也可能不是，我没定位到问题。等 @sorrycc 看看了

[Veveue]

https://github.com/dvajs/dva/issues/2287 @sorrycc @xiaohuoni

[Mater1996]

我在关闭dynamicImport后这个问题就消失了， 注意这里是首次切换路由或者给路由push参数的时候 会重新渲染一遍根组件 @xiaohuoni 可能是什么原因导致的呢？

[ycjcl868]

+1

[brickspert]

+1

如果使用 dynamicImport，在首次切换路由的时候，最外层 layout 会销毁重建。这会导致 layout 的 componentDidMount 重复执行，而我们一般在这里设置一些全局数据~

[i7eo]

+1

如果使用 dynamicImport，在首次切换路由的时候，最外层 layout 会销毁重建。这会导致 layout 的 componentDidMount 重复执行，而我们一般在这里设置一些全局数据~

有什么办法可以避免 didmount 重复执行吗

[brickspert]

+1
如果使用 dynamicImport，在首次切换路由的时候，最外层 layout 会销毁重建。这会导致 layout 的 componentDidMount 重复执行，而我们一般在这里设置一些全局数据~

有什么办法可以避免 didmount 重复执行吗

最新版本已经修复了。

[i7eo]

+1
如果使用 dynamicImport，在首次切换路由的时候，最外层 layout 会销毁重建。这会导致 layout 的 componentDidMount 重复执行，而我们一般在这里设置一些全局数据~

有什么办法可以避免 didmount 重复执行吗

最新版本已经修复了。

ok