「这是我参与2022首次更文挑战的第35天，活动详情查看：2022首次更文挑战」。

写在前面

• 前面几篇文章，我们也已经仿照 antd v3 版本中的 Form 表单的底层库 rc-form 的功能实现了一套我们自己的 Form 组件
• my-form 组件主要实现了两大功能：
  • 集中管理了数据输入组件所输入的数据
  • 托管了数据输入组件的数据输入事件
• 但是由于使用了高阶组件的原因，只要有一个数据输入组件，进行数据输入，就会更新整个集中管理数据的state，从而引起整个 form 组件的更新，造成不必要的性能浪费
• 如果数据输入组件不多的情况下，如简单的登陆表单，可能就两个输入框，性能浪费的不明显
• 但是有一些数据输入组件较多，业务比较复杂的场景下，频繁触发整个 Form 表单的更新，可能会导致页面卡顿，严重影响用户体验
• 为了解决这个问题，antd v4 中使用的 Form 的底层库已经被替换成了 rc-field-form，它抛弃了以前高阶组件的写法，使用 Context + Hooks 的最新搭配
• 为了学习 rc-field-form 的实现原理，在接下来的几篇文章中，我们会继续一步一步手写实现它

上手体验

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="账号" rules={userRules}>
            <Input placeholder="请输入账号" />
          </Field>

          <Field name="pwd" label="密码" rules={pwdRules}>
            <Input placeholder="请输入密码" />
          </Field>

          <button>Submit</button>
        </Form>
      </div>
    );
  }
}

• 上面是我们手写实现 Form 组件的使用 demo，与之前 v3 版本的使用方式其实差别不是非常大
• 当然现在的使用方式，更加简洁，更加语义化一些
• 但是它们的内在实现，确实两种完全不同的思想
• 今天先尝个鲜，后面的文章，我们继续一步一步完善它的功能

最后

• 今天的分享就到这里了，欢迎大家在评论区里面进行讨论 👏。
• 如果觉得文章写的不错的话，希望大家不要吝惜点赞，大家的鼓励是我分享的最大动力 🥰