45個NPM 包解決16個React問題

英文 | https://javascript.plainenglish.io/45-npm-packages-to-solve-16-react-problems-a9ab18946224

翻譯 | 楊小愛

React 簡直太棒了，它很受歡迎且性能良好。但是 React 的一個重要方面是，它并沒有包含所有的解決方案。

這就是為什麼我們需要尋找其他的庫來解決一些問題的原因。如果您是初學者，那麼您必須花費大量時間尋找問題的最佳解決方案。

今天我們将進行比較讨論，以了解更多有關 react 中不同問題的替代解決方案。

01、全局狀态管理

在 99% 的應用程式中，元件之間共享狀态是強制性的。并且有一些很好的解決方案 - 本地和外部。

受到推崇的

如果你問我一個解決方案，我會說 Redux。不是因為它是最好的，而是因為它是最實用的。許多公司已經在使用它，您将不得不在某個時候使用它。

redux 與 react-redux

此外，生态系統也很棒。您幾乎可以找到任何問題的解決方案。一些與 redux 一起使用的很棒的庫是：

• redux-thunk -> 用于處理異步操作。
• redux-persist -> 用于在本地存儲資料（離線支援）。
• reselect -> 用于更快地存儲查詢。

備擇方案

• context -> 内置于 React。适合簡單使用。不利于性能。特别是如果您有大量變化的資料。
• recoil -> 旨在解決特定問題。不适用于所有用例。您可以先弄清楚它後，在考慮是否使用。
• mobx -> 遵循觀察者模式。适合反應式程式設計。不應在任何新項目中使用。

02、伺服器狀态管理

如果您的應用程式嚴重依賴某些外部資料源，那麼管理該資料（緩存、預取等）對于性能至關重要。

受到推崇的

我個人是 react-query 的超級粉絲，還有很多像我一樣的人。它就像魔術一樣工作。

• recat-query

它處理緩存陳舊資料，以及更多開箱即用的功能。它簡單、強大且可配置！

備選方案

遊戲中還有另一個名為 SWR 的玩家。這是一個類似于 React Query 的庫。

• swr

這個庫的主要好處是它是由 Vercel 建構的。他們是建立 NextJS 的人。是以，在使用 NextJS 時，您可以期待更好的性能。

03、Scaffolding

從頭開始建立 React 應用程式很複雜。設定 Webpack、Bable 等可能令人生畏！

受到推崇的

NextJS 是我從頭開始建立 React 應用程式時的選擇。它被稱為全棧 React 架構。

• NextJS

在文檔中，它說，

Next.js 為您提供生産所需的所有功能的最佳開發人員體驗：混合靜态和伺服器渲染、TypeScript 支援、智能捆綁、路由預取等。無需配置。

最重要的特點是它開箱即用的 SEO 支援。這很棒！你也可以在 React 中做 SEO。但它并不像 Next 那樣簡單。

備選方案

如果您開始使用 React 或建構一些基本項目，那麼您還有其他選擇。

• create-react-app -> 建構單頁應用程式。适合初學者。
• gatsby -> 建構面向内容的靜态網站。不适用于其他用例。

04、表格處理

90% 的 Web 應用程式都有處理表單的需求，而表單的輸入是一個很大的痛苦。但我們有一些好消息！

受到推崇的

React hook 表單是用于表單處理的最新和最好的（據我說 :P ）庫。它非常高效且靈活。

• react-hook-form

它對一些外部設計庫也有很好的支援，比如 material-ui 和 ant-design。

備選方案

這個領域有一些很好的選擇。

• Formik -> Formik 帶有久經考驗的解決方案，用于輸入驗證、格式化、屏蔽、數組和錯誤處理。
• redux-form -> 不要使用它。它真的會損害性能。

05、HTTP 調用

在現代世界中，幾乎所有網站都依賴于一些外部資料源。是以進行 HTTP 調用非常簡單。

受到推崇的

Fetch 是進行 HTTP 調用的推薦方式。

• fetch

它具有有限但強大的功能。它可以支援您 95% 的工作負載。

備選方案

Axios 是對 fetch 的改進。它很受歡迎。

• Axios

它有一些不錯的特性，比如内置的 XSRF 保護和自動 JSON 轉換以及攔截 HTTP 調用的能力。如果你需要那個，你應該自己去研究。

06、Styling

你将需要Styling。毫無疑問。有多種方法可以為您的應用程式設定樣式。

受到推崇的

許多人可能不同意我的看法。但是我認為在 React 應用程式中樣式化元件是最好的選擇。

• styled-components

它有助于建立具有明确關注點分離的幹淨元件。此外，它可以通過 props 輕松管理和配置。

備擇方案

但是，正如我所說，還有其他很棒的選擇！

• plain old css -> 支援開箱即用。對于較小的項目應該沒問題。
• sass -> 對 CSS 的改進。它為管理 CSS 提供了很好的功能。适用于中型甚至更大的項目。
• styled-jsx -> 具有許多類似功能的庫，例如 styled-components。在這裡和那裡有一些額外的功能。

07、UI Library

在許多情況下，手工設計所有元件可能不是一個好主意。在這些情況下，使用某種 UI 庫可能是個好主意。

受到推崇的

對我來說最通用和可配置的 UI 庫是 Material UI。

• material-ui

它非常受歡迎并被許多公司使用。它是高度可配置的，這就是它如此強大的原因。

備選方案

還有一些不錯的選擇可供檢查。

semantic-ui -> 許多内置元件。

ant-design -> 可配置性較低。有限但不錯的元件。

chakra-ui -> 最近越來越受歡迎。

08、Documentation

好的文檔可以在未來節省 100 多個小時。是以，在項目的早期就積極主動地采用文檔庫。

受到推崇的

推薦的建立文檔的方法是 React StyleGuidist。

• react-styleguidist

它易于使用且功能強大。

備選方案

還有一些其他的選擇。

• js-docs -> javascript 的通用文檔工具。
• react-docz -> 非常易于使用的文檔指南。值得一試。

09、多語言支援

如果您正在全球範圍内建構産品，那麼您可能希望在 React 應用程式中添加多語言支援。

受到推崇的

React i18next 是在 React 應用程式中實作多語言支援的事實上的選項。

• react-i18next
• i18next

備擇方案

還有其他一些不錯的選擇。

• react-intl

這也支援其他庫，如 VueJS 和 Angular。

10、 Animation

動畫使您的應用程式栩栩如生。在 React 中使用動畫有一些不錯的選擇。

受到推崇的

純 CSS 是制作 React 應用程式動畫的最佳方式。它簡單快捷。此外，這更具性能。

Plain CSS Animations

備選方案

如果您想要現成的東西，那麼這裡有一些建議給您。

• framer-motion -> 生産就緒動畫
• react-awesome-reveal -> 這用于簡單的動畫來顯示元件
• react-spring -> 另一個很棒的随時可用的庫。

11、長清單渲染

渲染一個長清單會嚴重影響應用程式的性能。在這種情況下使用庫可能是一個好主意。

受到推崇的

如果你有某種無限滾動的應用程式，那麼你應該考慮 React Window。

• react-window

備選方案

如果您不需要無限滾動清單，那麼您可以對資料進行分頁

• react-paginate

12、代碼品質工具

Linters 可以靜态地發現代碼中的任何錯誤。使用某種 linter 是個好主意。

受到推崇的

首選解決方案是 Eslint

• eslint

備選方案

• jshint -> 舊庫
• tslint -> 打字稿的 Linter。現在不推薦。

13、格式化

具有一緻的視覺樣式對于任何應用程式都非常重要，而代碼格式化程式可以為您完成這項工作！

受到推崇的

• prettier

這對您來說是最好的解決方案。你不需要其他任何東西！

14、分析

資料就是未來。今天的大多數企業都是資料驅動的。是以，為您的應用程式擁有一個好的分析工具非常重要！

受到推崇的

最流行和最強大的工具是 React Ga。

• react-ga

我認為你不需要其他任何東西。

15、測試

我不需要重申測試對于任何應用程式的重要性。

受到推崇的

推薦的方法是 React Testing Library

• react-testing-library

它非常易于使用，并且旨在遵循現實生活中的使用情況。

備選方案

• jest - -> 用于單元測試
• cypress -> 用于端到端測試

16、建構可共享的元件

如果您在一個大型團隊中，那麼輕松共享元件可能會成為一個大問題！

受到推崇的

如果您正在尋找最完整的解決方案，Storybook 是您的最佳選擇。

• Storybook

總結

以上内容就是我想與您分享的全部，我認為現在您對何時選擇哪個庫應該有了很好的了解，如果您還有什麼問題，請在留言區告訴我，我們一起互相學習交流。

最後，感謝您的閱讀，祝程式設計愉快！~