---
order: 8
title: 从 0.5 到 0.7
---

本文档将帮助你从 dpl `0.5.x` (antd `3.x`) 版本升级到 dpl `0.7.x` (antd `4.x`) 版本。

## 升级准备

1. 升级项目 React 16.12.0 以上。
   - 如果你仍在使用 React 15，请参考 [React 16 升级文档](https://reactjs.org/blog/2017/09/26/react-v16.0.html#breaking-changes)。
   - 其余 React 16 废弃生命周期 API 请参考 [迁移导引](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#gradual-migration-path)。

## 0.7.x 有哪些不兼容的变化

### 兼容性调整

- IE 最低支持版本为 IE 11。
- React 最低支持版本为 React 16.9，部分组件开始使用 hooks 进行重构。
  - 重构通过 `useMemo` 进行性能优化，请勿使用 mutable data 作为参数。

#### 移除废弃的 API

- 移除了 LocaleProvider，请使用 `ConfigProvider` 替代。
- 移除了 Mention，请使用 `Mentions` 替代。
- 移除了 Alert 的 `iconType` 属性，请使用 `icon` 替代。
- 移除了 Modal.xxx 的 `iconType` 属性，请使用 `icon` 替代。
- 移除了 Form.create 方法，`form` 现可由 `Form.useForm` 获取。
- 移除了 Form.Item 的 `id` 属性，请使用 `htmlFor` 替代。
- 移除了 Typography 的 `setContentRef` 属性，请使用 `ref` 替代。
- 移除了 TimePicker 的 `allowEmpty` 属性，请使用 `allowClear` 替代。
- 移除了 Tag 的 `afterClose` 属性，请使用 `onClose` 替代。
- 移除了 Card 的 `noHovering` 属性，请使用 `hoverable` 替代。
- 移除了 Carousel 的 `vertical` 属性，请使用 `dotPosition` 替代。
- 移除了 Drawer 的 `wrapClassName` 属性，请使用 `className` 替代。
- 移除了 TextArea 的 `autosize` 属性，请使用 `autoSize` 替代。
- 移除了 Affix 的 `offset` 属性，请使用 `offsetTop` 替代。
- 移除了 Transfer 的 `onSearchChange` 属性，请使用 `onSearch` 替代。
- 移除了 Transfer 的 `body` 属性，请使用 `children` 替代。
- 移除了 Transfer 的 `lazy` 属性，它并没有起到真正的优化效果。
- 移除了 Select 的 `combobox` 模式，请使用 `AutoComplete` 替代。
- 移除了 Table 的 `rowSelection.hideDefaultSelections` 属性，请在 `rowSelection.selections` 中使用 `SELECTION_ALL` 和 `SELECTION_INVERT` 替代，[自定义选择项](/components/table/#components-table-demo-row-selection-custom)。
- 废弃 Button.Group，请使用 `Space` 代替。

#### 图标升级

在 `antd@3.9.0` 中，antd引入了 svg 图标。

旧版 Icon 使用方式将被废弃：

```jsx
import { Button } from 'antd';

const Demo = () => (
  <div>
    <Button icon="link" />
  </div>
);
```

4.0 中会采用按需引入的方式：

```diff
  import { Button, Icon } from 'antd';

  const Demo = () => (
    <div>
      <Button icon={<Icon type='link'/>} />
    </div>
  );
```

#### 组件重构

- Form 重写
  - 不再需要 `Form.create`。
  - 嵌套字段支持从 `'xxx.yyy'` 改成 `['xxx', 'yyy']`。
  - 迁移文档请查看[此处](/docs/react/v3-cn)。
- DatePicker 重写
  - 提供 `picker` 属性用于选择器切换。
  - 范围选择现在可以单独选择开始和结束时间。
  - `onPanelChange` 在面板值变化时也会触发。
  - `自定义单元格样式` 的类名从 `ant-calendar-date` 改为 `ant-picker-cell-inner`。
- Tree、Select、TreeSelect、AutoComplete 重新写
  - 使用虚拟滚动。
  - `onBlur` 时不再修改选中值，且返回 React 原生的 `event` 对象。
  - AutoComplete 不再支持 `optionLabelProp`，请直接设置 Option `value` 属性。
  - Select 移除 `dropdownMenuStyle` 属性。
  - 如果你需要设置弹窗高度请使用 `listHeight` 来代替 `dropdownStyle` 的高度样式。
  - `filterOption` 第二个参数直接返回原数据，不在需要通过 `option.props.children` 来进行匹配。
  - Tree、TreeSelect 同时指定 `title` 和 `label` 的时候，会选择显示 `label`。为了 `labelInValue` 行为一致进行了该调整。[新行为](https://codesandbox.io/s/keen-curran-d3qnp)（在第一个节点展示 'label'），[旧行为](https://codesandbox.io/s/muddy-darkness-57lb3)（在第一个节点展示 'title'）。
- Grid 组件使用 flex 布局。
- Button 的 `danger` 现在作为一个属性而不是按钮类型。
- Input、Select 的 `value` 为 `undefined` 时改为非受控状态。
- Table 重写
  - 在没有 `columns` 时仍然会保留一列。
  - 嵌套 `dataIndex` 支持从 `'xxx.yyy'` 改成 `['xxx', 'yyy']`。
- Pagination 自 `4.1.0` 起大于 50 条数据默认会展示 `pageSize` 切换器，这条规则同样会运用于 Table 上。
- Tabs 重写（[4.3.0](https://github.com/ant-design/ant-design/pull/24552)）
  - Dom 结构变化，如有覆盖样式需要仔细检查。
  - 横向滚动交互变化，`onPrevClick` 和 `onNextClick` 不再工作。

```diff
<Table
  columns={[
    {
      title: 'Age',
-     dataIndex: 'user.age',
+     dataIndex: ['user', 'age'],
    },
  ]}
/>
```

## 开始升级

- 执行`yarn upgrade @enso/dpl@latest`升级到最新版
- 检查less和less-loader的版本，并修改打包配置
  - 升级版本
    ```bash
    yarn upgrade less-loader@^4.1.0 less@^3.9.0
    ```
  - webpack配置修改
    less-loader处，新增`options: {javascriptEnabled: true}`
- 修改Form相关代码
  - 替换 `import { Form } from ‘@enos/dpl’`   =>  `import { LegacyForm as Form } from '@enos/dpl'`
  - 替换 `import {FormComponentProps} from 'antd/lib/form'`  => `import {FormComponentProps} from '@enos/dpl/lib/legacy-form'`
  - 替换 `import {WrappedFormUtils} from 'antd/lib/form/Form'` => `import {WrappedFormUtils} from '@ant-design/compatible/lib/form/Form`
  - 项目所有含有`ant-form`的样式定制 统一替换成  `ant-legacy-form`,  如 `.ant-form-explain` 替换为 `.ant-legacy-form-explain`
- Button的`danger`类型没了，常用的地方是删除按钮的二次确认框，需要做替换
  `Modal.confirm({okType: 'danger})` => `Modal.confirm({okButtonProps: {dange: true}})`
- Button  icon 属性  由 string -> ReactNode 需要替换成Icon标签 (注意: string类型引用的图标为antd内置图标， 换成 Icon标签引入的是Enos图标，所以不要简单的进行同名替换)
- 用到table的地方，都需要特别关注下切换页数会不会有问题（pagination超过50条默认展示pageSize切换器）
- 用到tabs，grid组件的地方，需要特别关注下样式，尤其是之前有基于他们做了自定义样式的地方