在 React 或 ReactJS 中创建表单可能需要大量代码，具体取决于您需要什么以及您希望如何管理每个表单字段。 因此，开发人员一直在寻找能够让他们的生活更轻松的工具。 一种这样的工具是 React 中的 Formik。 在 React 中使用 Formik 的表单事半功倍。 我们将讨论 Formik 是什么以及为什么要将它用于您的 Web 和移动 Web 应用程序。
React 中的 Formik 是什么？
Formik 是一个免费的开源轻量级库，适用于 ReactJS 或 React Native，解决了表单创建的三个关键痛点：
- 如何操作表单状态。
- 如何处理表单验证和错误消息。
- 如何处理表单提交。
Formik 库是 Jared Palmer 出于在构建 React 表单时的挫败感而编写的，旨在标准化输入组件和表单提交流程。 这个想法是为了让事情井井有条，并在一个地方，简化测试、重构和对表单的推理。
福美克优势
极其灵活
Formik 是一个灵活的库，允许您决定何时使用以及使用多少。 为了 example，您可以将它与 HTML 输入字段一起使用，或者使用 是的. 对于不熟悉的人，Yup 是一个用于值解析和验证的 JavaScript 模式构建器，允许您定义模式、转换值以匹配、验证现有值的形状，或两者兼而有之。
减少 Redux 表单的延迟
ReactJS 中 Formik 的目标是通过非常少的 API 提供可扩展且高性能的表单助手。 React 中还有其他管理表单的工具，例如 Redux Form。 虽然它无疑是许多开发人员使用的一个很好的工具，但也有一些缺点。
Redux Form 的一个缺点与使用 reducer 有关。 在 Redux 中，reducer 是一个函数，它将当前状态和动作作为参数并返回一个新状态作为结果。 在 ReactJS 表单中，每次击键都会多次调用完整的顶级 reducer。
对于较小的应用程序，每次击键对减速器的这种调用不是一个因素。 然而，随着应用程序变得越来越大，延迟是不可避免的，并且会继续增长。
Formik的缺点
仅适用于 React 和 React Native
与任何工具一样，也有一些缺点。 一个主要缺点是 Formik 只能在 ReactJS 和 React Native（以 React 为中心的整个框架）中使用。 因此，如果您使用其他语言创建表单或使用其他框架，Formik 将无法使用。
受控组件导致重新渲染
另一个潜在的缺点是组件的受控性质。 ReactJS 和 React Native 以这种方式处理组件。 虽然每次击键都不会像 Redux Form 那样被调用到 reducer，但它们会根据状态重新渲染。
表单验证
自定义表单验证并不适合所有人。 根据您开发应用程序的方式，编写自己的验证代码或使用外部验证库（例如 Yup）可能是不利的。
总结
对于那些在 React 中创建表单的人来说，Formik 是一个可行的库。 React 中的 Formik 有助于实现更简单的状态管理、表单提交、验证和错误消息处理。 此外，它比 Redux Form 灵活且延迟更低。
如果您对 JavaScript 感到满意，并且正在寻找可以为您提供可预测的价格、无与伦比的支持和您可以信赖的基础设施的网络托管服务提供商，请立即联系我们的销售团队以开始使用 Liquid Web！
