File size: 1,942 Bytes
c9d0005 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | ---
order: 0
mobile: false
group:
title: 其他
order: 5
---
# V2 升级方案
本文档将帮助你从 1.x 升级到 2.x 版本
## 特性
全新的 table-render 2.0 主要具备以下特性：
- 🚀 **更好的搜索性能**：解决了单页列表数据过多，表格搜索严重卡顿的问题
- 🎨 **更简单的使用方式**：使用时不在需要导出 Search, Table, useTable, withTable 对象，统一导出默认对象 default(TableRender)即可
- 🚥 **国际化**：国际化多语言支持，内置中英文语言包，英文版 locale: 'en-US'
- 💎 **Antd V5**：兼容 antd V5 版本，无需配置
## 有哪些不兼容的变化
#### 导出实例变更
```diff
- import { Search, Table, useTable, withTable } from 'table-render';
- const Demo = () => {
- return (
- <div>
- <Search {...searchProps} />
- <Table {...tableProps}/>
- </div>
- );
- }
- export default withTable(Demo);
+ import TableRender form 'table-render';
+ const Demo = () => {
+ return (
+ <TableRender
+ search={{
+ ...searchProps
+ }}
+ {...tableProps}
+ />
+ )
+ }
+ export default Demo;
```
#### 废弃 useTable，改用 ref 获取
tableState、setTable 移除，改用 getState()、setState()
```diff
- import { Search, Table, useTable, withTable } from 'table-render';
- const { refresh } = useTable();
+ import React, { useRef } from 'react';
+ const tableRef = useRef(); // tableRef.current = { refresh, changeTab, form, getState }
+ <TableRender
+ ref={tableRef}
+ />
```
#### api 移入到 tableProps 里面 变成 request
返回参数 rows 改成 data
```diff
const api = (params, sorter) => {
return {
data: [],
total: 10
}
};
- <div>
- <Search api={api} />
- <Table {...tableProps}/>
- </div>
+ <TableRender
+ search={{
+ ...searchProps
+ }}
+ request={api}
+ {...tableProps}
+ />
```
#### headTitle 变更成 title |