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.