正如我們所知， React 是 JavaScript 庫，用于構建精彩的用戶界面。然而，并不是每個人都在使用相同的工具或知道有這么一些出色的工具，可以讓 Reacat 開發(fā)體驗變得更加有趣和積極主動。

如果大家還沒有用過 React，或者大家的朋友可能有興趣使用它，那么，當被問及為什么要使用這個庫的時候，我們該怎么回答呢?

[[280214]]

除了告訴他們這個庫多么棒以外(這應該是首先要說的事)，我還會提一下，由開源社區(qū)創(chuàng)建的工具有助于把開發(fā)體驗帶到一個全新的令人興奮的水平。

以下是 2019 年大家可以用來構建 React 應用程序的 22 個工具(該列表沒有按它們的重要性排序)

1. Webpack Bundle Analyzer

有沒有想過自己的應用程序中的哪些包或哪些部分占用了全部的空間?好了，我們可以用 Webpack Bundle Analyzer 來找出答案。這個包將幫助我們識別出占用最多空間的輸出文件。

它將創(chuàng)建一個活動服務器，可視化我們的包的內容，用一個交互式樹狀圖呈現(xiàn)給我們。在我們的工具包里有了這個工具之后，我們就能夠看到呈現(xiàn)的文件所處的位置、它們的 gzip 大小、解析后的大小以及它們的父文件 / 子文件。

好處?嗯，我們可以根據(jù)所看到的來優(yōu)化自己的 React 應用程序!

下面是個截屏，它看起來就是這樣的：

 

 

我們可以清楚地看到，PDF 包在應用程序中占用了大部分空間。并且，它還占據(jù)了大部分的屏幕。這非常有用。

然而，截屏是最低限度的展示。我們還可以傳入有用的選項，以更詳細地查看它，如 generateStatesFile：true，還可以選擇生成一個靜態(tài) HTML 文件，我們可以把它保存在我們的開發(fā)環(huán)境外面的某個地方，以便以后使用。

2. React-Proto

React-Proto 是開發(fā)人員和設計人員的原型工具。它是一個桌面軟件，因此，在使用之前，我們必須下載并安裝該軟件。

以下是該軟件在使用時的一個示例：

 

 

該應用程序允許我們聲明屬性及其類型、在樹狀圖中查看我們的組件，導入一張背景圖片、把它們定義為有狀態(tài)或無狀態(tài)、定義其父組件、放大 / 縮小，并把原型導出到一個新的或現(xiàn)有的項目中。

該應用程序似乎更適合 Mac 用戶，但是，它也適合 Windows 用戶。

當我們完成用戶界面的映射時，可以選擇導出到一個現(xiàn)有項目或一個新項目中。如果選擇導出到一個現(xiàn)有項目并選擇了根目錄，它將把它們導出到./src/components，如下所示：

 

 

以下是在示例中我們使用的組件之一的例子：

 

 

React-Proto 在 GitHub 上已經(jīng)獲得了 2000 多個星標。

但是，我本人認為該應用程序需要更新，而且還有更多的工作要做，尤其是 React Hooks 的發(fā)布。

除非我們有一張可見的背景圖片，不然就不會縮小。換句話說，如果導入一張背景圖片，縮小，然后刪除這張圖片，那么，就無法放大了，因為操作按鈕已經(jīng)變灰色，不可使用了。

唯一能夠放大的方法是再次導入該背景圖片，然后在放大后刪除它。這個缺陷改變了我對該應用程序的看法，但是，因為我們在其他地方都看不到這個開源工具，所以還是把它放進了列表中。

還有，成為開源軟件對這個應用程序來說是件好事，因為這使它有可能成為未來流行的開源存儲庫列表(它們的特點是重要的，但是，它們似乎缺人手。)

3. Why Did You Render

Why Did You Render 猴補丁(monkey patches) React 通知我們可以避免的重渲染。這非常有用，不僅可以指導我們?yōu)槲覀兊捻椖窟M行修復，而且可以幫助我們理解 React 的工作原理。并且，當我們對 React 的工作原理有更好的理解時，我們就會成為更好的 React 開發(fā)人員。

我們可以通過聲明一個額外的靜態(tài)屬性 whyDidYouRender，并將其值設置為 true，把一個偵聽器附加到任意自定義組件：

importReactfrom'react' 
importButtonfrom'@material-ui/core/Button' 
constChild =(props) =><div {...props} /> 
constChild2 =({ children, ...props }) =>( 
<div{...props}> 
{children}<Child/> 
</div> 
) 
Child2.whyDidYouRender =true 
constApp =()=>{ 
const[state, setState] = React.useState({}) 
return( 
<div> 
<Child>{JSON.stringify(state, null, 2)}</Child> 
<div> 
<Buttontype="button"onClick={()=>setState({ hello: 'hi' })}> 
Submit 
</Button> 
</div> 
<Child2>Child #2</Child2> 
</div> 
) 
} 
exportdefaultApp 

 

只有在這么做了以后，我們的控制臺才會彈出令人難以置信的惱人警報：

 

 

別誤會我的意思。要把它當做好事情。利用這些惱人的消息，這樣我們就可以修復這些很浪費的重渲染，并且，這些惱人的消息最終將不再煩人。

4. Create React 應用程序

大家都知道 Create React 應用程序 是啟動開發(fā) React 項目最快的方法(擁有開箱即用的現(xiàn)代功能)。

還有什么能比 npx create-react-app 更簡單的呢?

我在 Medium 上的教程都是用 create-react-app 構建 React 接口界面的，只是因為它又快又簡單。

我們當中有些人可能不知道如何用 CRA 來創(chuàng)建一個 TypeScript 項目。我們要做的就是在末尾加上 typescript：

npx create-react-app — typescript 

這會幫我們省去給 CRA 項目手工添加 TypeScript 的麻煩。

5. React Lifecycle Visualizer

React Lifecycle Visualizer 是一個 npm 包，用于跟蹤和可視化任意 React 組件的生命周期方式。

與 Why Did You Render 類似，我們可以啟用我們選擇的任何組件來顯示生命周期可視化器：

importReactfrom'react' 
import{ 
Log, 
VisualizerProvider, 
traceLifecycle, 
}from'react-lifecycle-visualizer' 
classTracedComponentextendsReact.Component{ 
state = { 
loaded:false, 
} 
componentDidMount() { 
this.props.onMount() 
} 
render() { 
return<h2>Traced Component</h2> 
} 
} 
constEnhancedTracedComponent = traceLifecycle(TracedComponent) 
constApp =()=>( 
<VisualizerProvider> 
<EnhancedTracedComponent/> 
<Log/> 
</VisualizerProvider> 
) 

Traced Component

}}constEnhancedTracedComponent = traceLifecycle(TracedComponent)constApp =()=>()

 

這將呈現(xiàn)可視化器，所示如下：

 

 

然而，這有個缺點，目前只能用于類組件，因此還不支持 Hooks。(問題是，它們能夠做到嗎?因為這跟生命周期有關。)

6. Guppy

Guppy 是一個友好且免費的 React 應用程序管理器和任務運行器，可以在桌面上運行。

它們似乎優(yōu)先考慮那些 React 的開發(fā)新手。但是，對于高級開發(fā)人員也可能是有用的。

它提供了一種友好的圖形化用戶界面，用于 React 開發(fā)人員經(jīng)常面對的很多典型任務，如：創(chuàng)建一個新項目、執(zhí)行任務和管理依賴項。2018 年 8 月添加了對 Windows 的支持，因此，可以肯定它是跨平臺的。以下是 Guppy 看起來的樣子：

 

 

7. react-testing-library

在編寫單元測試時， react-testing-library 用起來感覺很好，因此，我一直喜歡用它。這個包提供了 React DOM 測試實用程序，鼓勵良好的測試實踐。

該解決方案旨在解決測試實施細節(jié)的問題，就像用戶可以看到它們一樣，而不是測試 React 組件的輸入 / 輸出。

測試實施細節(jié)并不是確保應用程序按預期工作的有效方法。

當然，對我們如何獲取組件需要的數(shù)據(jù)、使用某種方法等等，我們能夠更有信心。但是，如果我們必須改變我們的實現(xiàn)方法，以指向不同的數(shù)據(jù)庫，那么，單元測試就會失敗，因為它們是耦合邏輯的實現(xiàn)細節(jié)。

這是 react-testing-library 解決的一個問題，因為，理想情況下，我們只希望我們的用戶接口界面能夠正常工作，最終可以正確地呈現(xiàn)。

我們如何為這些組件獲取數(shù)據(jù)真的無關緊要，只要它們仍然提供預期的輸出即可。

以下是我們如何使用該庫來進行測試的 示例代碼 ：

// Hoist helper functions (but not vars) to reuse between test cases 
constrenderComponent =({ count }) => 
render( 
<StateMockstate={{count}}> 
<StatefulCounter/> 
</StateMock>, 
) 
it('renders initial count',async() => { 
// Render new instance in every test to prevent leaking state 
const{ getByText } = renderComponent({count:5}) 
awaitwaitForElement(()=>getByText(/clicked 5 times/i)) 
}) 
it('increments count',async() => { 
// Render new instance in every test to prevent leaking state 
const{ getByText } = renderComponent({count:5}) 
fireEvent.click(getByText('+1')) 
awaitwaitForElement(()=>getByText(/clicked 6 times/i)) 
}) 

8. React Developer Tools

React Developer Tools 是一個擴展，它允許在 Chrome 和 Firefox Developer Tools 中查看 React 的組件層次結構。

這是在本列表中最常見的擴展，并仍然是 React 開發(fā)人員能夠用于調試應用程序的最有幫助的工具之一。

9. Bit

在使用組件庫(如 Material-UI 或 Semantic UI React )時， Bit 是一個很好的替代方法。

Bit 讓我們探索數(shù)以千計的開源組件，并允許我們使用它們來構建項目。

 

有很多不同的 React 組件，可供任何人使用，包括選項卡、按鈕、圖表、表格、導航條、下拉菜單、加載旋轉器、日期選擇器、面包屑導航(breadcrumbs)、圖標、布局等等。

這些是由其他 React 開發(fā)人員上傳的，這些開發(fā)人員就跟你我一樣。

但是，也有一些可用的實用程序，如格式化日期之間的距離。

10. Storybook

如果你還不知道 Storybook ，并希望能夠更容易地構建 UI 組件，那么，我強烈建議你開始使用它。

該工具啟動一個實時開發(fā)服務器，支持開箱即用的熱重載，我們可以在其中獨立地實時開發(fā) React 組件。

關于這個還有一件很棒的事情是，我們可以使用現(xiàn)有的開源插件，把我們的開發(fā)體驗提升到一個全新的水平。

比如，借助 Storybook README 包，我們可以創(chuàng)建 README 文檔，同時，在同一頁面上開發(fā)用于生產的 React 組件。

這足以作為普通的文檔頁面了：

 

 

11. React Sight

大家有沒有想過，自己的應用程序在流程圖中看起來是什么樣子? React Sight 可以讓大家可視化自己的 React 應用程序，借助整個應用程序的實時組件層次結構樹呈現(xiàn)。

它還支持 反應路由器(react-router) 、 Redux ，以及 React Fiber 。

借助該工具，大家可以將鼠標懸停于節(jié)點上，它們是指向那些跟樹中直接跟它們有關的組件的鏈接。

如果大家在查看結果時遇到困難，那么，可以在地址欄中鍵入 chrome:extensions，查找 React Sight 工具箱，然后點擊 Allow access to file URLs 開關，如下所示：

 

 

12. React Cosmos

React Cosmos 是用于創(chuàng)建可重用 React 組件的開發(fā)工具。

它掃描項目中的組件，并使我們能夠：

用屬性、上下文和狀態(tài)的任意組合來渲染組件。

模擬每個外部依賴項(如：API 響應、localStorage 等等)。

在和運行中的實例進行交互時，實時查看應用程序的狀態(tài)演變。

13. CodeSandbox

這毫無疑問是最好的可用工具之一，可以讓我們親手使用 React 的速度比眨眼還要快(好吧，也許沒有那么快)。

這個被稱為 CodeSandbox 的工具是一個在線編輯器，它讓我們從原型創(chuàng)建 web 應用程序以進行部署——所有這些都來自該網(wǎng)站。

在早期階段， CodeSandbox 最初只支持 React，但是，現(xiàn)在已經(jīng)擴展到如 Vue和 Angular 等庫的附加啟動模板。

它們還通過使用 Gateby 或 Next.js 等常用靜態(tài)站點生成器創(chuàng)建項目，支持啟動下一個 React web 項目。

談到 CodeSandbox，有很多好東西可以講。首先，它非?；钴S。

如果大家需要探索一下人們?yōu)榉奖愦蠹移鹨娬跇嫿ǖ囊恍╉椖?，那么簡單地點擊一下 explore 就可以訪問一大堆代碼示例，來幫助大家更新下一個項目：

 

 

一旦大家開始編輯一個項目，就會意識到，將要使用的實際上是個強大的 VS Code編輯器。

我很想寫一篇文章全面介紹一下如今我們可以在 CodeSandbox 使用的功能，但是，看起來，這項工作 已經(jīng)完成了 。

14. React Bits

React Bits 是 React 模式、技術、技巧和竅門的集合，都是用類似于在線類文檔的格式編寫的，大家可以快速地訪問不同的設計模式和技術、反模式、樣式、UX 變體和其他有幫助的與 React 相關的材料，所有這一切都在同一個選項卡上。

他們有個 GitHub 存儲庫 ，目前有 9923 個星標。

一些示例包括一些概念，如屬性代理、用于在不同場景中處理不同 UX 的組合，甚至公開了一些每個 React 開發(fā)人員都應該知道的一些陷阱。

這就是在他們頁面上的感覺。正如大家可以在左側菜單上看到的，上面有很多信息：

 

 

15. folderize

folderize 是一個 VS Code 擴展，發(fā)布的時間還不到 7 天。它使我們能夠把一個組件文件轉換為組件文件夾結構。我們的 React 組件仍將是個組件，只是現(xiàn)在它轉換成一個目錄而已。

比如，假設我們在創(chuàng)建一個 React 組件，它把文件作為屬性以顯示有用的信息，比如它們的元數(shù)據(jù)。

用于元數(shù)據(jù)組件的邏輯占用了很多行，因此，我們決定把這個拆分成一個單獨的文件。但是，當我們決定這么做的時候，我們就有了兩個相互關聯(lián)的文件。

因此，如果我們有個像這樣的目錄：

 

 

我們可能想把 FileView.js 和 FileMetadata.js 抽象到一個目錄結構中，就像 Apples 那樣——尤其是，如果我們正在考慮添加更多與 FileScanner.js 等文件相關的組件。

這就是 folderize 為我們所做的事，這樣，它們可以得到與下面類似的結構：

 

 

16. React 啟動項目

以下是一個很棒的 React 啟動項目 列表，我們可以在一個頁面上看到全部項目。因此，如果我們是那種覺得用一個巨大的列表來同時列出所有的選項是很有用的人，那么這個就很適合我們。

一旦看到我們喜歡的啟動項目，我們可以簡單地克隆存儲庫，并根據(jù)我們將要開發(fā)的應用程序做一些修改。

然而，并不是所有的庫都打算通過克隆存儲庫來使用，因為它們中有一些是要安裝的，這將成為我們項目中的依賴項。

這使獲得更新并保持項目簡潔變得更容易。

以下是該頁面看起來的樣子：

 

 

17. 高亮顯示更新(Highlight Updates)

按理說，這是最重要的工具，任何人都會把它放在自己的開發(fā)工具包里。 高亮顯示更新 是 React DevTools 擴展的功能，可以讓我們查看頁面中有哪些組件進行了不必要的重渲染：

 

它有助于我們看到開發(fā)頁面時的瓶頸問題，并且因為它們用橙色或紅色對嚴重的重渲染問題進行了著色，所以更容易發(fā)現(xiàn)問題。

除非我們的目標是構建一個平庸的應用程序，否則為什么不試試這個在我們身邊的好東西呢?

18. React Diff Viewer

React Diff Viewer 是個簡單又美觀的文本差異查看器，用 Diff 和 React 構建而成。它支持這些功能，如：分屏視圖、內聯(lián)視圖、單詞差異、行高亮等等。

如果我們想把這個功能嵌入我們的記事簿(如 Boostnote)，并對其進行定制以更適合我們的應用程序(主題顏色、文檔與故事書演示文本的組合等等)，那么，這是很有用的。

 

 

19. JS.coach

我用來尋找 React 相關資料最常用的網(wǎng)站是 JS.coach?，F(xiàn)在，我不確定為什么提到這個網(wǎng)站的人不多，但是，僅僅從這個網(wǎng)頁，我已經(jīng)找到了所有我需要的東西。

它又快又簡單，并且不斷地更新，總是能為我所有的項目提供所需的結果。

最近，他們添加了 React VR 選項卡，非常棒!

20. Awesome React

這個 GitHub Awesome React 開源存儲庫是一個列表，里面有一些跟 React 相關的好東西。

我可能忘了其他網(wǎng)站，只是從這個鏈接學習 React。大家會找到一大堆有用的資源，這些資源一定會有助于大家構建出色的 React 應用程序!

21. Proton Native

Proton Native 給我們提供了一個 React 環(huán)境以構建跨平臺的本機桌面應用程序。

是 Electron 的替代產品，具有一些簡潔的功能，包括：

與 React Native 語法相同。

適用于現(xiàn)存的 React 庫，如 Redux。

跨平臺。

原生組件。不再有 Electron。

與所有正常的 Node.js 包兼容。

有興趣了解更多嗎?請閱讀它們的 文檔 。

22. Devhints React.js Cheatsheet

這是 一張很好的 React 速查表 ，盡管它缺少 React Hooks。不要擔心，我將為 React v16.8+ 創(chuàng)建一張速查表。