有上百個(gè)很棒的React庫(kù)可供選擇，但是你的React項(xiàng)目最需要哪些庫(kù)呢?在本文中，我們將分解你的React項(xiàng)目所需的五個(gè)庫(kù)。想學(xué)習(xí)React的同學(xué)可以報(bào)名參加Web前端培訓(xùn)，這里的課程豐富，涵蓋面廣，可以幫助你獲得全面提升。

　　1.更快的Create-React-App

　　如果你想創(chuàng)建一個(gè)React項(xiàng)目，你可能會(huì)使用像Create-React-App這樣的工具。

　　雖然Create-React-App是一個(gè)令人驚嘆的工具，并允許你通過(guò)運(yùn)行一個(gè)命令來(lái)創(chuàng)建React項(xiàng)目，但它有一個(gè)新的競(jìng)爭(zhēng)對(duì)手—Vite。

　　Create-React-App使用Webpack來(lái)構(gòu)建我們的React開(kāi)發(fā)代碼。但是已經(jīng)出現(xiàn)了在速度上與Webpack競(jìng)爭(zhēng)的構(gòu)建工具。Vite就是這樣一個(gè)構(gòu)建工具，它使用一個(gè)更快的捆綁器，稱為esbuild。簡(jiǎn)而言之，它利用了瀏覽器的本地ES模塊來(lái)獲得更快的開(kāi)發(fā)體驗(yàn)。

　　在開(kāi)發(fā)中運(yùn)行React時(shí)，Vite比Create-React-App快很多倍。如果你有時(shí)對(duì)Create-React-App需要多長(zhǎng)時(shí)間啟動(dòng)感到煩惱，一定要看看Vite。

　　最重要的是，我強(qiáng)烈推薦這個(gè)工具Create-Next-App。這允許我們非常快速地創(chuàng)建下一個(gè)JS項(xiàng)目。是的，Next.js是一個(gè)框架，但它是一個(gè)React框架，需要的依賴性非常少。事實(shí)上，它只需要依賴React、React DOM和Next。

　　創(chuàng)建下一個(gè)React項(xiàng)目時(shí)，請(qǐng)務(wù)必查看Vite和Create Next App。想要對(duì)React有更深入的了解和認(rèn)識(shí)，可以參加Web前端培訓(xùn)，通過(guò)概念講解加實(shí)戰(zhàn)項(xiàng)目演練的方式，幫你快速掌握當(dāng)下最熱門的前端框架。

　　2.數(shù)據(jù)提取庫(kù)

　　對(duì)于任何React應(yīng)用程序，我們都必須管理一些服務(wù)器狀態(tài)。這意味著我們從外部服務(wù)器(如API)獲取數(shù)據(jù)，并將這些數(shù)據(jù)引入我們的應(yīng)用程序，然后將這些數(shù)據(jù)與應(yīng)用程序組件的本地狀態(tài)相結(jié)合。

　　許多React開(kāi)發(fā)人員，不管他們的技術(shù)水平如何，都很難弄清楚如何用本地狀態(tài)管理服務(wù)器狀態(tài)。大多數(shù)開(kāi)發(fā)人員求助于像Redux這樣的庫(kù)作為解決方案。

　　在過(guò)去的一年中，出現(xiàn)了幾個(gè)庫(kù)，使得在React組件中管理服務(wù)器狀態(tài)變得非常容易。這些是React Query和軟件SWR。他們通過(guò)給我們一些非常有用的自定義鉤子來(lái)幫助我們獲取數(shù)據(jù)。但最重要的是，它們有自己的內(nèi)部緩存。這種內(nèi)部緩存允許我們非常容易地將外部數(shù)據(jù)與我們的應(yīng)用程序集成。我們將每個(gè)查詢分配給一個(gè)自定義鍵。要讀取或更新我們獲取的任何數(shù)據(jù)，我們只需要引用那個(gè)鍵!

　　除了改進(jìn)我們的狀態(tài)管理之外，獲取數(shù)據(jù)也變得更加容易，它們包括許多很棒的工具，允許我們做諸如重新提取查詢、創(chuàng)建分頁(yè)查詢、無(wú)限查詢等等。在Web前端培訓(xùn)中，你可以全面學(xué)習(xí)到 React 相關(guān)技術(shù)，了解其設(shè)計(jì)模式和最佳實(shí)踐，最終掌握使用 React 開(kāi)發(fā)大型項(xiàng)目的能力。

　　簡(jiǎn)而言之，如果你在React應(yīng)用程序中跨多個(gè)組件獲取數(shù)據(jù)，一定要使用這些較新的數(shù)據(jù)獲取庫(kù)之一。

　　

　　3.一個(gè)非常簡(jiǎn)單的狀態(tài)管理庫(kù)

　　說(shuō)到管理全局應(yīng)用狀態(tài)，Redux一直是首選。

　　它幫助React開(kāi)發(fā)人員將狀態(tài)值分離成一個(gè)共享對(duì)象值，可以在應(yīng)用程序的任何組件中讀取和更新該值。

　　然而，Redux帶來(lái)了一些概念性的包袱。為了正確設(shè)置Redux并管理我們的狀態(tài)，我們必須理解并編寫單獨(dú)的操作、縮減器和選擇器。

　　Redux有一些新的競(jìng)爭(zhēng)對(duì)手，他們?cè)噲D毫不費(fèi)力地給我們提供該庫(kù)的幾乎所有好處，這些是Zustand和Jotai。它們都非常相似，它們的強(qiáng)大之處在于，它們是用鉤子優(yōu)先的方法創(chuàng)建的，用于處理狀態(tài)。這意味著一旦創(chuàng)建了存儲(chǔ)，就可以通過(guò)將其作為鉤子調(diào)用來(lái)讀取其任何值。

　　Zustand和Jotai使?fàn)顟B(tài)管理變得更簡(jiǎn)單，因?yàn)槟悴恍枰獙⒋鎯?chǔ)分為動(dòng)作、減少器和選擇器。

　　如果你想要更新?tīng)顟B(tài)，請(qǐng)?jiān)谀愕拇鎯?chǔ)中編寫一個(gè)函數(shù)來(lái)執(zhí)行此操作，并在你的組件中使用它。如果你想選擇你的狀態(tài)的一部分，使用你的存儲(chǔ)作為鉤子并獲取你想要的狀態(tài)對(duì)象的屬性。就這么簡(jiǎn)單!所以如果你想學(xué)習(xí)React，不妨報(bào)名參加Web前端培訓(xùn)，學(xué)習(xí) React 對(duì)技能提升和職業(yè)發(fā)展都有很大的幫助。

　　另外，你不需要任何額外的庫(kù)來(lái)執(zhí)行異步操作(不像Redux，需要Redux Thunk或Redux Saga)。

　　最后，你不需要用上下文提供者包裝整個(gè)組件樹(shù)，所以除了創(chuàng)建你的存儲(chǔ)并在你的組件中使用它之外，基本上不需要任何設(shè)置。

　　4.強(qiáng)大的組件庫(kù)

　　React旨在創(chuàng)建令人印象深刻的用戶界面。因此，我們需要庫(kù)來(lái)幫助我們實(shí)現(xiàn)這個(gè)目標(biāo)。

　　有大量的組件庫(kù)為我們提供定制的、設(shè)計(jì)良好的、開(kāi)箱即用的組件。然而，面對(duì)如此多的選擇，你會(huì)選擇哪一個(gè)呢?

　　如果你希望能夠構(gòu)建外觀精美且功能相同的應(yīng)用程序，你可以查看大量維護(hù)良好的庫(kù)，如Ant Design, Material UI，以及Chakra UI。

　　所有這些庫(kù)都有大量的組件，甚至還有專用的圖標(biāo)庫(kù)。但是可以說(shuō)，它們最重要的是它們有一個(gè)直觀的語(yǔ)法，允許我們更容易地構(gòu)建有吸引力的組件。

　　大多數(shù)開(kāi)發(fā)人員選擇組件庫(kù)是因?yàn)樗鼈兊耐庥^和特性，但是最好的庫(kù)也包括額外的工具，使我們的應(yīng)用程序具有功能性。在Web前端培訓(xùn)中，你會(huì)學(xué)到很多前端框架和庫(kù)的使用技巧，包括React.js，提升自己的前端開(kāi)發(fā)能力。

　　

　　5.基于鉤子的表單庫(kù)

　　你構(gòu)建的每個(gè)React應(yīng)用程序可能都有一個(gè)表單。不用說(shuō)， 構(gòu)建表單是一件痛苦的事情!

　　不僅要?jiǎng)?chuàng)建表單本身，還要添加一些棘手的東西，比如輸入驗(yàn)證和錯(cuò)誤處理。

　　2022年你可以使用的最好的表單庫(kù)是React Hook Form和Formik。

　　在內(nèi)置鉤子的幫助下，它們使得構(gòu)建可重用的功能表單變得非常容易。甚至是具有復(fù)雜條件的表單，如相互依賴或需要異步驗(yàn)證的字段。

　　值得注意的是，F(xiàn)ormik已經(jīng)發(fā)生了變化，我們不再需要使用它以前使用的傳統(tǒng)渲染道具模式。

　　你可以使用Formik包中名為useFormik的自定義掛鉤，它允許我們借助同名的自定義掛鉤構(gòu)建表單。

　　值得注意的是，在這些庫(kù)之上，你可能需要的唯一東西是一個(gè)驗(yàn)證庫(kù)。

　　Formik和React Hook Form都旨在非常容易地與驗(yàn)證庫(kù)(如庫(kù)Yup)集成。如何做到這一點(diǎn)在他們的文檔中非常簡(jiǎn)單。React是前端常用的一個(gè)框架，想要學(xué)會(huì)這個(gè)框架的使用技能，建議報(bào)名參加Web前端培訓(xùn)，可以在短時(shí)間內(nèi)獲得較大提升。