江苏龙网

  1. 首页 > 资讯 > 科技 > >

[]事半功倍！这5个React应用程序库不要错过……


全文共2003字 ， 预计学习时长9分钟

[]事半功倍！这5个React应用程序库不要错过……
本文插图

图源：unsplash
编辑 搜图或许你一直在从头开始构建React应用程序 ， 这当然无可厚非 。 但当你遇见了今天要介绍的这些库 ， 一定会感叹相见恨晚！
React最令人喜爱的地方是 ， 没有固定的方法来构建应用程序 。 开发人员可以自由选择要使用的库和要遵循的模式 ， 你可以随意去实现自己天马行空的想法 。
在这里所创建的大多数应用程序 ， 无论是用于工作还是个人项目 ， 都是从相同的库开始的 。
利用React社区 ， 你不必再耗时另起炉灶 ， 可以花更多的时间为用户提供价值 。
所以千万不要错过呀~

[]事半功倍！这5个React应用程序库不要错过……
本文插图

1. Formik
面对现实吧 ， 几乎所有的网络应用程序都有表单 ， 这是一件很棘手的事情 。
对于用户来说 ， 没有什么比表单不能正常工作 ， 或在错误验证后重置 ， 再次输入所有信息更让人沮丧的了 。 表单正确 ， 是网络应用程序中让用户拥有良好体验的关键 。

[]事半功倍！这5个React应用程序库不要错过……
本文插图

图源：unsplash
那就意味着：
· 表单字段应具有客户端验证 。
· 字段在用户“触摸”或表单提交之前不应显示错误 。
· 无效提交时 ， 表单状态不应为“丢失”或“重置” 。
· 提交后 ， 表单应该进行异步（服务器端）验证 。
自己编写一个处理所有这些事情的组件是相当复杂的 。 需要跟踪所有表单值 ， 以及所有表单字段的“触摸”状态 ， 甚至包括 “错误” 。
此外 ， 还需要构建表单提交的逻辑 。 这些都需要足够通用 ， 以便在整个应用程序中重用 。 没有人想在登录表单、注册表单、地址表单等等中一遍遍重复它 。
所以 ， 使用React社区的一个流行库 ， 是比自己构建更好的选择 。
Formik是JaredPalmer开发的一个库 ， 在这里 ， 表单编写变得轻而易举 。

[]事半功倍！这5个React应用程序库不要错过……
本文插图

2. 测试库
测试省了很多时间 。 当笔者创建一个复杂的特性或组件时 ， 总是在设计、产品和开发之间“游荡” 。 设计师可能会要求进行视觉或UX更改 ， 产品部门可能要求更改UX 。 笔者只得不断地反复、重构和更新组件 。
通过确保组件或特性的正确测试 ， 可以确保这种重构不会允许回归潜入代码库 。 它节省了大量的人工测试时间 ， 这给了人们更多信心 。

[]事半功倍！这5个React应用程序库不要错过……
本文插图

图源：unsplash
涉及到测试React应用程序时 ， 有一个黄金标准:testing-library/react ， 也称为react-testing-library 。 它已经内置在create-react-app中 ， 所以入门就变得很简单啦 。
使用testing-library ， 可以从用户的角度测试组件 。
什么意思？下面用一个实际的例子来说明 。
在这个示例中 ， 笔者为一个简单的注册表单编写了一个测试 。 它要求用户提供姓名、电子邮件和密码 。 这些都是必填字段 ， 如果省略了任何一项 ， 那么表单应该在提交时显示一个错误 。
import {render, fireEvent } from ''@testing-library/react''; import userEvent from ''@testing-library/user-event''; import { SignupForm } from ''./Form'';describe(''SignupForm'',() => { it(''should show an error whenpassword is omitted'', () => { const rendered =render(); const nameInput =rendered.queryByLabelText(''Name''); userEvent.type(nameInput, ''JohnSmith''); const emailInput =rendered.queryByLabelText(''Email''); userEventtype(emailInput, ''john@smith.net''); const submitButton =rendered.queryByText(''Submit''); userEvent.click(submitButton); expect( rendered.queryByText(''Pleaseinput your password'') ).toBeInTheDocument(); }); });


推荐阅读


上一篇：『』iPad Pro 2020款6229元起步 无5G网络成唯一遗憾

下一篇：『』Space X猎鹰9号成功将60颗星链卫星送入轨道，总数达360颗