【React系列教程九】React的UI框架Antd的使用及更新

一、React中使用Antd

antd官网：

step1：安装antd ：【cnpm install antd --save】/ 【 yarn add antd】

step2：在react项目的css中引入antd的css：

@import ~antd/dist/antd.css;

step3：开始使用：例如使用Button组件：

在组件中引入：import { Button } from antd;

<Button type="primary">hello</Button>

二、React中使用Antd高级配置—按需引入css样式

上面的例子实际上加载了全部的 antd 组件的样式（对前端性能是个隐患）。

step1：安装antd ：【cnpm install antd --save】/ 【 yarn add antd】

step2：安装react-app-rewired（一个对 create-react-app 进行自定义配置的社区解决方案）：

【cnpm install react-app-rewired --save】/ 【 yarn add react-app-rewired】

step3：修改package.json文件，把"scripts"下的 "react-scripts" 全部改成 "react-app-rewired"

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
},

step4：在项目根目录创建一个 config-overrides.js 文件，用于修改默认配置。 config-overrides.js文件内容如下：

module.exports = function override(config, env) {
    // do stuff with the webpack config...
    return config;
};

step5：安装babel-plugin-import（是一个用于按需加载组件代码和样式的 babel 插件）：

【cnpm install babel-plugin-import --save】/ 【 yarn add babel-plugin-import】

step6：修改 config-overrides.js 文件，将原来内容删掉，添加下面内容：

const { override, fixBabelImports } = require(customize-cra);
module.exports = override(
    fixBabelImports(import, {
        libraryName: antd,
        libraryDirectory: es,
        style: css,
    }),
);

step7：移除src/App.css 里全量添加的 @import ~antd/dist/antd.css; 直接引入组件使用就会有对应的css。最后重启【cnpm start】访问页面，这样就可以实现按需加载。

三、升级4.X版本：

现在antd已经到了4.X版本，如果我们想从3.X升级到4.X，官网介绍如下：

但是我们实际操作中，需要做下面的步骤：

step1：更新 antd 版本：

通过查看antd更新日志（），查看最新版本号，目前是4.5.2

然后输入命令行：【cnpm install --save antd@4.5.2】

step2：更新 react 版本：

通过查看react更新日志（），查看最新版本号，目前是16.13.0

然后输入命令行：【cnpm install --save react@16.13.0 react-dom@16.13.0】

注意：旧版 Icon 使用方式将被废弃，旧代码可能会出现下面的错误“Attempted import error: Icon is not exported from antd.”

可以先把Icon的使用代码给去掉，然后再参照官网进行修改。

仍然可以通过兼容包继续使用Icon：import { Icon } from @ant-design/compatible;

如果启动的时候报错，可以把 node_modules 删掉，再重新安装。

如果用到的组件比较多，还有部分在4.X新版本需要重构的，那么可以用下面的命令进行升级（这种还未亲测过，有机会再试）：