前沿

antd 的升级，需要先升到3.x 的最新版本，才能升级到4.x的最新版本，4.x 版本对react版本有要求，升级react需要升级react的依赖，将react的依赖升级到最新版本。

antd 2.13.11 > 3.26.5

执行命令

yarn install // 无报错信息，直接安装成功
yarn start // 编译无报错，项目启动正常
复制代码

界面显示异常

样式异常

解决方案：init.less中引入全局样式，如图2其余的样式问题，需要慢慢解决

@import '~antd/es/style/v2-compatible-reset.less';   // init.less中引入
复制代码

中英文异常

解决方案：默认语言改为英文，需要配置 LocalProvider，官方文档推荐使用LocalProvider，但是使用的时候报错，推荐使用ConfigProvider，修改index.js如下:

import { ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';

render((
    <ConfigProvider locale={zhCN}>
        <AppContainer>
            {Routes}
        </AppContainer>
    </ConfigProvider>
), document.getElementById('app'));

if (module.hot) {
    module.hot.accept('./route', () => {
        const Routes = require('./route').default;
        render((
            <ConfigProvider locale={zhCN}>
                <AppContainer>
                    {Routes}
                </AppContainer>
            </ConfigProvider>
        ), document.getElementById('app'));
    });
}
复制代码

antd-migration-helper 代码检查情况片段

**解决方案：**如onRowClick解决方案

// onRowClick={this.onRowClick}
onRow={record => ({
		onClick:() => this.onRowClick(record)
})}
复制代码

其他异常

• model的key不再会去强制刷新整个model
• ......
• ......

小结

​ 需要使用antd-migration-helper扫描所有废弃的用法，并找到替代方案，页面中有些样式和功能受到影响，需要调整。需要对所有页面进行排查，查看升级影响，请点击查看详细升级指南。

探索阶段

react 15.3.2 >16.13.0

yarn install // 无报错信息，直接安装成功
yarn start // 编译无报错，项目启动正常
复制代码

​ 在16版本中，由于异步渲染的改动，componentWillMount, componentWillReceiveProps,componentWillUpdate 三个生命周期即将废弃，目前16中可以继续旧版的生命周期，但会报警告（我们系统不报警告，懵~~~~），17版本将会失效。在我们项目中大量的使用着这三个生命周期函数。

​ 16版本中新增了getDerivedStateFromProps,getSnapshotBeforeUpdate生命周期函数，getDerivedStateFromProps可以替代componentWillReceiveProps使用

react -dom 15.3.2 >16.13.0

yarn install // 无报错信息，直接安装成功
yarn start // 编译无报错，项目启动正常
复制代码

react-router 2.8.1 >5.1.2

yarn install // 无报错信息，直接安装成功
yarn start // 编译无报错，项目启动正常
复制代码

​ 5.x版本中，Link组件被从react-router移动到了react-router-dom中，但我们系统中使用的从react-router中引入不报错，我好懵~

升级后打包情况

npm run build  // 无报错信息，打包成功
cd ICRMDist
anywhere // 启动正常
复制代码

小结

无论我怎么升级react,react-dom,react-router系统都不报错，都运行正常，甚至直接删除react-router包，package.json中也不引入，系统还是运行正常。

挖掘阶段

注释./config/webpack.config.dev.js下部分代码，使用包版本的react,react-dom,react-router

//通过public文件index.html script标签加载
externals: {
		// "react": "React",
		// // "antd": "antd",
		// "react-dom": "ReactDOM",
		// "react-router": "ReactRouter",
		.....
},
复制代码

yarn start // 编译成功，但页面报错
复制代码

问题1：

解决方案

​ 原因是react 16将createClass移除了，使用es6语法，如果必须使用es5创建类的话，请使用create-react-class包,请参考

import React from 'react';
import createReactClass from 'create-react-class';
const BasicWindow = createReactClass({
    render () {}
})
复制代码

问题2：

解决方案

从 React v15.5 开始 ，React.PropTypes 助手函数已被弃用，我们建议使用 prop-types 库 来定义请参考

import PropTypes from 'prop-types';
static propTypes = {
	list: PropTypes.array // 改为从PropTypes中获取
};
复制代码

问题3：

echarts-for-react 包报错，使用的是老版本的react,升级至最新版本

问题4：

react-fontawesome 包报错，使用的是老版本的react,升级至最新版本

问题5：

解决方案：

antd 3.x >4.x（未实践）

前提条件

1. antd 已经升级至 3.x 的最新版本
2. 升级项目 React 16.12.0 以上

详细升级文档，请点击查看

总结

若只升级antd至3.x，不升级react及其依赖，需代码检测出来修改点是49处，以及要排查页面的样式及功能。若升级至4.x，则需要升级react 及react 依赖，报错很多，改动也很多，需要很大的工作量。

实用工具

• antd-migration-helper antd升级的代码检查
• npm-check 检查过时的包版本