From 9fdb82b7df44dab65687c590c5d26e273e6d7860 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Sun, 8 Mar 2020 16:28:33 +0800
Subject: [PATCH] refactor: Form.Item with pure children will only render once
 (#21991)

* refactor: Form.Item with pure children will only render once

* not skip for real render
---
 components/form/FormItem.tsx            | 28 +++++++++++++++++++++-
 components/form/__tests__/index.test.js | 31 +++++++++++++++++++++++++
 2 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx
index 24d7e6dfbb..1971080706 100644
--- a/components/form/FormItem.tsx
+++ b/components/form/FormItem.tsx
@@ -21,6 +21,21 @@ type RenderChildren = (form: FormInstance) => React.ReactNode;
 type RcFieldProps = Omit<FieldProps, 'children'>;
 type ChildrenType = React.ReactElement | RenderChildren | React.ReactElement[] | null;
 
+interface MemoInputProps {
+  value: any;
+  update: number;
+  children: any;
+}
+
+const MemoInput = React.memo<MemoInputProps>(
+  ({ children }) => {
+    return children;
+  },
+  (prev, next) => {
+    return prev.value === next.value && prev.update === next.update;
+  },
+);
+
 export interface FormItemProps
   extends FormItemLabelProps,
     FormItemInputProps,
@@ -216,6 +231,10 @@ function FormItem(props: FormItemProps): React.ReactElement {
     return renderLayout(children);
   }
 
+  // Record for real component render
+  const updateRef = React.useRef(0);
+  updateRef.current += 1;
+
   return (
     <Field
       {...props}
@@ -296,7 +315,14 @@ function FormItem(props: FormItemProps): React.ReactElement {
             };
           });
 
-          childNode = React.cloneElement(children, childProps);
+          childNode = (
+            <MemoInput
+              value={mergedControl[props.valuePropName || 'value']}
+              update={updateRef.current}
+            >
+              {React.cloneElement(children, childProps)}
+            </MemoInput>
+          );
         } else if (isRenderProps && shouldUpdate && !hasName) {
           childNode = (children as RenderChildren)(context);
         } else {
diff --git a/components/form/__tests__/index.test.js b/components/form/__tests__/index.test.js
index 186ec5a194..a34ca18087 100644
--- a/components/form/__tests__/index.test.js
+++ b/components/form/__tests__/index.test.js
@@ -621,4 +621,35 @@ describe('Form', () => {
     }
     expect(instances.size).toEqual(1);
   });
+
+  it('avoid re-render', async () => {
+    let renderTimes = 0;
+
+    const MyInput = ({ value = '', ...props }) => {
+      renderTimes += 1;
+      return <input value={value} {...props} />;
+    };
+
+    const Demo = () => (
+      <Form>
+        <Form.Item name="username" rules={[{ required: true }]}>
+          <MyInput />
+        </Form.Item>
+      </Form>
+    );
+
+    const wrapper = mount(<Demo />);
+    renderTimes = 0;
+
+    wrapper.find('input').simulate('change', {
+      target: {
+        value: 'a',
+      },
+    });
+
+    await delay();
+
+    expect(renderTimes).toEqual(1);
+    expect(wrapper.find('input').props().value).toEqual('a');
+  });
 });