事半功倍！不要错过这5个React应用程序库......但是当你遇到我今天要介绍的这些库时，你会感到惊讶！我喜欢React的一件事是它没有固定的方式来构建应用程序。开发人员可以自由选择要使用的库和要遵循的模式，您也可以随意实现自己的想法。此处创建的大多数应用程序，无论是工作项目还是个人项目，都是从同一个库开始的。使用React社区，您不必花时间重新发明轮子，而可以花更多时间为用户提供价值。所以不要错过哦~1.Formik面对现实吧，几乎所有的网络应用程序都有表单，这是一个棘手的事情。对于用户来说，没有什么比表单无法正常工作，或在错误验证后重置，再次输入所有信息更令人沮丧的了。正确的表单是在Web应用程序中获得良好用户体验的关键。这意味着：表单字段应该有客户端验证。在用户“触摸”或表单提交之前，字段不应显示错误。无效提交的表单状态不应“丢失”或“重置”。提交后，表单应进行异步（服务器端）验证。自己编写一个组件来处理所有这些事情是相当复杂的。需要跟踪所有的表单值，以及所有表单域的“触摸”状态，甚至“错误”。此外，需要构建表单提交的逻辑。这些都需要足够通用，以便在整个应用程序中重复使用。没有人愿意在登录表单、注册表单、地址表单等中一遍又一遍地重复它。因此，使用来自React社区的流行库是比构建自己的库更好的选择。Formik是由JaredPalmer开发的一个库，它使编写表单变得轻而易举。2、测试库测试，节省大量时间。当我创建一个复杂的功能或组件时，我总是在设计、生产和开发之间“徘徊”。设计师可能会要求视觉或UX更改，而产品部门可能会要求UX更改。我不得不不断地迭代、重构和更新组件。通过确保对组件或功能进行适当的测试，您可以确保此重构不会让回归潜入代码库。节省了大量的人工测试时间，让人更有信心。在测试React应用程序时，有一个黄金标准：testing-library/react，也称为react-testing-library。它内置于create-react-app中，因此入门很容易。使用测试库，可以从用户的角度测试组件。这是什么意思？让我们用一个实际的例子来说明。在这个例子中，作者为一个简单的注册表编写了一个测试。它要求用户提供姓名、电子邮件和密码。这些是必填字段，如果省略任何字段，表单将在提交时显示错误。从“@testing-library/react”导入{render，fireEvent}；从“@testing-library/user-event”导入userEvent；从“./Form”导入{SignupForm}；描述（“SignupForm”，（）=>{it("当输入密码时应该显示错误",()=>{constrenderrendered=render();constnameInput=rendered.queryByLabelText("Name");userEvent.type(nameInput,"JohnSmith");constemailInput=rendered.queryByLabelText（“电子邮件”）；userEventtype（emailInput，“john@smith.net”）；constsubmitButton=rendered.queryByText（“提交”）；userEvent.click（submitButton）；期望（rendered.queryByText（“请输入您的密码”)).toBeInTheDocument();});});如您所见，首先使用react-testing-library呈现注册表单。然后输入您的姓名和电子邮件。然后点击提交。最后，出现“请输入您的密码”。此测试中的所有内容都基于用户与表单的交互方式。可以重构表单以使用不同的输入，拆分为多个反应组件，所有这些都不会破坏测试。3.CSS-Modules和Classnames当我开始一个新的React项目时，我通常选择CSS-Modules。借助create-react-app内置的支持，可以轻松上手。当然，您可以通过遵循BEM来避免依赖性，但是您需要学习如何使用BEM。CSS-Modules提供可预测的、有限的范围和干净的CSS。我喜欢在CSS模块中使用类名。先看下面的代码：constclassName='button'+props.hasError?'error':'';return();有了类名，就可以简化了，那么就变成这样了：constButton=props=>();你甚至可以将它与CSS-Modules结合起来：importstylesfrom'./Button.module.css';constButton=props=>();有作用域，写CSS方便，就问你如果好吃的话！4.Downshift也许你会问，为什么要使用外部库来创建像下拉列表或选择输入这样简单的东西？构建一个基于鼠标点击的打开或关闭组件非常简单。但与许多前端任务一样，困难的不仅仅是构建组件。创建一个可供许多依赖屏幕阅读器的互联网用户访问和使用的下拉列表并非易事，让它在键盘用户中正常工作也并非易事。这也是笔者喜欢使用downshift的原因。它具有这样的可访问性，可以自由选择其他功能和形式。来源：unsplash当我开始一个新的React应用程序时，我总是安装这些库，节省时间和精力，不是很漂亮吗？Formik可以更快地编写漂亮的表格。测试库有助于编写持久的集成测试，为应用程序提供信心。CSS模块和类名用于编写作用域CSS。Downshift可以在不覆盖默认样式的情况下创建可访问的组合框和选择输入。这样的神器，你值得拥有！
