日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
事半功倍！這5個(gè)React應(yīng)用程序庫(kù)不要錯(cuò)過(guò)……

編輯 搜圖或許你一直在從頭開(kāi)始構(gòu)建React應(yīng)用程序，這當(dāng)然無(wú)可厚非。但當(dāng)你遇見(jiàn)了今天要介紹的這些庫(kù)，一定會(huì)感嘆相見(jiàn)恨晚!

React最令人喜愛(ài)的地方是，沒(méi)有固定的方法來(lái)構(gòu)建應(yīng)用程序。開(kāi)發(fā)人員可以自由選擇要使用的庫(kù)和要遵循的模式，你可以隨意去實(shí)現(xiàn)自己天馬行空的想法。

在這里所創(chuàng)建的大多數(shù)應(yīng)用程序，無(wú)論是用于工作還是個(gè)人項(xiàng)目，都是從相同的庫(kù)開(kāi)始的。

利用React社區(qū)，你不必再耗時(shí)另起爐灶，可以花更多的時(shí)間為用戶提供價(jià)值。

所以千萬(wàn)不要錯(cuò)過(guò)呀~

1. Formik

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

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

那就意味著：

  • 表單字段應(yīng)具有客戶端驗(yàn)證。
  • 字段在用戶“觸摸”或表單提交之前不應(yīng)顯示錯(cuò)誤。
  • 無(wú)效提交時(shí)，表單狀態(tài)不應(yīng)為“丟失”或“重置”。
  • 提交后，表單應(yīng)該進(jìn)行異步(服務(wù)器端)驗(yàn)證。

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

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

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

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

2. 測(cè)試庫(kù)

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

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

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

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

什么意思?下面用一個(gè)實(shí)際的例子來(lái)說(shuō)明。

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

 
 
 
      
  
  
  1. import {render, fireEvent } from "@testing-library/react"; 
    2.   
  
  
  2. import userEvent from "@testing-library/user-event"; 
    3.   
  
  
  3. import { SignupForm } from "./Form";describe("SignupForm",() => { 
    4.   
  
  
  4.   it("should show an error whenpassword is omitted", () => { 
    5.   
  
  
  5.     const renderrendered =render(); 
    6.   
  
  
  6.     const nameInput =rendered.queryByLabelText("Name"); 
    7.   
  
  
  7.     userEvent.type(nameInput, "JohnSmith"); 
    8.   
  
  
  8.     const emailInput =rendered.queryByLabelText("Email"); 
    9.   
  
  
  9.     userEventtype(emailInput, "john@smith.net"); 
    10.   
  
  
  10.     const submitButton =rendered.queryByText("Submit"); 
    11.   
  
  
  11.     userEvent.click(submitButton); 
    12.   
  
  
  12.     expect( 
    13.   
  
  
  13.       rendered.queryByText("Pleaseinput your password") 
    14.   
  
  
  14.     ).toBeInTheDocument(); 
    15.   
  
  
  15.   }); 
    16.   
  
  
  16. }); 
    17.

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

之后輸入姓名與郵箱。

之后點(diǎn)擊提交。

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

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

3. CSS-Modules和Classnames

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

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

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

 
 
 
      
  
  
  1. constclassName = 'button ' + props.hasError ? 'error' : '';return ( 
    2.   
  
  
  2.   
    3.   
  
  
  3. ); 
    4.

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

 
 
 
      
  
  
  1. constButton = props => ( 
    2.   
  
  
  2.     
  
  
  3.    className={classnames("button", { error: props.hasError })} 
    4.   
  
  
  4.     {...props} 
    5.   
  
  
  5.   /> 
    6.   
  
  
  6. ); 
    7.

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

 
 
 
      
  
  
  1. importstyles from './Button.module.css';const Button = props => ( 
    2.   
  
  
  2.     
  
  
  3.     className={classnames(styles.button,{ [styles.error]: props.hasError })} 
    4.   
  
  
  4.     {...props} 
    5.   
  
  
  5.   /> 
    6.   
  
  
  6. ); 
    7.

有作用域，易于編寫(xiě)CSS，就問(wèn)你香不香!

4. Downshift

也許你會(huì)問(wèn)，為什么要使用外部庫(kù)來(lái)創(chuàng)建像下拉列表或選擇輸入這樣簡(jiǎn)單的東西呢?

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

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

這就是筆者喜歡使用downshift的原因。它具有這樣的可訪問(wèn)性，并可自行選擇其他的功能與形式。

圖源：unsplash

當(dāng)筆者開(kāi)始一個(gè)新的React應(yīng)用程序時(shí)，總會(huì)安裝這些庫(kù)，省時(shí)省力，豈不美哉?

Formik能更快編寫(xiě)漂亮的表單。

測(cè)試庫(kù) 有助于編寫(xiě)耐用的集成測(cè)試，為應(yīng)用程序提供信心。

CSS Modules 和 classnames 用于編寫(xiě)有作用域的CSS。

Downshift 可以創(chuàng)建可訪問(wèn)的組合框和選擇輸入，而無(wú)需覆蓋默認(rèn)樣式。

這樣的神器，你值得擁有!


網(wǎng)站題目：事半功倍！這5個(gè)React應(yīng)用程序庫(kù)不要錯(cuò)過(guò)……
網(wǎng)頁(yè)地址：http://www.dlmjj.cn/article/djshipd.html