feat: Form support useWatch (#35036)

* feat: Support useWatch

* test: update test case

* chore: update snapshot

components/form/Form.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useMemo } from 'react';
 import classNames from 'classnames';
-import FieldForm, { List } from 'rc-field-form';
+import FieldForm, { List, useWatch } from 'rc-field-form';
 import { FormProps as RcFormProps } from 'rc-field-form/lib/Form';
 import { ValidateErrorEntity } from 'rc-field-form/lib/interface';
 import { Options } from 'scroll-into-view-if-needed';
@@ -140,6 +140,6 @@ const Form = React.forwardRef<FormInstance, FormProps>(InternalForm) as <Values
   props: React.PropsWithChildren<FormProps<Values>> & { ref?: React.Ref<FormInstance<Values>> },
 ) => React.ReactElement;
 
-export { useForm, List, FormInstance };
+export { useForm, List, FormInstance, useWatch };
 
 export default Form;

components/form/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -14850,6 +14850,89 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
 </form>
 `;
 
+exports[`renders ./components/form/demo/useWatch.md extend context correctly 1`] = `
+Array [
+  <form
+    autocomplete="off"
+    class="ant-form ant-form-vertical"
+  >
+    <div
+      class="ant-row ant-form-item"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          for="field1"
+          title="Field 1 (Watch to trigger rerender)"
+        >
+          Field 1 (Watch to trigger rerender)
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="field1"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-row ant-form-item"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          for="field2"
+          title="Field 2 (Not Watch)"
+        >
+          Field 2 (Not Watch)
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="field2"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>,
+  <article
+    class="ant-typography"
+  >
+    <pre>
+      Field 1 Value: 
+    </pre>
+  </article>,
+]
+`;
+
 exports[`renders ./components/form/demo/validate-other.md extend context correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"

components/form/__tests__/__snapshots__/demo.test.js.snap

@@ -6098,6 +6098,89 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
 </form>
 `;
 
+exports[`renders ./components/form/demo/useWatch.md correctly 1`] = `
+Array [
+  <form
+    autocomplete="off"
+    class="ant-form ant-form-vertical"
+  >
+    <div
+      class="ant-row ant-form-item"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          for="field1"
+          title="Field 1 (Watch to trigger rerender)"
+        >
+          Field 1 (Watch to trigger rerender)
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="field1"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-row ant-form-item"
+    >
+      <div
+        class="ant-col ant-form-item-label"
+      >
+        <label
+          class=""
+          for="field2"
+          title="Field 2 (Not Watch)"
+        >
+          Field 2 (Not Watch)
+        </label>
+      </div>
+      <div
+        class="ant-col ant-form-item-control"
+      >
+        <div
+          class="ant-form-item-control-input"
+        >
+          <div
+            class="ant-form-item-control-input-content"
+          >
+            <input
+              class="ant-input"
+              id="field2"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>,
+  <article
+    class="ant-typography"
+  >
+    <pre>
+      Field 1 Value: 
+    </pre>
+  </article>,
+]
+`;
+
 exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
 <form
   class="ant-form ant-form-horizontal"

components/form/demo/useWatch.md

@@ -0,0 +1,44 @@
+---
+order: 3.3
+version: 4.20.0
+title:
+  zh-CN: 字段监听 Hooks
+  en-US: Watch Hooks
+---
+
+## zh-CN
+
+`useWatch` 允许你监听字段变化，同时仅当改字段变化时重新渲染。
+
+## en-US
+
+`useWatch` helps watch the field change and only re-render for the value change.
+
+```tsx
+import React from 'react';
+import { Form, Input, Typography } from 'antd';
+
+const Demo = () => {
+  const [form] = Form.useForm<{ field1: string; field2: string }>();
+  const nameValue = Form.useWatch(['field1'], form);
+
+  return (
+    <>
+      <Form form={form} layout="vertical" autoComplete="off">
+        <Form.Item name="field1" label="Field 1 (Watch to trigger rerender)">
+          <Input />
+        </Form.Item>
+        <Form.Item name="field2" label="Field 2 (Not Watch)">
+          <Input />
+        </Form.Item>
+      </Form>
+
+      <Typography>
+        <pre>Field 1 Value: {nameValue}</pre>
+      </Typography>
+    </>
+  );
+};
+
+export default Demo;
+```

components/form/index.tsx

@@ -1,5 +1,5 @@
 import { Rule, RuleObject, RuleRender } from 'rc-field-form/lib/interface';
-import InternalForm, { useForm, FormInstance, FormProps } from './Form';
+import InternalForm, { useForm, FormInstance, FormProps, useWatch } from './Form';
 import Item, { FormItemProps } from './FormItem';
 import ErrorList, { ErrorListProps } from './ErrorList';
 import List, { FormListProps } from './FormList';
@@ -10,6 +10,7 @@ type InternalFormType = typeof InternalForm;
 
 interface FormInterface extends InternalFormType {
   useForm: typeof useForm;
+  useWatch: typeof useWatch;
   Item: typeof Item;
   List: typeof List;
   ErrorList: typeof ErrorList;
@@ -25,6 +26,7 @@ Form.Item = Item;
 Form.List = List;
 Form.ErrorList = ErrorList;
 Form.useForm = useForm;
+Form.useWatch = useWatch;
 Form.Provider = FormProvider;
 Form.create = () => {
   devWarning(

package.json

@@ -129,7 +129,7 @@
     "rc-dialog": "~8.7.0",
     "rc-drawer": "~4.4.2",
     "rc-dropdown": "~3.4.0",
-    "rc-field-form": "~1.25.0",
+    "rc-field-form": "~1.26.1",
     "rc-image": "~5.4.0",
     "rc-input": "~0.0.1-alpha.5",
     "rc-input-number": "~7.3.0",