chore: 优化 Table 渲染性能

2024-11-29 18:48:45 +08:00 · 2023-09-06 16:00:44 +08:00 · 2023-09-06 16:00:44 +08:00 · fd93dedf2f
commit fd93dedf2f
parent df59d92a4d
25 changed files with 865 additions and 526 deletions
--- a/docs/zh-CN/components/table.md
+++ b/docs/zh-CN/components/table.md
@ -1845,6 +1845,7 @@ popOver 的其它配置请参考 [popover](./popover)
 | resizable        | `boolean`                                                | `true`                    | 列宽度是否支持调整                                                        |                                   |
 | selectable       | `boolean`                                                | `false`                   | 支持勾选                                                                  |                                   |
 | multiple         | `boolean`                                                | `false`                   | 勾选 icon 是否为多选样式`checkbox`， 默认为`radio`                        |                                   |
+| lazyRenderAfter  | `number`                                                 | `100`                     | 用来控制从第几行开始懒渲染行，用来渲染大表格时有用                        |                                   |

 ### 列配置属性表

--- a/mock/cfc/mock/sample.db.js
+++ b/mock/cfc/mock/sample.db.js
@ -1,4 +1,4 @@
-module.exports = [
+const list = [
  {
    engine: 'Trident',
    browser: 'Internet Explorer 4.0',
@ -1202,7 +1202,20 @@ module.exports = [
    version: '-',
    grade: 'U'
  }
-].map(function (item, index) {
+];
+
+// 多来点测试数据
+module.exports = list
+  .concat(list)
+  .concat(list)
+  .concat(list)
+  .concat(list)
+  .concat(list)
+  .concat(list)
+  .concat(list)
+  .concat(list)
+  .concat(list)
+  .map(function (item, index) {
    return Object.assign({}, item, {
      id: index + 1
    });
--- a/packages/amis-core/tests/helper.tsx
+++ b/packages/amis-core/tests/helper.tsx
@ -57,3 +57,22 @@ export const createMockMediaMatcher =
      return true;
    }
  });
+
+// Mock IntersectionObserver
+class IntersectionObserver {
+  observe = jest.fn();
+  disconnect = jest.fn();
+  unobserve = jest.fn();
+}
+
+Object.defineProperty(window, 'IntersectionObserver', {
+  writable: true,
+  configurable: true,
+  value: IntersectionObserver
+});
+
+Object.defineProperty(global, 'IntersectionObserver', {
+  writable: true,
+  configurable: true,
+  value: IntersectionObserver
+});
--- a/packages/amis-core/package.json
+++ b/packages/amis-core/package.json
@ -46,7 +46,7 @@
    "esm"
  ],
  "dependencies": {
-    "amis-formula": "^3.4.0",
+    "amis-formula": "*",
    "classnames": "2.3.2",
    "file-saver": "^2.0.2",
    "hoist-non-react-statics": "^3.3.2",
@ -58,8 +58,8 @@
    "moment": "^2.19.4",
    "papaparse": "^5.3.0",
    "qs": "6.9.7",
+    "react-intersection-observer": "9.5.2",
    "react-json-view": "1.21.3",
-    "react-visibility-sensor": "5.1.1",
    "tslib": "^2.3.1",
    "uncontrollable": "7.2.1"
  },
--- a/packages/amis-core/src/SchemaRenderer.tsx
+++ b/packages/amis-core/src/SchemaRenderer.tsx
@ -440,14 +440,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
      exprProps = {};
    }

-    // style 支持公式
-    if (schema.style) {
-      // schema.style是readonly属性
-      schema = {...schema, style: buildStyle(schema.style, detectData)};
-    }
-
    const isClassComponent = Component.prototype?.isReactComponent;
-    const $schema = {...schema, ...exprProps};
    let props = {
      ...theme.getRendererConfig(renderer.name),
      ...restSchema,
@ -459,7 +452,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
      defaultActiveKey: defaultActiveKey,
      propKey: propKey,
      $path: $path,
-      $schema: $schema,
+      $schema: schema,
      ref: this.refFn,
      render: this.renderChild,
      rootStore,
@ -468,6 +461,11 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {
      mobileUI: schema.useMobileUI === false ? false : rest.mobileUI
    };

+    // style 支持公式
+    if (schema.style) {
+      (props as any).style = buildStyle(schema.style, detectData);
+    }
+
    if (disable !== undefined) {
      (props as any).disabled = disable;
    }
@ -478,7 +476,7 @@ export class SchemaRenderer extends React.Component<SchemaRendererProps, any> {

    // 自动解析变量模式，主要是方便直接引入第三方组件库，无需为了支持变量封装一层
    if (renderer.autoVar) {
-      for (const key of Object.keys($schema)) {
+      for (const key of Object.keys(schema)) {
        if (typeof props[key] === 'string') {
          props[key] = resolveVariableAndFilter(
            props[key],
--- a/packages/amis-core/src/components/LazyComponent.tsx
+++ b/packages/amis-core/src/components/LazyComponent.tsx
@ -5,7 +5,7 @@
 */

 import React from 'react';
-import VisibilitySensor from 'react-visibility-sensor';
+import {InView} from 'react-intersection-observer';

 export interface LazyComponentProps {
  component?: React.ElementType;
@ -13,7 +13,6 @@ export interface LazyComponentProps {
  placeholder?: React.ReactNode;
  unMountOnHidden?: boolean;
  childProps?: object;
-  visiblilityProps?: object;
  [propName: string]: any;
 }

@ -56,7 +55,7 @@ export default class LazyComponent extends React.Component<
    this.mounted = false;
  }

-  handleVisibleChange(visible: boolean) {
+  handleVisibleChange(visible: boolean, entry?: any) {
    this.setState({
      visible: visible
    });
@ -91,7 +90,6 @@ export default class LazyComponent extends React.Component<
      placeholder,
      unMountOnHidden,
      childProps,
-      visiblilityProps,
      partialVisibility,
      children,
      ...rest
@ -102,12 +100,16 @@ export default class LazyComponent extends React.Component<
    // 需要监听从可见到不可见。
    if (unMountOnHidden) {
      return (
-        <VisibilitySensor
-          {...visiblilityProps}
-          partialVisibility={partialVisibility}
+        <InView
          onChange={this.handleVisibleChange}
+          threshold={partialVisibility ? 0 : 1}
+        >
+          {({ref}) => {
+            return (
+              <div
+                ref={ref}
+                className={`visibility-sensor ${visible ? 'in' : ''}`}
              >
-          <div className="visibility-sensor">
                {Component && visible ? (
                  <Component {...rest} {...childProps} />
                ) : children && visible ? (
@ -116,19 +118,24 @@ export default class LazyComponent extends React.Component<
                  placeholder
                )}
              </div>
-        </VisibilitySensor>
+            );
+          }}
+        </InView>
      );
    }

    if (!visible) {
      return (
-        <VisibilitySensor
-          {...visiblilityProps}
-          partialVisibility={partialVisibility}
+        <InView
          onChange={this.handleVisibleChange}
+          threshold={partialVisibility ? 0 : 1}
        >
-          <div className="visibility-sensor">{placeholder}</div>
-        </VisibilitySensor>
+          {({ref}) => (
+            <div ref={ref} className="visibility-sensor">
+              {placeholder}
+            </div>
+          )}
+        </InView>
      );
    } else if (Component) {
      // 只监听不可见到可见，一旦可见了，就销毁检查。
--- a/packages/amis-core/src/renderers/wrapControl.tsx
+++ b/packages/amis-core/src/renderers/wrapControl.tsx
@ -3,7 +3,7 @@ import {IFormStore, IFormItemStore} from '../store/form';
 import debouce from 'lodash/debounce';
 import isEqual from 'lodash/isEqual';

-import {RendererProps, Renderer} from '../factory';
+import {RendererProps, Renderer, getRendererByName} from '../factory';
 import {ComboStore, IComboStore, IUniqueGroup} from '../store/combo';
 import {
  anyChanged,
@ -32,7 +32,7 @@ import {FormBaseControl, FormItemWrap} from './Item';
 import {Api} from '../types';
 import {TableStore} from '../store/table';
 import pick from 'lodash/pick';
-import {callStrFunction} from '../utils';
+import {callStrFunction, changedEffect} from '../utils';

 export interface ControlOutterProps extends RendererProps {
  formStore?: IFormStore;
@ -121,6 +121,8 @@ export function wrapControl<
              onChange,
              data,
              inputGroupControl,
+              colIndex,
+              rowIndex,
              $schema: {
                name,
                id,
@ -154,17 +156,14 @@ export function wrapControl<
            this.setPrinstineValue = this.setPrinstineValue.bind(this);
            this.controlRef = this.controlRef.bind(this);
            this.handleBlur = this.handleBlur.bind(this);
+            this.validate = this.validate.bind(this);
+            this.flushChange = this.flushChange.bind(this);

            if (!name) {
              // 一般情况下这些表单项都是需要 name 的，提示一下
              if (
                typeof type === 'string' &&
-                (type.startsWith('input-') ||
-                  type.endsWith('select') ||
-                  type === 'switch' ||
-                  type === 'textarea' ||
-                  type === 'radios') &&
-                type !== 'input-group'
+                getRendererByName(type)?.isFormItem
              ) {
                console.warn('name is required', this.props.$schema);
              }
@ -178,7 +177,9 @@ export function wrapControl<
              path: this.props.$path,
              storeType: FormItemStore.name,
              parentId: store?.id,
-              name
+              name,
+              colIndex: colIndex !== undefined ? colIndex : undefined,
+              rowIndex: rowIndex !== undefined ? rowIndex : undefined
            }) as IFormItemStore;
            this.model = model;
            // @issue 打算干掉这个
@ -226,6 +227,7 @@ export function wrapControl<
            if (propValue !== undefined && propValue !== null) {
              // 同步 value: 优先使用 props 中的 value
              model.changeTmpValue(propValue, 'controlled');
+              model.setIsControlled(true);
            } else {
              const isExp = isExpression(value);

@ -332,12 +334,10 @@ export function wrapControl<

          componentDidUpdate(prevProps: OuterProps) {
            const props = this.props;
-            const form = props.formStore;
            const model = this.model;

-            if (
            model &&
-              anyChanged(
+              changedEffect(
                [
                  'id',
                  'validations',
@ -362,34 +362,17 @@ export function wrapControl<
                  'extraName'
                ],
                prevProps.$schema,
-                props.$schema
-              )
-            ) {
+                props.$schema,
+                changes => {
                  model.config({
-                required: props.$schema.required,
-                id: props.$schema.id,
-                unique: props.$schema.unique,
-                value: props.$schema.value,
+                    ...changes,
+
+                    // todo 优化后面两个
                    isValueSchemaExp: isExpression(props.$schema.value),
-                rules: props.$schema.validations,
-                multiple: props.$schema.multiple,
-                delimiter: props.$schema.delimiter,
-                valueField: props.$schema.valueField,
-                labelField: props.$schema.labelField,
-                joinValues: props.$schema.joinValues,
-                extractValue: props.$schema.extractValue,
-                messages: props.$schema.validationErrors,
-                selectFirst: props.$schema.selectFirst,
-                autoFill: props.$schema.autoFill,
-                clearValueOnHidden: props.$schema.clearValueOnHidden,
-                validateApi: props.$schema.validateApi,
-                minLength: props.$schema.minLength,
-                maxLength: props.$schema.maxLength,
-                label: props.$schema.label,
-                inputGroupControl: props?.inputGroupControl,
-                extraName: props.$schema.extraName
-              });
+                    inputGroupControl: props?.inputGroupControl
+                  } as any);
                }
+              );

            // 此处需要同时考虑 defaultValue 和 value
            if (model && typeof props.value !== 'undefined') {
@ -605,13 +588,16 @@ export function wrapControl<
              result = [await this.model.validate(data)];
            }

-            if (result && result.length) {
-              if (result.indexOf(false) > -1) {
-                formItemDispatchEvent('formItemValidateError', data);
-              } else {
-                formItemDispatchEvent('formItemValidateSucc', data);
-              }
+            const valid = !result.some(item => item === false);
+            formItemDispatchEvent?.(
+              valid ? 'formItemValidateSucc' : 'formItemValidateError',
+              data
+            );
+            return valid;
          }
+
+          flushChange() {
+            this.lazyEmitChange.flush();
          }

          handleChange(
@ -862,6 +848,8 @@ export function wrapControl<
              getValue: this.getValue,
              prinstine: model ? model.prinstine : undefined,
              setPrinstineValue: this.setPrinstineValue,
+              onValidate: this.validate,
+              onFlushChange: this.flushChange,
              // !没了这个， tree 里的 options 渲染会出问题
              _filteredOptions: this.model?.filteredOptions
            };
--- a/packages/amis-core/src/store/crud.ts
+++ b/packages/amis-core/src/store/crud.ts
@ -117,26 +117,27 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
      replace: boolean = false
    ) {
      const originQuery = self.query;
-      self.query = replace
+      const query: any = replace
        ? {
            ...values
          }
        : {
-            ...self.query,
+            ...originQuery,
            ...values
          };

-      if (self.query[pageField || 'page']) {
-        self.page = parseInt(self.query[pageField || 'page'], 10);
+      if (isObjectShallowModified(originQuery, query, false)) {
+        if (query[pageField || 'page']) {
+          self.page = parseInt(query[pageField || 'page'], 10);
        }

-      if (self.query[perPageField || 'perPage']) {
-        self.perPage = parseInt(self.query[perPageField || 'perPage'], 10);
+        if (query[perPageField || 'perPage']) {
+          self.perPage = parseInt(query[perPageField || 'perPage'], 10);
        }

-      updater &&
-        isObjectShallowModified(originQuery, self.query, false) &&
-        setTimeout(updater.bind(null, `?${qsstringify(self.query)}`), 4);
+        self.query = query;
+        updater && setTimeout(updater.bind(null, `?${qsstringify(query)}`), 4);
+      }
    }

    const fetchInitData: (
--- a/packages/amis-core/src/store/form.ts
+++ b/packages/amis-core/src/store/form.ts
@ -49,7 +49,7 @@ export const FormStore = ServiceStore.named('FormStore')
      while (pool.length) {
        const current = pool.shift()!;

-        if (current.storeType === 'FormItemStore') {
+        if (current.storeType === 'FormItemStore' && !current.isControlled) {
          formItems.push(current);
        } else if (
          !['ComboStore', 'TableStore', 'FormStore'].includes(current.storeType)
--- a/packages/amis-core/src/store/formItem.ts
+++ b/packages/amis-core/src/store/formItem.ts
@ -67,6 +67,7 @@ const getSelectedOptionsCache: any = {
 export const FormItemStore = StoreNode.named('FormItemStore')
  .props({
    isFocused: false,
+    isControlled: false, // 是否是受控表单项，通常是用在别的组件里面
    type: '',
    label: '',
    unique: false,
@ -107,7 +108,9 @@ export const FormItemStore = StoreNode.named('FormItemStore')
    resetValue: types.optional(types.frozen(), ''),
    validateOnChange: false,
    /** 当前表单项所属的InputGroup父元素, 用于收集InputGroup的子元素 */
-    inputGroupControl: types.optional(types.frozen(), {})
+    inputGroupControl: types.optional(types.frozen(), {}),
+    colIndex: types.frozen(),
+    rowIndex: types.frozen()
  })
  .views(self => {
    function getForm(): any {
@ -358,6 +361,7 @@ export const FormItemStore = StoreNode.named('FormItemStore')
        inputGroupControl?.name != null &&
        (self.inputGroupControl = inputGroupControl);

+      if (typeof rules !== 'undefined' || self.required) {
        rules = {
          ...rules,
          isRequired: self.required || rules?.isRequired
@ -381,6 +385,7 @@ export const FormItemStore = StoreNode.named('FormItemStore')
          self.validated = false;
        }
      }
+    }

    function focus() {
      self.isFocused = true;
@ -1334,6 +1339,10 @@ export const FormItemStore = StoreNode.named('FormItemStore')
      }
    }

+    function setIsControlled(value: any) {
+      self.isControlled = !!value;
+    }
+
    return {
      focus,
      blur,
@ -1359,7 +1368,8 @@ export const FormItemStore = StoreNode.named('FormItemStore')
      changeEmitedValue,
      addSubFormItem,
      removeSubFormItem,
-      loadAutoUpdateData
+      loadAutoUpdateData,
+      setIsControlled
    };
  });

--- a/packages/amis-core/src/store/root.ts
+++ b/packages/amis-core/src/store/root.ts
@ -1,7 +1,11 @@
 import {Instance, types} from 'mobx-state-tree';
 import {parseQuery} from '../utils/helper';
 import {ServiceStore} from './service';
-import {createObjectFromChain, extractObjectChain} from '../utils';
+import {
+  createObjectFromChain,
+  extractObjectChain,
+  isObjectShallowModified
+} from '../utils';

 export const RootStore = ServiceStore.named('RootStore')
  .props({
@ -42,7 +46,10 @@ export const RootStore = ServiceStore.named('RootStore')
      self.runtimeErrorStack = errorStack;
    },
    updateLocation(location?: any, parseFn?: Function) {
-      self.query = parseFn ? parseFn(location) : parseQuery(location);
+      const query = parseFn ? parseFn(location) : parseQuery(location);
+      if (isObjectShallowModified(query, self.query, false)) {
+        self.query = query;
+      }
    }
  }));

--- a/packages/amis-core/src/store/table.ts
+++ b/packages/amis-core/src/store/table.ts
@ -111,6 +111,7 @@ export const Row = types
    rowSpans: types.frozen({} as any),
    index: types.number,
    newIndex: types.number,
+    nth: 0,
    path: '', // 行数据的位置
    expandable: false,
    checkdisable: false,
@ -119,7 +120,9 @@ export const Row = types
      types.array(types.late((): IAnyModelType => Row)),
      []
    ),
-    depth: types.number // 当前children位于第几层，便于使用getParent获取最顶层TableStore
+    depth: types.number, // 当前children位于第几层，便于使用getParent获取最顶层TableStore
+    appeared: true,
+    lazyRender: false
  })
  .views(self => ({
    get checked(): boolean {
@ -321,6 +324,10 @@ export const Row = types
          index++;
        }
      }
+    },
+
+    markAppeared(value: any) {
+      value && (self.appeared = !!value);
    }
  }));

@ -344,6 +351,8 @@ export const TableStore = iRendererStore
      ),
      'asc'
    ),
+    loading: false,
+    canAccessSuperData: false,
    draggable: false,
    dragging: false,
    selectable: false,
@ -365,7 +374,8 @@ export const TableStore = iRendererStore
    keepItemSelectionOnPageChange: false,
    // 导出 Excel 按钮的 loading 状态
    exportExcelLoading: false,
-    searchFormExpanded: false // 用来控制搜索框是否展开了，那个自动根据 searchable 生成的表单 autoGenerateFilter
+    searchFormExpanded: false, // 用来控制搜索框是否展开了，那个自动根据 searchable 生成的表单 autoGenerateFilter
+    lazyRenderAfter: 100
  })
  .views(self => {
    function getColumnsExceptBuiltinTypes() {
@ -688,10 +698,12 @@ export const TableStore = iRendererStore
        return getUnSelectedRows();
      },

+      get falttenedRows() {
+        return flattenTree<IRow>(self.rows);
+      },
+
      get checkableRows() {
-        return flattenTree<IRow>(self.rows).filter(
-          (item: IRow) => item.checkable
-        );
+        return this.falttenedRows.filter((item: IRow) => item.checkable);
      },

      get expandableRows() {
@ -821,6 +833,10 @@ export const TableStore = iRendererStore
          style.right = right;
        }
        return [style, stickyClassName];
+      },
+
+      get items() {
+        return self.rows.concat();
      }
    };
  })
@ -832,46 +848,60 @@ export const TableStore = iRendererStore
    }

    function update(config: Partial<STableStore>) {
-      config.primaryField !== void 0 &&
+      config.primaryField !== undefined &&
        (self.primaryField = config.primaryField);
-      config.selectable !== void 0 && (self.selectable = config.selectable);
-      config.columnsTogglable !== void 0 &&
+      config.selectable !== undefined && (self.selectable = config.selectable);
+      config.columnsTogglable !== undefined &&
        (self.columnsTogglable = config.columnsTogglable);
-      config.draggable !== void 0 && (self.draggable = config.draggable);
+      config.draggable !== undefined && (self.draggable = config.draggable);

-      if (typeof config.orderBy === 'string') {
+      if (
+        typeof config.orderBy === 'string' ||
+        typeof config.orderDir === 'string'
+      ) {
        setOrderByInfo(
-          config.orderBy,
-          config.orderDir === 'desc' ? 'desc' : 'asc'
+          config.orderBy ?? self.orderBy,
+          config.orderDir !== undefined
+            ? config.orderDir === 'desc'
+              ? 'desc'
+              : 'asc'
+            : self.orderDir
        );
      }

-      config.multiple !== void 0 && (self.multiple = config.multiple);
-      config.footable !== void 0 && (self.footable = config.footable);
-      config.expandConfig !== void 0 &&
+      config.multiple !== undefined && (self.multiple = config.multiple);
+      config.footable !== undefined && (self.footable = config.footable);
+      config.expandConfig !== undefined &&
        (self.expandConfig = config.expandConfig);
-      config.itemCheckableOn !== void 0 &&
+      config.itemCheckableOn !== undefined &&
        (self.itemCheckableOn = config.itemCheckableOn);
-      config.itemDraggableOn !== void 0 &&
+      config.itemDraggableOn !== undefined &&
        (self.itemDraggableOn = config.itemDraggableOn);
-      config.hideCheckToggler !== void 0 &&
+      config.hideCheckToggler !== undefined &&
        (self.hideCheckToggler = !!config.hideCheckToggler);

-      config.combineNum !== void 0 &&
+      config.combineNum !== undefined &&
        (self.combineNum = parseInt(config.combineNum as any, 10) || 0);
-      config.combineFromIndex !== void 0 &&
+      config.combineFromIndex !== undefined &&
        (self.combineFromIndex =
          parseInt(config.combineFromIndex as any, 10) || 0);

-      config.maxKeepItemSelectionLength !== void 0 &&
+      config.maxKeepItemSelectionLength !== undefined &&
        (self.maxKeepItemSelectionLength = config.maxKeepItemSelectionLength);
-      config.keepItemSelectionOnPageChange !== void 0 &&
+      config.keepItemSelectionOnPageChange !== undefined &&
        (self.keepItemSelectionOnPageChange =
          config.keepItemSelectionOnPageChange);

      config.exportExcelLoading !== undefined &&
        (self.exportExcelLoading = config.exportExcelLoading);

+      config.loading !== undefined && (self.loading = config.loading);
+      config.canAccessSuperData !== undefined &&
+        (self.canAccessSuperData = !!config.canAccessSuperData);
+
+      typeof config.lazyRenderAfter === 'number' &&
+        self.lazyRenderAfter === config.lazyRenderAfter;
+
      if (config.columns && Array.isArray(config.columns)) {
        let columns: Array<SColumn> = config.columns
          .filter(column => column)
@ -1112,7 +1142,8 @@ export const TableStore = iRendererStore
      depth: number,
      pindex: number,
      parentId: string,
-      path: string = ''
+      path: string = '',
+      nThRef: {index: number}
    ): any {
      depth += 1;
      return children.map((item, index) => {
@ -1131,6 +1162,7 @@ export const TableStore = iRendererStore
          path: `${path}${index}`,
          depth: depth,
          index: index,
+          nth: nThRef.index++,
          newIndex: index,
          pristine: item,
          data: item,
@ -1142,7 +1174,8 @@ export const TableStore = iRendererStore
                  depth,
                  index,
                  id,
-                  `${path}${index}.`
+                  `${path}${index}.`,
+                  nThRef
                )
              : [],
          expandable: !!(
@ -1164,6 +1197,7 @@ export const TableStore = iRendererStore
      /* 避免输入内容为非数组挂掉 */
      rows = !Array.isArray(rows) ? [] : rows;

+      const nThRef = {index: 0};
      let arr: Array<SRow> = rows.map((item, index) => {
        if (!isObject(item)) {
          item = {
@ -1180,6 +1214,7 @@ export const TableStore = iRendererStore
          key: String(`${index}-1-${index}`),
          depth: 1, // 最大父节点默认为第一层，逐层叠加
          index: index,
+          nth: nThRef.index++,
          newIndex: index,
          pristine: item,
          path: `${index}`,
@ -1187,7 +1222,7 @@ export const TableStore = iRendererStore
          rowSpans: {},
          children:
            item && Array.isArray(item.children)
-              ? initChildren(item.children, 1, index, id, `${index}.`)
+              ? initChildren(item.children, 1, index, id, `${index}.`, nThRef)
              : [],
          expandable: !!(
            (item && Array.isArray(item.children) && item.children.length) ||
@ -1208,6 +1243,21 @@ export const TableStore = iRendererStore
      replaceRow(arr, reUseRow);
      self.isNested = self.rows.some(item => item.children.length);

+      // 前 20 个直接渲染，后面的按需渲染
+      if (
+        self.lazyRenderAfter &&
+        self.falttenedRows.length > self.lazyRenderAfter
+      ) {
+        for (
+          let i = self.lazyRenderAfter, len = self.falttenedRows.length;
+          i < len;
+          i++
+        ) {
+          self.falttenedRows[i].appeared = false;
+          self.falttenedRows[i].lazyRender = true;
+        }
+      }
+
      const expand = self.footable && self.footable.expand;
      if (
        expand === 'first' ||
--- a/packages/amis-core/src/utils/debug.tsx
+++ b/packages/amis-core/src/utils/debug.tsx
@ -502,3 +502,30 @@ export function warning(cat: Category, msg: string, ext?: object) {
  console.groupEnd();
  store.logs.push(log);
 }
+
+// 辅助定位是因为什么属性变化导致了组件更新
+export function traceProps(props: any, prevProps: any, componentName: string) {
+  console.log(
+    componentName,
+    Object.keys(props)
+      .map(key => {
+        if (props[key] !== prevProps[key]) {
+          if (key === 'data') {
+            return `data[${Object.keys(props[key])
+              .map(item => {
+                if (props[key][item] !== prevProps[key][item]) {
+                  return `data.${item}`;
+                }
+                return '';
+              })
+              .filter(item => item)
+              .join(', ')}]`;
+          }
+
+          return key;
+        }
+        return '';
+      })
+      .filter(item => item)
+  );
+}
--- a/packages/amis-core/src/utils/helper.ts
+++ b/packages/amis-core/src/utils/helper.ts
@ -1,14 +1,14 @@
 import React from 'react';
 import moment from 'moment';
 import {isObservable, isObservableArray} from 'mobx';
-import uniq from 'lodash/uniq'
-import last from 'lodash/last'
-import merge from 'lodash/merge'
-import isPlainObject from 'lodash/isPlainObject'
-import isEqual from 'lodash/isEqual'
-import isNaN from 'lodash/isNaN'
-import isNumber from 'lodash/isNumber'
-import isString from 'lodash/isString'
+import uniq from 'lodash/uniq';
+import last from 'lodash/last';
+import merge from 'lodash/merge';
+import isPlainObject from 'lodash/isPlainObject';
+import isEqual from 'lodash/isEqual';
+import isNaN from 'lodash/isNaN';
+import isNumber from 'lodash/isNumber';
+import isString from 'lodash/isString';
 import qs from 'qs';

 import type {Schema, PlainObject, FunctionPropertyNames} from '../types';
@ -196,9 +196,37 @@ export function anyChanged(
  to: {[propName: string]: any},
  strictMode: boolean = true
 ): boolean {
-  return (typeof attrs === 'string' ? attrs.split(/\s*,\s*/) : attrs).some(
-    key => (strictMode ? from[key] !== to[key] : from[key] != to[key])
-  );
+  return (
+    typeof attrs === 'string'
+      ? attrs.split(',').map(item => item.trim())
+      : attrs
+  ).some(key => (strictMode ? from[key] !== to[key] : from[key] != to[key]));
+}
+
+type Mutable<T> = {
+  -readonly [k in keyof T]: T[k];
+};
+
+export function changedEffect<T extends Record<string, any>>(
+  attrs: string | Array<string>,
+  origin: T,
+  data: T,
+  effect: (changes: Partial<Mutable<T>>) => void,
+  strictMode: boolean = true
+) {
+  const changes: Partial<T> = {};
+  const keys =
+    typeof attrs === 'string'
+      ? attrs.split(',').map(item => item.trim())
+      : attrs;
+
+  keys.forEach(key => {
+    if (strictMode ? origin[key] !== data[key] : origin[key] != data[key]) {
+      (changes as any)[key] = data[key];
+    }
+  });
+
+  Object.keys(changes).length && effect(changes);
 }

 export function rmUndefined(obj: PlainObject) {
--- a/packages/amis-ui/scss/components/_chart.scss
+++ b/packages/amis-ui/scss/components/_chart.scss
@ -15,4 +15,8 @@
    width: 100%;
    height: 100%;
  }
+
+  > .visibility-sensor {
+    height: 100%; // 修复图表高度为 0 时，visibility-sensor 无法触发的问题
+  }
 }
--- a/packages/amis-ui/scss/components/_table.scss
+++ b/packages/amis-ui/scss/components/_table.scss
@ -1027,6 +1027,13 @@
      }
    }
  }
+
+  // table 骨架样式
+  &-emptyBlock {
+    background-color: #eaebed;
+    border-radius: 5px;
+    line-height: 15px;
+  }
 }

 .#{$ns}InputTable {
@ -1074,6 +1081,7 @@
  > .#{$ns}Button,
  > .#{$ns}Button--disabled-wrap > .#{$ns}Button {
    margin: px2rem(3px);
+    height: auto;
  }

  > .#{$ns}Button--disabled-wrap > .#{$ns}Button--link {
--- a/packages/amis/tests/renderers/Form/snapshots/inputTable.test.tsx.snap
+++ b/packages/amis/tests/renderers/Form/snapshots/inputTable.test.tsx.snap
@ -440,7 +440,7 @@ exports[`Renderer:input table add 1`] = `
                      />
                      <col
                        data-index="5"
-                        style="width: 100px;"
+                        style="width: 150px;"
                      />
                    </colgroup>
                    <thead>
@ -519,15 +519,6 @@ exports[`Renderer:input table add 1`] = `
                        <td
                          class=""
                        >
-                          <div
-                            class="cxd-Form cxd-Form--normal cxd-Form--quickEdit"
-                            novalidate=""
-                          >
-                            <input
-                              style="display: none;"
-                              type="submit"
-                              value="aa"
-                            />
                          <div
                            class="cxd-Form-item cxd-Form-item--normal"
                            data-role="form-item"
@ -545,24 +536,15 @@ exports[`Renderer:input table add 1`] = `
                                  placeholder=""
                                  size="10"
                                  type="text"
-                                    value="bb"
+                                  value="aa"
                                />
                              </div>
                            </div>
                          </div>
-                          </div>
                        </td>
                        <td
                          class=""
                        >
-                          <div
-                            class="cxd-Form cxd-Form--normal cxd-Form--quickEdit"
-                            novalidate=""
-                          >
-                            <input
-                              style="display: none;"
-                              type="submit"
-                            />
                          <div
                            class="cxd-Form-item cxd-Form-item--normal"
                            data-role="form-item"
@ -580,12 +562,11 @@ exports[`Renderer:input table add 1`] = `
                                  placeholder=""
                                  size="10"
                                  type="text"
-                                    value=""
+                                  value="bb"
                                />
                              </div>
                            </div>
                          </div>
-                          </div>
                        </td>
                        <td
                          class="v-middle nowrap is-sticky is-sticky-right is-sticky-first-right"
@ -866,14 +847,6 @@ exports[`Renderer:input-table cell selects delete 1`] = `
                        <td
                          class=""
                        >
-                          <div
-                            class="cxd-Form cxd-Form--normal cxd-Form--quickEdit"
-                            novalidate=""
-                          >
-                            <input
-                              style="display: none;"
-                              type="submit"
-                            />
                          <div
                            class="cxd-Form-item cxd-Form-item--normal"
                            data-role="form-item"
@ -937,7 +910,6 @@ exports[`Renderer:input-table cell selects delete 1`] = `
                              </div>
                            </div>
                          </div>
-                          </div>
                        </td>
                        <td
                          class=""
@ -1264,14 +1236,6 @@ exports[`Renderer:input-table with combo column 1`] = `
                        <td
                          class=""
                        >
-                          <div
-                            class="cxd-Form cxd-Form--normal cxd-Form--quickEdit"
-                            novalidate=""
-                          >
-                            <input
-                              style="display: none;"
-                              type="submit"
-                            />
                          <div
                            class="cxd-Form-item cxd-Form-item--normal"
                            data-role="form-item"
@ -1398,7 +1362,6 @@ exports[`Renderer:input-table with combo column 1`] = `
                              </div>
                            </div>
                          </div>
-                          </div>
                        </td>
                      </tr>
                    </tbody>
--- a/packages/amis/package.json
+++ b/packages/amis/package.json
@ -72,7 +72,8 @@
    "sortablejs": "1.15.0",
    "tslib": "^2.3.1",
    "video-react": "0.15.0",
-    "xlsx": "^0.18.5"
+    "xlsx": "^0.18.5",
+    "react-intersection-observer": "9.5.2"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^6.1.1",
--- a/packages/amis/src/renderers/CRUD.tsx
+++ b/packages/amis/src/renderers/CRUD.tsx
@ -58,6 +58,7 @@ import {
 import type {PaginationProps} from './Pagination';
 import {isAlive} from 'mobx-state-tree';
 import isPlainObject from 'lodash/isPlainObject';
+import memoize from 'lodash/memoize';

 export type CRUDBultinToolbarType =
  | 'columns-toggler'
@ -473,6 +474,10 @@ export default class CRUD extends React.Component<CRUDProps, any> {
  /** 父容器, 主要用于定位CRUD内部popover的挂载点 */
  parentContainer: Element | null;

+  filterOnEvent = memoize(onEvent =>
+    omitBy(onEvent, (event, key: any) => !INNER_EVENTS.includes(key))
+  );
+
  constructor(props: CRUDProps) {
    super(props);

@ -548,8 +553,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
  }

  componentDidMount() {
-    const {store, autoGenerateFilter, columns} = this.props;
-    if (this.props.perPage) {
+    const {store, autoGenerateFilter, perPageField, columns} = this.props;
+    if (this.props.perPage && !store.query[perPageField || 'perPage']) {
      store.changePage(store.page, this.props.perPage);
    }

@ -662,6 +667,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
  componentWillUnmount() {
    this.mounted = false;
    clearTimeout(this.timer);
+    this.filterOnEvent.cache.clear?.();
  }

  /** 查找CRUD最近层级的父窗口 */
@ -2451,10 +2457,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
            ...rest,
            // 通用事件 例如cus-event 如果直接透传给table 则会被触发2次
            // 因此只将下层组件table、cards中自定义事件透传下去 否则通过crud配置了也不会执行
-            onEvent: omitBy(
-              onEvent,
-              (event, key: any) => !INNER_EVENTS.includes(key)
-            ),
+            onEvent: this.filterOnEvent(onEvent),
            columns: store.columns ?? rest.columns,
            type: mode || 'table'
          },
--- a/packages/amis/src/renderers/Form/InputTable.tsx
+++ b/packages/amis/src/renderers/Form/InputTable.tsx
@ -19,7 +19,6 @@ import {
  ApiObject,
  autobind,
  isExpression,
-  ITableStore,
  isPureVariable,
  resolveVariableAndFilter,
  getRendererByName,
@ -283,9 +282,9 @@ export default class FormTable extends React.Component<TableProps, TableState> {
  entries: SimpleMap<any, number>;
  entityId: number = 1;
  subForms: any = {};
+  subFormItems: any = {};
  rowPrinstine: Array<any> = [];
  editting: any = {};
-  tableStore?: ITableStore;

  constructor(props: TableProps) {
    super(props);
@ -305,6 +304,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
    this.handleRadioChange = this.handleRadioChange.bind(this);
    this.getEntryId = this.getEntryId.bind(this);
    this.subFormRef = this.subFormRef.bind(this);
+    this.subFormItemRef = this.subFormItemRef.bind(this);
    this.handlePageChange = this.handlePageChange.bind(this);
    this.emitValue = this.emitValue.bind(this);
  }
@ -382,6 +382,10 @@ export default class FormTable extends React.Component<TableProps, TableState> {
    this.subForms[`${x}-${y}`] = form;
  }

+  subFormItemRef(form: any, x: number, y: number) {
+    this.subFormItems[`${x}-${y}`] = form;
+  }
+
  async validate(): Promise<string | void> {
    const {value, translate: __, columns} = this.props;
    const minLength = this.resolveVariableProps(this.props, 'minLength');
@ -442,16 +446,18 @@ export default class FormTable extends React.Component<TableProps, TableState> {
      }
    }

-    if (!this.tableStore) return;
-
    // 校验子项
-    const children = this.tableStore.children.filter(
-      item => item?.storeType === 'FormItemStore'
+    const subFormItemss: Array<any> = [];
+    Object.keys(this.subFormItems).forEach(
+      key =>
+        this.subFormItems[key] && subFormItemss.push(this.subFormItems[key])
    );

    const results = await Promise.all(
-      children.map(item => item.validate(this.props.value))
+      subFormItemss.map(item => item.props.onValidate())
    );
+    let msg = ~results.indexOf(false) ? __('Form.validateFailed') : '';
+    return msg;
  }

  async emitValue() {
@ -728,6 +734,12 @@ export default class FormTable extends React.Component<TableProps, TableState> {
    );
    subForms.forEach(form => form.flush());

+    const subFormItems: Array<any> = [];
+    Object.keys(this.subFormItems).forEach(
+      key => this.subFormItems[key] && subFormItems.push(this.subFormItems[key])
+    );
+    subFormItems.forEach(item => item.props.onFlushChange?.());
+
    const validateForms: Array<any> = [];
    Object.keys(this.subForms).forEach(key => {
      const arr = key.split('-');
@ -1229,7 +1241,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
          label: __('Table.operation'),
          className: 'v-middle nowrap',
          fixed: 'right',
-          width: 100,
+          width: 150,
          innerClassName: 'm-n'
        };
        columns.push(operation);
@ -1468,7 +1480,6 @@ export default class FormTable extends React.Component<TableProps, TableState> {
    while (ref && ref.getWrappedInstance) {
      ref = ref.getWrappedInstance();
    }
-    this.tableStore = ref?.props?.store;
  }

  computedAddBtnDisabled() {
@ -1553,6 +1564,7 @@ export default class FormTable extends React.Component<TableProps, TableState> {
            onSaveOrder: this.handleSaveTableOrder,
            buildItemProps: this.buildItemProps,
            quickEditFormRef: this.subFormRef,
+            quickEditFormItemRef: this.subFormItemRef,
            columnsTogglable: columnsTogglable,
            combineNum: combineNum,
            combineFromIndex: combineFromIndex,
--- a/packages/amis/src/renderers/QuickEdit.tsx
+++ b/packages/amis/src/renderers/QuickEdit.tsx
@ -5,7 +5,7 @@

 import React from 'react';
 import {findDOMNode} from 'react-dom';
-import {RendererProps, noop} from 'amis-core';
+import {RendererProps, getRendererByName, noop} from 'amis-core';
 import hoistNonReactStatic from 'hoist-non-react-statics';
 import {ActionObject} from 'amis-core';
 import keycode from 'keycode';
@ -121,8 +121,10 @@ export const HocQuickEdit =
        this.handleWindowKeyPress = this.handleWindowKeyPress.bind(this);
        this.handleWindowKeyDown = this.handleWindowKeyDown.bind(this);
        this.formRef = this.formRef.bind(this);
+        this.formItemRef = this.formItemRef.bind(this);
        this.handleInit = this.handleInit.bind(this);
        this.handleChange = this.handleChange.bind(this);
+        this.handleFormItemChange = this.handleFormItemChange.bind(this);

        this.state = {
          isOpened: false
@ -152,6 +154,17 @@ export const HocQuickEdit =
          quickEditFormRef(ref, colIndex, rowIndex);
        }
      }
+      formItemRef(ref: any) {
+        const {quickEditFormItemRef, rowIndex, colIndex} = this.props;
+
+        if (quickEditFormItemRef) {
+          while (ref && ref.getWrappedInstance) {
+            ref = ref.getWrappedInstance();
+          }
+
+          quickEditFormItemRef(ref, colIndex, rowIndex);
+        }
+      }

      handleWindowKeyPress(e: Event) {
        const ns = this.props.classPrefix;
@ -337,6 +350,17 @@ export const HocQuickEdit =
        );
      }

+      handleFormItemChange(value: any) {
+        const {onQuickChange, quickEdit, name} = this.props;
+
+        onQuickChange(
+          {[name!]: value},
+          (quickEdit as QuickEditConfig).saveImmediately,
+          false,
+          quickEdit as QuickEditConfig
+        );
+      }
+
      openQuickEdit() {
        currentOpened = this;
        this.setState({
@ -526,6 +550,51 @@ export const HocQuickEdit =
        );
      }

+      renderInlineForm() {
+        const {
+          render,
+          classnames: cx,
+          canAccessSuperData,
+          disabled,
+          value,
+          name
+        } = this.props;
+
+        const schema: any = this.buildSchema();
+
+        // 有且只有一个表单项时，直接渲染表单项
+        if (
+          Array.isArray(schema.body) &&
+          schema.body.length === 1 &&
+          !schema.body[0].unique && // 唯一模式还不支持
+          !schema.body[0].value && // 不能有默认值表达式什么的情况
+          schema.body[0].name &&
+          schema.body[0].name === name &&
+          schema.body[0].type &&
+          getRendererByName(schema.body[0].type)?.isFormItem
+        ) {
+          return render('inline-form-item', schema.body[0], {
+            mode: 'normal',
+            value: value || '',
+            onChange: this.handleFormItemChange,
+            ref: this.formItemRef
+          });
+        }
+
+        return render('inline-form', schema, {
+          value: undefined,
+          wrapperComponent: 'div',
+          className: cx('Form--quickEdit'),
+          ref: this.formRef,
+          simpleMode: true,
+          onInit: this.handleInit,
+          onChange: this.handleChange,
+          formLazyChange: false,
+          canAccessSuperData,
+          disabled
+        });
+      }
+
      render() {
        const {
          onQuickChange,
@ -556,20 +625,7 @@ export const HocQuickEdit =
          (quickEdit as QuickEditConfig).isFormMode
        ) {
          return (
-            <Component {...this.props}>
-              {render('inline-form', this.buildSchema(), {
-                value: undefined,
-                wrapperComponent: 'div',
-                className: cx('Form--quickEdit'),
-                ref: this.formRef,
-                simpleMode: true,
-                onInit: this.handleInit,
-                onChange: this.handleChange,
-                formLazyChange: false,
-                canAccessSuperData,
-                disabled
-              })}
-            </Component>
+            <Component {...this.props}>{this.renderInlineForm()}</Component>
          );
        } else {
          return (
--- a/packages/amis/src/renderers/Table/TableBody.tsx
+++ b/packages/amis/src/renderers/Table/TableBody.tsx
@ -2,7 +2,7 @@ import React from 'react';
 import {ClassNamesFn, RendererEvent} from 'amis-core';

 import {SchemaNode, ActionObject} from 'amis-core';
-import {TableRow} from './TableRow';
+import TableRow from './TableRow';
 import {filter} from 'amis-core';
 import {observer} from 'mobx-react';
 import {trace, reaction} from 'mobx';
@ -91,7 +91,8 @@ export class TableBody extends React.Component<TableBodyProps> {
      onRowClick,
      onRowDbClick,
      onRowMouseEnter,
-      onRowMouseLeave
+      onRowMouseLeave,
+      store
    } = this.props;

    return rows.map((item: IRow, rowIndex: number) => {
@ -99,6 +100,7 @@ export class TableBody extends React.Component<TableBodyProps> {
      const doms = [
        <TableRow
          {...itemProps}
+          store={store}
          itemAction={itemAction}
          classnames={cx}
          checkOnItemClick={checkOnItemClick}
@ -136,6 +138,7 @@ export class TableBody extends React.Component<TableBodyProps> {
          doms.push(
            <TableRow
              {...itemProps}
+              store={store}
              itemAction={itemAction}
              classnames={cx}
              checkOnItemClick={checkOnItemClick}
--- a/packages/amis/src/renderers/Table/TableContent.tsx
+++ b/packages/amis/src/renderers/Table/TableContent.tsx
@ -81,11 +81,17 @@ export interface TableContentProps extends LocaleProps {
  dispatchEvent?: Function;
  onEvent?: OnEventProps;
  loading?: boolean;
+  columnWidthReady?: boolean;
+
+  // 以下纯粹是为了监控
+  someChecked?: boolean;
+  allChecked?: boolean;
+  isSelectionThresholdReached?: boolean;
+  orderBy?: string;
+  orderDir?: string;
 }

-@observer
-export class TableContent extends React.Component<TableContentProps> {
-  static renderItemActions(
+export function renderItemActions(
  props: Pick<
    TableContentProps,
    'itemActions' | 'render' | 'store' | 'classnames'
@ -128,6 +134,7 @@ export class TableContent extends React.Component<TableContentProps> {
  );
 }

+export class TableContent extends React.PureComponent<TableContentProps> {
  render() {
    const {
      placeholder,
@ -166,7 +173,8 @@ export class TableContent extends React.Component<TableContentProps> {
      store,
      dispatchEvent,
      onEvent,
-      loading
+      loading,
+      columnWidthReady
    } = this.props;

    const tableClassName = cx('Table-table', this.props.tableClassName);
@ -182,7 +190,7 @@ export class TableContent extends React.Component<TableContentProps> {
          ref={tableRef}
          className={cx(
            tableClassName,
-            store.columnWidthReady ? 'is-layout-fixed' : undefined
+            columnWidthReady ? 'is-layout-fixed' : undefined
          )}
        >
          <ColGroup columns={columns} store={store} />
@ -293,7 +301,6 @@ export class TableContent extends React.Component<TableContentProps> {
              affixRow={affixRow}
              data={data}
              rowsProps={{
-                data,
                dispatchEvent,
                onEvent
              }}
@ -304,3 +311,27 @@ export class TableContent extends React.Component<TableContentProps> {
    );
  }
 }
+
+export default observer((props: TableContentProps) => {
+  const store = props.store;
+
+  // 分析 table/index.tsx 中的 renderHeadCell 依赖了以下属性
+  // store.someChecked;
+  // store.allChecked;
+  // store.isSelectionThresholdReached;
+  // store.allExpanded;
+  // store.orderBy
+  // store.orderDir
+
+  return (
+    <TableContent
+      {...props}
+      columnWidthReady={store.columnWidthReady}
+      someChecked={store.someChecked}
+      allChecked={store.allChecked}
+      isSelectionThresholdReached={store.isSelectionThresholdReached}
+      orderBy={store.orderBy}
+      orderDir={store.orderDir}
+    />
+  );
+});
--- a/packages/amis/src/renderers/Table/TableRow.tsx
+++ b/packages/amis/src/renderers/Table/TableRow.tsx
@ -1,9 +1,10 @@
 import {observer} from 'mobx-react';
 import React from 'react';
 import type {IColumn, IRow} from 'amis-core/lib/store/table';
-import {RendererEvent, RendererProps} from 'amis-core';
+import {RendererEvent, RendererProps, autobind, traceProps} from 'amis-core';
 import {Action} from '../Action';
-import {isClickOnInput, createObject} from 'amis-core';
+import {isClickOnInput} from 'amis-core';
+import {useInView} from 'react-intersection-observer';

 interface TableRowProps extends Pick<RendererProps, 'render'> {
  onCheck: (item: IRow, value: boolean, shift?: boolean) => Promise<void>;
@ -38,31 +39,36 @@ interface TableRowProps extends Pick<RendererProps, 'render'> {
  [propName: string]: any;
 }

-@observer
-export class TableRow extends React.Component<TableRowProps> {
-  // reaction?: () => void;
-  constructor(props: TableRowProps) {
-    super(props);
-    this.handleAction = this.handleAction.bind(this);
-    this.handleQuickChange = this.handleQuickChange.bind(this);
-    this.handleChange = this.handleChange.bind(this);
-    this.handleItemClick = this.handleItemClick.bind(this);
-    this.handleDbClick = this.handleDbClick.bind(this);
-    this.handleMouseEnter = this.handleMouseEnter.bind(this);
-    this.handleMouseLeave = this.handleMouseLeave.bind(this);
+export class TableRow extends React.PureComponent<
+  TableRowProps & {
+    expanded: boolean;
+    id: string;
+    newIndex: number;
+    isHover: boolean;
+    checked: boolean;
+    modified: boolean;
+    moved: boolean;
+    depth: number;
+    expandable: boolean;
+    appeard?: boolean;
+    checkdisable: boolean;
+    trRef?: React.Ref<any>;
  }
-
+> {
+  @autobind
  handleMouseEnter(e: React.MouseEvent<HTMLTableRowElement>) {
    const {item, itemIndex, onRowMouseEnter} = this.props;
    onRowMouseEnter?.(item?.data, itemIndex);
  }

+  @autobind
  handleMouseLeave(e: React.MouseEvent<HTMLTableRowElement>) {
    const {item, itemIndex, onRowMouseLeave} = this.props;
    onRowMouseLeave?.(item?.data, itemIndex);
  }

  // 定义点击一行的行为，通过 itemAction配置
+  @autobind
  async handleItemClick(e: React.MouseEvent<HTMLTableRowElement>) {
    if (isClickOnInput(e)) {
      return;
@ -92,16 +98,19 @@ export class TableRow extends React.Component<TableRowProps> {
    }
  }

+  @autobind
  handleDbClick(e: React.MouseEvent<HTMLTableRowElement>) {
    const {item, itemIndex, onRowDbClick} = this.props;
    onRowDbClick?.(item?.data, itemIndex);
  }

+  @autobind
  handleAction(e: React.UIEvent<any>, action: Action, ctx: any) {
    const {onAction, item} = this.props;
    onAction && onAction(e, action, ctx || item.locals);
  }

+  @autobind
  handleQuickChange(
    values: object,
    saveImmediately?: boolean,
@ -116,6 +125,7 @@ export class TableRow extends React.Component<TableRowProps> {
      onQuickChange(item, values, saveImmediately, savePristine, options);
  }

+  @autobind
  handleChange(
    value: any,
    name: string,
@ -157,18 +167,32 @@ export class TableRow extends React.Component<TableRowProps> {
      parent,
      itemAction,
      onEvent,
+
+      expanded,
+      id,
+      newIndex,
+      isHover,
+      checked,
+      modified,
+      moved,
+      depth,
+      expandable,
+      appeard,
+      trRef,
+
      ...rest
    } = this.props;

    if (footableMode) {
-      if (!item.expanded) {
+      if (!expanded) {
        return null;
      }

      return (
        <tr
-          data-id={item.id}
-          data-index={item.newIndex}
+          ref={trRef}
+          data-id={id}
+          data-index={newIndex}
          onClick={
            checkOnItemClick || itemAction || onEvent?.rowClick
              ? this.handleItemClick
@ -178,10 +202,10 @@ export class TableRow extends React.Component<TableRowProps> {
          onMouseEnter={this.handleMouseEnter}
          onMouseLeave={this.handleMouseLeave}
          className={cx(itemClassName, {
-            'is-hovered': item.isHover,
-            'is-checked': item.checked,
-            'is-modified': item.modified,
-            'is-moved': item.moved,
+            'is-hovered': isHover,
+            'is-checked': checked,
+            'is-modified': modified,
+            'is-moved': moved,
            [`Table-tr--hasItemAction`]: itemAction, // 就是为了加鼠标效果
            [`Table-tr--odd`]: itemIndex % 2 === 0,
            [`Table-tr--even`]: itemIndex % 2 === 1
@ -208,7 +232,8 @@ export class TableRow extends React.Component<TableRowProps> {
                          </th>
                        ) : null}

-                        {renderCell(
+                        {appeard ? (
+                          renderCell(
                            `${regionPrefix}${itemIndex}/${column.index}`,
                            column,
                            item,
@ -222,6 +247,11 @@ export class TableRow extends React.Component<TableRowProps> {
                              onQuickChange: this.handleQuickChange,
                              onChange: this.handleChange
                            }
+                          )
+                        ) : (
+                          <td key={column.index}>
+                            <div className={cx('Table-emptyBlock')}>&nbsp;</div>
+                          </td>
                        )}
                      </tr>
                    ))}
@ -238,6 +268,7 @@ export class TableRow extends React.Component<TableRowProps> {

    return (
      <tr
+        ref={trRef}
        onClick={
          checkOnItemClick || itemAction || onEvent?.rowClick
            ? this.handleItemClick
@ -246,25 +277,26 @@ export class TableRow extends React.Component<TableRowProps> {
        onDoubleClick={this.handleDbClick}
        onMouseEnter={this.handleMouseEnter}
        onMouseLeave={this.handleMouseLeave}
-        data-index={item.depth === 1 ? item.newIndex : undefined}
-        data-id={item.id}
+        data-index={depth === 1 ? newIndex : undefined}
+        data-id={id}
        className={cx(
          itemClassName,
          {
-            'is-hovered': item.isHover,
-            'is-checked': item.checked,
-            'is-modified': item.modified,
-            'is-moved': item.moved,
-            'is-expanded': item.expanded && item.expandable,
-            'is-expandable': item.expandable,
+            'is-hovered': isHover,
+            'is-checked': checked,
+            'is-modified': modified,
+            'is-moved': moved,
+            'is-expanded': expanded && expandable,
+            'is-expandable': expandable,
            [`Table-tr--hasItemAction`]: itemAction,
            [`Table-tr--odd`]: itemIndex % 2 === 0,
            [`Table-tr--even`]: itemIndex % 2 === 1
          },
-          `Table-tr--${item.depth}th`
+          `Table-tr--${depth}th`
        )}
      >
        {columns.map(column =>
+          appeard ? (
            renderCell(`${itemIndex}/${column.index}`, column, item, {
              ...rest,
              rowIndex: itemIndex,
@ -274,8 +306,50 @@ export class TableRow extends React.Component<TableRowProps> {
              onQuickChange: this.handleQuickChange,
              onChange: this.handleChange
            })
+          ) : (
+            <td key={column.index}>
+              <div className={cx('Table-emptyBlock')}>&nbsp;</div>
+            </td>
+          )
        )}
      </tr>
    );
  }
 }
+
+// 换成 mobx-react-lite 模式
+export default observer((props: TableRowProps) => {
+  const item = props.item;
+  const store = props.store;
+  const columns = props.columns;
+  const canAccessSuperData =
+    store.canAccessSuperData ||
+    columns.some(item => item.pristine.canAccessSuperData);
+
+  const {ref, inView} = useInView({
+    threshold: 0,
+    onChange: item.markAppeared,
+    skip: !item.lazyRender
+  });
+
+  return (
+    <TableRow
+      {...props}
+      trRef={ref}
+      expanded={item.expanded}
+      id={item.id}
+      newIndex={item.newIndex}
+      isHover={item.isHover}
+      checked={item.checked}
+      modified={item.modified}
+      moved={item.moved}
+      depth={item.depth}
+      expandable={item.expandable}
+      checkdisable={item.checkdisable}
+      // data 在 TableRow 里面没有使用，这里写上是为了当列数据变化的时候 TableRow 重新渲染，
+      // 不是 item.locals 的原因是 item.locals 会变化多次，比如父级上下文变化也会进来，但是 item.data 只会变化一次。
+      data={canAccessSuperData ? item.locals : item.data}
+      appeard={item.lazyRender ? item.appeared || inView : true}
+    />
+  );
+});
--- a/packages/amis/src/renderers/Table/index.tsx
+++ b/packages/amis/src/renderers/Table/index.tsx
@ -17,6 +17,7 @@ import {Button} from 'amis-ui';
 import {TableStore, ITableStore, padArr} from 'amis-core';
 import {
  anyChanged,
+  changedEffect,
  getScrollParent,
  difference,
  autobind,
@ -38,7 +39,7 @@ import {TableCell} from './TableCell';
 import type {AutoGenerateFilterObject} from '../CRUD';
 import {HeadCellFilterDropDown} from './HeadCellFilterDropdown';
 import {HeadCellSearchDropDown} from './HeadCellSearchDropdown';
-import {TableContent} from './TableContent';
+import TableContent, {renderItemActions} from './TableContent';
 import {
  BaseSchema,
  SchemaApi,
@ -183,6 +184,12 @@ export type TableColumnObject = {
   */
  canAccessSuperData?: boolean;

+  /**
+   * 当一次性渲染太多列上有用，默认为 100，可以用来提升表格渲染性能
+   * @default 100
+   */
+  lazyRenderAfter?: number;
+
  /**
   * 单元格内部组件自定义样式 style作为单元格自定义样式的配置
   */
@ -569,7 +576,10 @@ export default class Table extends React.Component<TableProps, object> {
      keepItemSelectionOnPageChange,
      maxKeepItemSelectionLength,
      onQuery,
-      autoGenerateFilter
+      autoGenerateFilter,
+      loading,
+      canAccessSuperData,
+      lazyRenderAfter
    } = props;

    let combineNum = props.combineNum;
@ -597,7 +607,10 @@ export default class Table extends React.Component<TableProps, object> {
      combineNum,
      combineFromIndex,
      keepItemSelectionOnPageChange,
-      maxKeepItemSelectionLength
+      maxKeepItemSelectionLength,
+      loading,
+      canAccessSuperData,
+      lazyRenderAfter
    });

    if (
@ -770,8 +783,7 @@ export default class Table extends React.Component<TableProps, object> {
    const props = this.props;
    const store = props.store;

-    if (
-      anyChanged(
+    changedEffect(
      [
        'selectable',
        'columnsTogglable',
@ -786,42 +798,34 @@ export default class Table extends React.Component<TableProps, object> {
        'hideCheckToggler',
        'combineNum',
        'combineFromIndex',
-          'expandConfig'
+        'expandConfig',
+        'columns',
+        'loading',
+        'canAccessSuperData',
+        'lazyRenderAfter'
      ],
      prevProps,
-        props
-      )
+      props,
+      changes => {
+        if (
+          changes.hasOwnProperty('combineNum') &&
+          typeof changes.combineNum === 'string'
        ) {
-      let combineNum = props.combineNum;
-      if (typeof combineNum === 'string') {
-        combineNum = parseInt(
-          resolveVariableAndFilter(combineNum, props.data, '| raw'),
+          changes.combineNum = parseInt(
+            resolveVariableAndFilter(
+              changes.combineNum as string,
+              props.data,
+              '| raw'
+            ),
            10
          );
        }
-      store.update({
-        selectable: props.selectable,
-        columnsTogglable: props.columnsTogglable,
-        draggable: props.draggable,
-        orderBy: props.onQuery ? props.orderBy : undefined,
-        orderDir: props.orderDir,
-        multiple: props.multiple,
-        primaryField: props.primaryField,
-        footable: props.footable,
-        itemCheckableOn: props.itemCheckableOn,
-        itemDraggableOn: props.itemDraggableOn,
-        hideCheckToggler: props.hideCheckToggler,
-        combineNum: combineNum,
-        combineFromIndex: props.combineFromIndex,
-        expandConfig: props.expandConfig
-      });
+        if (changes.orderBy && !props.onQuery) {
+          delete changes.orderBy;
        }
-
-    if (prevProps.columns !== props.columns) {
-      store.update({
-        columns: props.columns
-      });
+        store.update(changes as any);
      }
+    );

    if (
      anyChanged(['source', 'value', 'items'], prevProps, props) ||
@ -1091,6 +1095,27 @@ export default class Table extends React.Component<TableProps, object> {
      }
    }

+    // 校验直接放在单元格里面的表单项
+    const subFormItems = store.children.filter(
+      item => item?.storeType === 'FormItemStore'
+    );
+    if (subFormItems.length) {
+      const result = await Promise.all(
+        subFormItems.map(item => {
+          let ctx = {};
+
+          if (item.rowIndex && store.rows[item.rowIndex]) {
+            ctx = store.rows[item.rowIndex].data;
+          }
+
+          return item.validate(ctx);
+        })
+      );
+      if (~result.indexOf(false)) {
+        return;
+      }
+    }
+
    const rows = store.modifiedRows.map(item => item.data);
    const rowIndexes = store.modifiedRows.map(item => item.path);
    const diff = store.modifiedRows.map(item =>
@ -1149,6 +1174,14 @@ export default class Table extends React.Component<TableProps, object> {
      key => this.subForms[key] && subForms.push(this.subForms[key])
    );
    subForms.forEach(item => item.clearErrors());
+
+    // 去掉错误提示
+    const subFormItems = store.children.filter(
+      item => item?.storeType === 'FormItemStore'
+    );
+    if (subFormItems.length) {
+      subFormItems.map(item => item.reset());
+    }
  }

  bulkUpdate(value: any, items: Array<object>) {
@ -1824,6 +1857,9 @@ export default class Table extends React.Component<TableProps, object> {
      data
    } = this.props;

+    // 注意，这里用关了哪些 store 里面的东西，TableContent 里面得也用一下
+    // 因为 renderHeadCell 是 TableContent 回调的，tableContent 不重新渲染，这里面也不会重新渲染
+
    const style = {...props.style};
    const [stickyStyle, stickyClassName] = store.getStickyStyles(
      column,
@ -2713,7 +2749,6 @@ export default class Table extends React.Component<TableProps, object> {
      itemActions,
      dispatchEvent,
      onEvent,
-      loading = false,
      loadingConfig
    } = this.props;

@ -2723,7 +2758,7 @@ export default class Table extends React.Component<TableProps, object> {

    return (
      <>
-        {TableContent.renderItemActions({
+        {renderItemActions({
          store,
          classnames: cx,
          render,
@ -2746,7 +2781,7 @@ export default class Table extends React.Component<TableProps, object> {
          classnames={cx}
          columns={store.filteredColumns}
          columnsGroup={store.columnGroup}
-          rows={store.rows}
+          rows={store.items} // store.rows 是没有变更的，所以不会触发更新
          placeholder={placeholder}
          render={render}
          onMouseMove={
@ -2781,10 +2816,10 @@ export default class Table extends React.Component<TableProps, object> {
          translate={translate}
          dispatchEvent={dispatchEvent}
          onEvent={onEvent}
-          loading={loading}
+          loading={store.loading} // store 的同步较慢，所以统一用 store 来下发，否则会出现 props 和 store 变化触发子节点两次 re-rerender
        />

-        <Spinner loadingConfig={loadingConfig} overlay show={loading} />
+        <Spinner loadingConfig={loadingConfig} overlay show={store.loading} />
      </>
    );
  }