不管是什么样的前端应用，表单都是重要的一个组件。
根据需求场景不同，表单有时候会非常复杂，元素很多，同时元素又有不同的校验规则。
表单系统
在 React 中，表单有受控open in new window和非受控open in new window两种。
尽管我们可以使用 React 直接构建表单系统，但是要想有一个完善的表单紫铜，开发量很大。好在社区里已经有了几个比较优秀的解决方案。
- React Hook Formopen in new window 基于非受控组件思路实现的表单系统，性能卓著
- Formikopen in new window 基于受控组件思路实现的表单系统，功能强大
- React Final Formopen in new window redux-formopen in new window 开发者开发的表单系统，解决了很多 redux-form 中没有解决的问题
通常我们会对表单和表单组件进行必要的封装，使得这些组件能更好的满足应用的需求。下面是封装的样例。
表单校验
表单校验是一件复杂且繁琐的工作。我们可以使用下面的几个社区方案来帮助我们减轻工作负担。
- zodopen in new window 一款基于 TypeScript 的 schema 声明和校验库
- yupopen in new window 一款负责解析值和验证值得 JavaScript schema 验证器。
这里有一份表单校验配置样例open in new window
关注微信公众号，获取最新推送~
加微信，深入交流~