React應(yīng)用程序庫有哪些

本篇內(nèi)容主要講解“React應(yīng)用程序庫有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“React應(yīng)用程序庫有哪些”吧!

1. Formik

面對現(xiàn)實吧，幾乎所有的網(wǎng)絡(luò)應(yīng)用程序都有表單，這是一件很棘手的事情。

對于用戶來說，沒有什么比表單不能正常工作，或在錯誤驗證后重置，再次輸入所有信息更讓人沮喪的了。表單正確，是網(wǎng)絡(luò)應(yīng)用程序中讓用戶擁有良好體驗的關(guān)鍵。

那就意味著：

• 表單字段應(yīng)具有客戶端驗證。

• 字段在用戶“觸摸”或表單提交之前不應(yīng)顯示錯誤。

• 無效提交時，表單狀態(tài)不應(yīng)為“丟失”或“重置”。

• 提交后，表單應(yīng)該進(jìn)行異步(服務(wù)器端)驗證。

自己編寫一個處理所有這些事情的組件是相當(dāng)復(fù)雜的。需要跟蹤所有表單值，以及所有表單字段的“觸摸”狀態(tài)，甚至包括 “錯誤”。

此外，還需要構(gòu)建表單提交的邏輯。這些都需要足夠通用，以便在整個應(yīng)用程序中重用。沒有人想在登錄表單、注冊表單、地址表單等等中一遍遍重復(fù)它。

所以，使用React社區(qū)的一個流行庫，是比自己構(gòu)建更好的選擇。

Formik是JaredPalmer開發(fā)的一個庫，在這里，表單編寫變得輕而易舉。

2. 測試庫

測試省了很多時間。當(dāng)筆者創(chuàng)建一個復(fù)雜的特性或組件時，總是在設(shè)計、產(chǎn)品和開發(fā)之間“游蕩”。設(shè)計師可能會要求進(jìn)行視覺或UX更改，產(chǎn)品部門可能要求更改UX。筆者只得不斷地反復(fù)、重構(gòu)和更新組件。

通過確保組件或特性的正確測試，可以確保這種重構(gòu)不會允許回歸潛入代碼庫。它節(jié)省了大量的人工測試時間，這給了人們更多信心。

涉及到測試React應(yīng)用程序時，有一個黃金標(biāo)準(zhǔn):testing-library/react，也稱為react-testing-library。它已經(jīng)內(nèi)置在create-react-app中，所以入門就變得很簡單啦。

使用testing-library，可以從用戶的角度測試組件。

什么意思?下面用一個實際的例子來說明。

在這個示例中，筆者為一個簡單的注冊表單編寫了一個測試。它要求用戶提供姓名、電子郵件和密碼。這些都是必填字段，如果省略了任何一項，那么表單應(yīng)該在提交時顯示一個錯誤。

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 renderrendered =render(<SignupForm />);     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();   }); });

如你所見，首先使用react-testing-library呈現(xiàn)注冊表單。

之后輸入姓名與郵箱。

之后點擊提交。

最后，出現(xiàn)了“請輸入您的密碼”。

這個測試中的一切都基于用戶如何與表單交互。可以重構(gòu)表單以使用不同的輸入，將其拆分成多個react組件，所有這些都不會破壞測試。

3. CSS-Modules和Classnames

當(dāng)筆者開始一個新的React項目時，通常會選擇CSS-Modules。create-react-app中內(nèi)置了支持，很容易上手。

當(dāng)然，可以通過遵循BEM來避免依賴，但是需要學(xué)習(xí)如何使用BEM。CSS-Modules提供了可預(yù)測的、范圍有限的、清晰的CSS。

筆者喜歡將classnames和CSS-Modules一起使用。先看下面這段代碼：

constclassName = 'button ' + props.hasError ? 'error' : '';return (  <button className={classname}{...props} /> );

有了classnames，可以進(jìn)行簡化，然后變成這樣：

constButton = props => (   <button    className={classnames("button", { error: props.hasError })}     {...props}   /> );

甚至可以將它與CSS-Modules相結(jié)合：

importstyles from './Button.module.css';const Button = props => (   <button     className={classnames(styles.button,{ [styles.error]: props.hasError })}     {...props}   /> );

有作用域，易于編寫CSS，就問你香不香!

4. Downshift

也許你會問，為什么要使用外部庫來創(chuàng)建像下拉列表或選擇輸入這樣簡單的東西呢?

構(gòu)建一個基于鼠標(biāo)單擊打開或關(guān)閉的組件確實非常簡單。但與許多前端任務(wù)一樣，困難的不僅僅是構(gòu)建組件。

創(chuàng)建一個大量依賴屏幕閱讀器的互聯(lián)網(wǎng)用戶可訪問和可用的下拉列表不簡單，讓它在keyboardusers中正常工作并非易事。

到此，相信大家對“React應(yīng)用程序庫有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！