antd(3.x) table 数据量大时，批量全选卡顿

问题：antd（3.x） table 数据量大时，批量全选卡顿。

解决方案：
使用react-window的VariableSizeGrid组件结合antd table的Api（components.body.wrapper）,将tbody以虚拟列表的方案渲染。
注意：需要结合rc-resize-observer监听宽度变化来处理宽度变化业务。

import { VariableSizeGrid as Grid } from "react-window";
import ResizeObserver from "rc-resize-observer";

1、tbody渲染虚拟列表方法

renderVirtualList = rawData => {
    const { children } = rawData;
    const { width } = this.state; // 通过rc-resize-observer监听到的宽度
    return (
      <Grid
        columnCount={1}
        columnWidth={() => {
          return width;
        }}
        rowCount={children.length}
        rowHeight={() => 95}
        width={width}
        height={475}
      >
        {({ rowIndex, style }) => {
          return (
            <div
              style={{
                ...style,
                width,
              }}
            >
              <table>
                <colgroup>
                  <col style={{ width: 60, minWidth: 60 }} />
                  <col style={{ width: 200, minWidth: 200 }} />
                  <col style={{ width: 110, minWidth: 110 }} />
                  <col />
                  <col />
                  <col style={{ width: 110, minWidth: 110 }} />
                  <col style={{ width: 110, minWidth: 110 }} />
                  <col />
                </colgroup>
                <tbody className="ant-table-tbody">{children[rowIndex]}</tbody>
              </table>
            </div>
          );
        }}
      </Grid>
    );
  };

2、宽度变化方法

  onResize = ({ width }) => {
    this.setState({
      width,
    });
  };

3、组件render

render(){
	const { onResize, renderVirtualList } = this;
	return (
		<ResizeObserver onResize={onResize}>
			<Table 
				// ... props,
				components={{
					body: {
						wrapper: renderVirtualList
					}
				}}
			/>
		</ResizeObserver>
	)
}

虚拟列表渲染时（为了偷懒）避免重写css，就直接以table包裹渲染children（可优化点）。

不喜勿喷 ~ ~ ~