ant-design V4升级V5记录（成功篇）

附最终webpack、packjson、.eslintrc配置

 官方文档：https://ant.design/docs/react/migration-v5-cn

1、安装运行工具之前，提交本地修改内容；

2、工具运行完，根据提示修改文件问题；

3、移除config文件中module，

['import',{libraryName:'antd', libraryDirectory: 'es', style:'css'}]

4、新路径import zhCN from 'antd/locale/zh_CN';

 5、Uncaught TypeError: dispatcher.useId is not a function

https://zh-hans.reactjs.org/docs/hooks-reference.html#useid

useId 是一个用于生成横跨服务端和客户端的稳定的唯一 ID 的同时避免 hydration 不匹配的 hook。

在新版的ReactV18版本新增hook，以校验组件唯一id来提升渲染性能。这里通过降级到V17版本解决。

6、Uncaught Invariant Violation: Maximum update depth exceeded.  原因是，新版react中在render有立即执行的函数，函数执行进而触发render，陷入循环，修改如图所示，表示需手动触发；

onClick={this.showOrderDetails(item)}

为

onClick={() => this.showOrderDetails(item)}

 7、检查V4、V5不兼容的组件和写法即可；

8、包裹组件，识别热更；

9、Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

发生这个问题有两处地方，根因一致，通过控制台提示，知道上述报错是在哪里，哪个组件引起，发现是