Analysis of Antd Form Implementation Mechanism

Antd Form is a higher‑order component that delegates data handling to rc‑form, providing a declarative API for collecting, validating, and updating form values.

The Form component itself only manages layout and styling; the core logic resides in rc‑form’s createBaseForm and createFieldsStore functions.

When Form.create() wraps a component, it injects a form prop that provides methods such as getFieldDecorator , which wraps individual input elements and synchronizes their value and onChange events with the internal FieldsStore .

The FieldsStore maintains two maps: fields (real‑time values, dirty flags, errors, touched state, etc.) and fieldsMeta (configuration such as validation rules, triggers, getValueFromEvent, etc.).

User interactions trigger onCollect (or onCollectValidate ) which reads the current value via getValueFromEvent , marks the field as dirty, and updates fields through setFields . Validation is performed by validateFieldsInternal , which builds an AsyncValidator instance from the field rules and updates error states.

Finally, setFields calls forceUpdate on the wrapped component, causing React to re‑render; during render, getFieldDecorator reads the latest values and error information from FieldsStore and injects them into the decorated element.

Advanced features include:

Nested data collection using object‑path field names (e.g., nested.fieldObj.name ) which are automatically transformed into nested objects.

Custom component integration: a component must provide a controlled value (or valuePropName ) prop, a matching onChange (or trigger ) prop, and support ref .

Form linkage: derived values can be computed with getters that read form.getFieldValue , enabling dependent fields to show or hide based on other fields.

The article concludes that while Antd Form offers great flexibility, frequent updates can cause performance bottlenecks in large forms; the upcoming rc‑field‑form replacement aims to address this with a performance‑first approach.