React 中的声明式表单与 React-Formz

React 中的声明式表单与 React-Formz

React-Formz 简介：一个 React 库，它使构建复杂表单的声明性和高性能。

必须编写程序供人们阅读，并且只是偶然地供机器执行。 — Harold Abelson，计算机程序的结构和解释

到目前为止，我们都已经听过这句话一​​百万次了：React 代码是声明性的。阅读 React 代码有时就像阅读一本概念清晰、语言通俗易懂的非常简单的书。而其他时候，就像阅读宜家家具手册一样。它让你想把头发拉出来，因为你刚刚将相同的 10 行重新阅读了 5 次，而你现在实际上比 10 分钟前理解的要少。

很多时候我们忘记了 React 代码应该是声明性的。有时是因为我们很早就选择了一个我们认为很棒的库，然后随着我们的产品增长或变得更加复杂，我们的代码也随之而来。其他时候是因为我们很着急，只需要在最后期限之前完成，我们告诉自己我们最终会重构它并使代码更清晰，但是，我们曾经做过吗？

正因为如此，我相信第三方库的部分工作是让开发人员更容易编写声明性代码。如果 React 库的 API 以开箱即用的方式编写组件/方法是声明性的，那么即使开发人员不一定有时间这样做，它也会使开发人员更容易遵循声明性代码的原则明确地。

这就是我决定构建 React-Formz 的原因，以使构建复杂的表单具有声明性和高性能。

动机

在我作为主要专注于 React 的软件开发人员的 8 年职业生涯中，我在不同行业构建了许多表单，并使用了市场上所有主要的表单库。我构建的大多数表单都涉及复杂性，其中字段可能依赖于另一个字段，或者表单可能通过一系列页面（即向导或表格界面）收集数据。

对于每种形式的库，我总是遇到同样的两个问题，或者：

1. 随着表单复杂性的增加，性能开始下降，尤其是对于计算机速度较慢的用户
2. 随着表单复杂性的增加，代码的复杂性也会增加，而随着这种复杂性的增加，可读性也会降低。

因此，我决定全力以赴，构建一个我喜欢使用的表单库，它：

1. 使构建易于理解的表单成为可能。
2. 无需特殊语法即可轻松与第三方库集成。
3. 即使投入增加，也能保持一致的性能。
4. 字段相互依赖的内置功能，即字段 a 依赖于字段 b。

我相信，React Formz 实现了我的所有目标，我很高兴与大家分享！

基础知识

首先，您可以通过 npm 或 yarn 安装 React Formz：

 npm install @zerry/react-formz immer 纱线添加@zerry/react-formz immer

正如我所提到的，React Formz 基本上基于 2 个原则：

• 声明式编程
• 可扩展的性能

React Formz 中有 2 个基本组件：

• 形式
• 场地

所有其他概念都建立在这两个基本组件之上。让我们看一些示例代码。

如您所见，上面的代码非常易于理解，但在后台您将获得以下功能：

1. 无论您渲染多少输入，性能都接近恒定。 React Formz 确保字段仅在其值更改或其依赖项之一的值更改时重新呈现。
2. 用于常见验证的内置字段验证以及实现自定义验证的能力。
3. 任何开发人员只需查看代码即可轻松理解声明性字段。
4. 依赖字段根据另一个字段的值更改其值。
5. 没有提供者、控制器或快速字段。每个字段都已经过优化，可以响应和管理自己的值，无论该字段在组件树中有多深。
6. 类型安全字段，以确保您使用正确类型的值。

验证

React Formz 还支持对字段进行验证，如您在上面看到的，以及通过模式对表单进行验证。到目前为止，Yup 和 Zod 都支持模式验证，但可以并且将添加更多。

如您所见，通过几行代码，您可以获得上一节中提到的所有功能，以及根据预定义模式使整个表单无效的能力。

挂钩

我想要一个不强迫开发人员使用钩子或组件的库，我希望允许开发人员使用最佳方法来满足他们的需求。 React Formz 还有一个可以用于字段的钩子 API：

概括

希望您喜欢阅读并很高兴尝试图书馆。我的目标是让 React Formz 在不牺牲性能的情况下让表单构

市场上有很多很棒的表单库激发了我使用 React Formz 的工作，特别是 Formik 和 React Hook Form。所以，我要感谢这些库的开发人员的灵感！

你可以在官网阅读更多关于 React Formz 的内容： https://react-formz.zerry.dev/

如果你觉得这个库很有趣，请告诉我，如果你讨厌它，也请告诉我！

更多内容在 ** 纯英语.io** .注册我们的 ** 免费每周通讯** .跟着我们 ** 推特** , ** 领英** , ** YouTube** ， 和 ** 不和谐** .对增长黑客感兴趣？查看 ** 电路** .

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/37150/08501710