fix(form-grid): improve performace

alibaba · Feb 20, 2021 · f1b7afd · f1b7afd
1 parent 35dd3fd
commit f1b7afd
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 20 deletions.
diff --git a/packages/antd/docs/components/FormGrid.md b/packages/antd/docs/components/FormGrid.md
@@ -8,7 +8,7 @@
 import React from 'react'
 import { FormItem, Input, FormGrid } from '@formily/antd'
 import { FormProvider, createSchemaField } from '@formily/react'
-import { createForm, onFieldReact } from '@formily/core'
+import { createForm } from '@formily/core'
 
 const SchemaField = createSchemaField({
   components: {
@@ -18,13 +18,7 @@ const SchemaField = createSchemaField({
   },
 })
 
-const form = createForm({
-  effects(form) {
-    onFieldReact('*(ccc,ddd,eee,fff,ggg)', (field) => {
-      field.visible = form.values.aaa !== '123'
-    })
-  },
-})
+const form = createForm()
 
 export default () => {
   return (
@@ -92,7 +86,7 @@ export default () => {
 import React from 'react'
 import { FormItem, Input, FormGrid } from '@formily/antd'
 import { FormProvider, createSchemaField } from '@formily/react'
-import { createForm, onFieldReact } from '@formily/core'
+import { createForm } from '@formily/core'
 
 const SchemaField = createSchemaField({
   components: {
@@ -102,13 +96,7 @@ const SchemaField = createSchemaField({
   },
 })
 
-const form = createForm({
-  effects(form) {
-    onFieldReact('*(ccc,ddd,eee,fff,ggg)', (field) => {
-      field.visible = form.values.aaa !== '123'
-    })
-  },
-})
+const form = createForm()
 
 const schema = {
   type: 'object',

diff --git a/packages/antd/src/form-grid/index.tsx b/packages/antd/src/form-grid/index.tsx
@@ -1,7 +1,7 @@
 import React, { useLayoutEffect, useRef, useState, useContext } from 'react'
 import { usePrefixCls } from '../__builtins__'
 import cls from 'classnames'
-import { isValid, isNum, isBool } from '@formily/shared'
+import { isValid, isNum, isBool, isEqual } from '@formily/shared'
 import ResizeObserver from 'resize-observer-polyfill'
 import { FormGridContext } from './context'
 
@@ -163,7 +163,9 @@ const useLayout = (props: ILayoutProps): ILayout => {
       const params = calculateSmartColumns(ref.current)
       setLayout(params)
       const style = getStyle({ columnGap, rowGap, layoutParams: params, ref })
-      setStyles(style)
+      if (!isEqual(style, styles)) {
+        setStyles(style)
+      }
     }
     const resizeObserver = new ResizeObserver(observer)
     const mutationObserver = new MutationObserver(observer)

diff --git a/packages/next/src/form-grid/index.tsx b/packages/next/src/form-grid/index.tsx
@@ -1,7 +1,7 @@
 import React, { useLayoutEffect, useRef, useState, useContext } from 'react'
 import { usePrefixCls } from '../__builtins__'
 import cls from 'classnames'
-import { isValid, isNum, isBool } from '@formily/shared'
+import { isValid, isNum, isBool, isEqual } from '@formily/shared'
 import ResizeObserver from 'resize-observer-polyfill'
 import { FormGridContext } from './context'
 
@@ -163,7 +163,9 @@ const useLayout = (props: ILayoutProps): ILayout => {
       const params = calculateSmartColumns(ref.current)
       setLayout(params)
       const style = getStyle({ columnGap, rowGap, layoutParams: params, ref })
-      setStyles(style)
+      if (!isEqual(style, styles)) {
+        setStyles(style)
+      }
     }
     const resizeObserver = new ResizeObserver(observer)
     const mutationObserver = new MutationObserver(observer)