Fix table memory leak1

docs/table/demo/resize.md

@@ -15,7 +15,7 @@ Resize the column by onResizeChange.
 ---
 
 ````jsx
-import { Table } from '@alifd/next';
+import { Table, Button } from '@alifd/next';
 
 const onChange = function(...args) {
         console.log(...args);
@@ -60,17 +60,27 @@ class App extends React.Component {
         });
     }
     render() {
-        const { widths } = this.state;
+        const { widths, loading } = this.state;
         const time = widths.time;
         const name = widths[`title.name`];
 
-        return (<Table dataSource={dataSource()}
-            rowSelection={rowSelection} onResizeChange={this.onResizeChange}>
-            <Table.Column lock title="Id" dataIndex="id" width={100}/>
-            <Table.Column title="Title" dataIndex={'title.name'} asyncResizable width={name}/>
-            <Table.Column title="Time" dataIndex="time" asyncResizable width={time}/>
-            <Table.Column cell={render} width={200}/>
-        </Table>);
+        return (
+            <React.Fragment>
+               <Button 
+                    onClick={() => {
+                        this.setState({ loading: !loading });
+                }}>
+                    toggle loading
+                </Button>
+                <Table loading={loading} dataSource={dataSource()}
+                rowSelection={rowSelection} onResizeChange={this.onResizeChange}>
+                    <Table.Column lock title="Id" dataIndex="id" width={100}/>
+                    <Table.Column title="Title" dataIndex={'title.name'} asyncResizable width={name}/>
+                    <Table.Column title="Time" dataIndex="time" asyncResizable width={time}/>
+                    <Table.Column cell={render} width={200}/>
+                </Table>
+            </React.Fragment>
+        );
     }
 }
 

package.json

@@ -110,7 +110,6 @@
     "react-lifecycles-compat": "^3.0.4",
     "react-transition-group": "^2.2.1",
     "resize-observer-polyfill": "^1.5.1",
-    "semver": "^7.3.5",
     "shallow-element-equals": "^1.0.1"
   },
   "devDependencies": {

src/table/base-pre.jsx

@@ -1,55 +1,34 @@
 import React from 'react';
 import Loading from '../loading';
-import BodyComponent from './base/body';
-import HeaderComponent from './base/header';
-import WrapperComponent from './base/wrapper';
-import RowComponent from './base/row';
-import CellComponent from './base/cell';
-import FilterComponent from './base/filter';
-import SortComponent from './base/sort';
-import Column from './column';
-import ColumnGroup from './column-group';
 import Table from './base';
 import { statics } from './util';
 
 function HOC(WrappedComponent) {
     class PreTable extends React.Component {
-        static Column = Column;
-        static ColumnGroup = ColumnGroup;
-        static Header = HeaderComponent;
-        static Body = BodyComponent;
-        static Wrapper = WrapperComponent;
-        static Row = RowComponent;
-        static Cell = CellComponent;
-        static Filter = FilterComponent;
-        static Sort = SortComponent;
         render() {
-            const { prefix, forwardedRef, loadingComponent, loading, ...others } = this.props;
+            const { prefix, loadingComponent, loading, ...others } = this.props;
             const LComponent = loadingComponent || Loading;
             if (loading) {
                 const loadingClassName = `${prefix}table-loading`;
                 return (
                     <LComponent className={loadingClassName}>
-                        <WrappedComponent ref={forwardedRef} loading={loading} {...others} />
+                        <WrappedComponent {...others} />
                     </LComponent>
                 );
             } else {
-                return <WrappedComponent ref={forwardedRef} loading={loading} {...others} />;
+                return <WrappedComponent {...others} />;
             }
         }
     }
 
-    // 当前版本大于 16.6.3 （有forwardRef的那个版本）
-    if (typeof React.forwardRef === 'function') {
-        const HocTable = React.forwardRef((props, ref) => {
-            return <PreTable {...props} forwardedRef={ref} />;
-        });
-        statics(HocTable, WrappedComponent);
-        return HocTable;
-    }
-
-    statics(PreTable, WrappedComponent);
-    // 对于没有低版本用户来说，获取底层Table的ref，可以通过 forwardedRef 这个props获取
+    statics(PreTable, WrappedComponent, [
+        // 'defaultProps',
+        'propTypes',
+        'childContextTypes',
+        'contextTypes',
+        'displayName',
+        'getDerivedStateFromProps',
+    ]);
     return PreTable;
 }
 

src/table/base.jsx

@@ -587,7 +587,7 @@ class Table extends React.Component {
                             colGroup={colGroup}
                             className={`${prefix}table-header`}
                             filterParams={filterParams}
-                            tableEl={this.tableEl}
+                            tableEl={this.state.tableEl}
                             columns={groupChildren}
                             locale={locale}
                             headerCellRef={this.getHeaderCellRef}
@@ -619,7 +619,7 @@ class Table extends React.Component {
                         cellRef={this.getCellRef}
                         onRowClick={onRowClick}
                         expandedIndexSimulate={expandedIndexSimulate}
-                        tableEl={this.tableEl}
+                        tableEl={this.state.tableEl}
                         onRowMouseEnter={onRowMouseEnter}
                         onRowMouseLeave={onRowMouseLeave}
                         dataSource={dataSource}
@@ -766,7 +766,11 @@ class Table extends React.Component {
     };
 
     getTableEl = ref => {
-        this.tableEl = ref;
+        if (ref) {
+            this.setState({
+                tableEl: ref,
+            });
+        }
     };
 
     render() {
@@ -832,16 +836,12 @@ class Table extends React.Component {
             <div
                 className={cls}
                 style={style}
-                ref={ref || this.getTableEl}
+                ref={this.getTableEl}
                 {...obj.pickOthers(Object.keys(Table.propTypes), others)}
             >
                 {table}
             </div>
         );
-        // if (loading) {
-        //     const loadingClassName = `${prefix}table-loading`;
-        //     return <LoadingComponent className={loadingClassName}>{content}</LoadingComponent>;
-        // }
         return content;
     }
 }

src/table/util.js

@@ -9,9 +9,9 @@ const blackList = [
     'getDerivedStateFromProps',
 ];
 
-export const statics = (Target, Component) => {
+export const statics = (Target, Component, selfBlackList) => {
     Object.keys(Component).forEach(property => {
-        if (blackList.indexOf(property) === -1) {
+        if ((selfBlackList || blackList).indexOf(property) === -1) {
             Target[property] = Component[property];
         }
     });