CRUD 性能优化

package.json

@@ -46,7 +46,7 @@
     "keycode": "^2.1.9",
     "lodash": "^4.17.15",
     "match-sorter": "2.2.1",
-    "mobx": "^4.5.0 && <= 4.15.4",
+    "mobx": "^4.5.0",
     "mobx-react": "^6.1.4",
     "mobx-state-tree": "^3.7.0",
     "moment": "^2.19.3",

src/index.tsx

@@ -117,7 +117,7 @@ import './renderers/Page';
 import './renderers/Panel';
 import './renderers/Plain';
 import './renderers/Spinner';
-import './renderers/Table';
+import './renderers/Table/index';
 import './renderers/Tabs';
 import './renderers/Tpl';
 import './renderers/Mapping';

src/renderers/Form/index.tsx

@@ -34,6 +34,8 @@ import {LazyComponent} from '../../components';
 import {isAlive} from 'mobx-state-tree';
 import {asFormItem} from './Item';
 import {SimpleMap} from '../../utils/SimpleMap';
+import {trace} from 'mobx';
+
 export type FormGroup = FormSchema & {
   title?: string;
   className?: string;
@@ -92,6 +94,7 @@ export interface FormProps extends RendererProps, FormSchema {
   clearPersistDataAfterSubmit: boolean; // 提交成功后清空本地缓存
   trimValues?: boolean;
   lazyLoad?: boolean;
+  simpleMode?: boolean;
   onInit?: (values: object, props: any) => any;
   onReset?: (values: object) => void;
   onSubmit?: (values: object, action: any) => any;
@@ -163,7 +166,8 @@ export default class Form extends React.Component<FormProps, object> {
     'lazyChange',
     'formLazyChange',
     'lazyLoad',
-    'formInited'
+    'formInited',
+    'simpleMode'
   ];
 
   hooks: {
@@ -201,11 +205,15 @@ export default class Form extends React.Component<FormProps, object> {
   }
 
   componentWillMount() {
-    const {store, canAccessSuperData, persistData} = this.props;
+    const {store, canAccessSuperData, persistData, simpleMode} = this.props;
 
     store.setCanAccessSuperData(canAccessSuperData !== false);
     persistData && store.getPersistData();
 
+    if (simpleMode) {
+      store.setInited(true);
+    }
+
     if (
       store &&
       store.parentStore &&
@@ -1165,6 +1173,9 @@ export default class Form extends React.Component<FormProps, object> {
       translate: __
     } = this.props;
 
+    // trace(true);
+    // console.log('Form');
+
     let body: JSX.Element = this.renderBody();
 
     if (wrapWithPanel) {

src/renderers/QuickEdit.tsx

@@ -467,6 +467,7 @@ export const HocQuickEdit = (config: Partial<QuickEditConfig> = {}) => (
               wrapperComponent: 'div',
               className: cx('Form--quickEdit'),
               ref: this.formRef,
+              simpleMode: true,
               onInit: this.handleInit,
               onChange: this.handleChange
             })}

src/renderers/Table/index.tsx

@@ -1,15 +1,13 @@
 import React from 'react';
 import {findDOMNode} from 'react-dom';
 import {Renderer, RendererProps} from '../../factory';
-import {SchemaNode, Action, Schema, Api, ApiObject} from '../../types';
+import {SchemaNode, Action, Schema} from '../../types';
 import forEach from 'lodash/forEach';
 import {filter} from '../../utils/tpl';
-import cx from 'classnames';
 import DropDownButton from '../DropDownButton';
 import Checkbox from '../../components/Checkbox';
 import Button from '../../components/Button';
 import {TableStore, ITableStore, IColumn, IRow} from '../../store/table';
-import {observer} from 'mobx-react';
 import {
   anyChanged,
   getScrollParent,
@@ -19,23 +17,10 @@ import {
   isArrayChildrenModified
 } from '../../utils/helper';
 import {resolveVariable} from '../../utils/tpl-builtin';
-import {
-  isEffectiveApi,
-  isApiOutdated,
-  buildApi,
-  normalizeApi
-} from '../../utils/api';
 import debounce from 'lodash/debounce';
-import xor from 'lodash/xor';
-import QuickEdit from '../QuickEdit';
-import PopOver from '../../components/PopOver';
-import Copyable from '../Copyable';
 import Sortable from 'sortablejs';
-import flatMap from 'lodash/flatMap';
 import {resizeSensor} from '../../utils/resize-sensor';
 import find from 'lodash/find';
-import Overlay from '../../components/Overlay';
-import PopOverable from '../PopOver';
 import {Icon} from '../../components/icons';
 import {TableCell} from './TableCell';
 import {TableRow} from './TableRow';
@@ -1224,7 +1209,6 @@ export default class Table extends React.Component<TableProps, object> {
       render,
       store,
       multiple,
-      env,
       classPrefix: ns,
       classnames: cx,
       checkOnItemClick,
@@ -1397,19 +1381,7 @@ export default class Table extends React.Component<TableProps, object> {
     headerOnly: boolean = false,
     tableClassName: string = ''
   ) {
-    const {
-      rowClassName,
-      rowClassNameExpr,
-      placeholder,
-      store,
-      onAction,
-      buildItemProps,
-      classnames: cx,
-      classPrefix: ns,
-      checkOnItemClick,
-      render,
-      data
-    } = this.props;
+    const {placeholder, store, classnames: cx, render, data} = this.props;
     const hideHeader = store.filteredColumns.every(column => !column.label);
 
     return (
@@ -1473,7 +1445,7 @@ export default class Table extends React.Component<TableProps, object> {
     );
   }
 
-  renderToolbar(toolbar: SchemaNode, index: number) {
+  renderToolbar(toolbar: SchemaNode) {
     const type = (toolbar as Schema).type || (toolbar as string);
 
     if (type === 'columns-toggler') {
@@ -1931,15 +1903,7 @@ export default class Table extends React.Component<TableProps, object> {
   }
 
   render() {
-    const {
-      className,
-      store,
-      placeholder,
-      classnames: cx,
-      affixColumns,
-      data,
-      render
-    } = this.props;
+    const {className, store, classnames: cx, affixColumns} = this.props;
 
     this.renderedToolbars = []; // 用来记录哪些 toolbar 已经渲染了，已经渲染了就不重复渲染了。
     const heading = this.renderHeading();