“This is my 35th day of participating in the First Challenge 2022. For more details: First Challenge 2022.”

Writing in the front

• In previous articles, we have also implemented a set of Form components modeled after rC-Form, the underlying library for Form forms in ANTD V3
• The My-Form component provides two main functions:
  • Centrally manages the data entered by data entry components
  • A data entry event that hosts a data entry component
• However, due to the use of higher-order components, as long as there is a data input component, the data input will update the state of the entire centrally managed data, resulting in the update of the entire form component, resulting in unnecessary performance waste
• If there are not many data entry components, such as a simple login form, there may be only two input fields, and the performance waste is not obvious
• However, in some scenarios where there are many data input components and complex services, frequent updates of the entire Form may cause page lag and seriously affect user experience
• To solve this problem, the underlying library for forms used in ANTD V4 has been replaced with rC-field-form, discarding the previous higher-order component writing and using the latest tie-in of Context + Hooks
• In order to learn how to implement rC-field-form, we will continue to implement it step by step by hand in the next few articles

Overhand experience

export class ClassMyRCFormPage extends Component {
  formRef = React.createRef();

  componentDidMount() {
    this.formRef.current.setFieldsValue({ user: "class form default" });
  }

  onFinish = (val) = > console.log("onFinish", val);

  onFinishFailed = (val) = > console.log("onFinishFailed", val);

  render() {
    return (
      <div style={{ width: 500.margin: "auto}} ">
        <h2>class-my-rc-field-formPage</h2>
        <Form
          ref={this.formRef}
          onFinish={this.onFinish}
          onFinishFailed={this.onFinishFailed}
        >
          <Field name="user" label="Account" rules={userRules}>
            <Input placeholder="Please enter your account number" />
          </Field>

          <Field name="pwd" label="Password" rules={pwdRules}>
            <Input placeholder="Please enter your password" />
          </Field>

          <button>Submit</button>
        </Form>
      </div>); }}Copy the code

• Above is the use of our hand-written Form component demo, and the previous V3 version of the use of the way is not very different
• Now, of course, the way it’s used is a little bit more concise, a little bit more semantic
• But their inner realizations are really two completely different ideas
• We’ll try it today and continue to improve its functionality step by step in the next article

The last

• That’s all for today’s sharing, and you’re welcome to discuss it in the comments section 👏.
• If you feel that the article is written well, I hope you do not begrudge praise, everyone’s encouragement is the biggest power I share 🥰