antd-mobile5 使用问题
最近公司的新项目中使用了antd-mobile5最新版，过程中出现了一些奇怪的问题，经过排查后发现是和react-hot-loader冲突导致的
- 发现问题
- 首先是Form表单组件，之前用的rc-form，写法有点繁琐；换了最新的Form组件，写法简单好用，直到找不到Form.Header，才发现事情没那么简单；
- 排查问题
- 开始觉得是样式的问题，但是在浏览器中根本找不到div，注释调所有相关less代码还是找不到，觉得应该不是样式问题
- 在自己的my-react-app项目中使用没有问题，感觉应该是项目配置导致的，把元项目中所有包引入，但是没有复现问题，控制台也没有错误或警告信息，暂时搁置
- 使用IndexBar组件，复制官网代码到项目中，只有外面的壳，里面的内容不见了；控制台有警告
the children of IndexBar must be IndexBar.Panel...，点击警告的位置，看IndexBar.js代码是类型不匹配导致不能渲染内容；在这句前面打断点调试，发现类型是ProxyComponent，点进去是react-hot-loader相关类，初步判断应该是react-hot-loader导致的； - 注释掉项目中
react-hot-loader相关的配置，重新运行，发现Form.Header出现了，IndexBar也有内容了，暂时解决，但是hot-reload相关功能无法使用了
- 解决方法
- 搜索github的issue发现类似的问题，antd-mobile相关issue，提供了解决方法
- 替换react-hot-loader为react-refresh，react-refresh-webpack-plugin，完美解决
