摘要：但是，如果必須更改實現方法以指向不同的數據庫，則單元測試將失敗，因為它們是耦合邏輯的實現細節。

React是一個用于構建用戶界面的JavaScript庫。但是，很多人都不知道，其實有非常多的有助于我們更好地使用React，提升用戶開發體驗的優秀工具。

如果您還沒有使用過React，或者有可能對使用它感興趣，當他們問你為什么要使用這個庫時，你會怎么說？

除了告訴他們React的庫有多棒（這應該是第一件事）之外，我還想提到開源社區創建的工具這部分，它將極大地提升你的體驗感，甚至讓你覺得興奮。

以下是您可以在2019年用于構建React應用程序的10個工具（此列表不按其重要性排序；原文本有22個，我們將在下期接著推送。）

有沒有想過你的應用程序的哪些部分占用了大部分空間？那么，你可以找到Webpack Bundle Analyzer。該軟件包將幫助您識別占用空間最多的輸出文件。

它將創建一個實時服務器，并為您提供捆綁包內容的交互式樹形圖可視化。通過這個工具包，您可以看到所呈現文件的位置，gzip大小，解析大小以及子/父文件。

你可以根據你看到的內容優化你的React應用程序！

這是一個截圖：

您可以清楚地看到pdf包占用應用程序中的最大空間，同時，它也占據了屏幕上最顯著的位置。這個非常有用。

屏幕截圖只是它功能中非常非常小的一部分，您還可以更進一步地進行查看，例如generateStatsFile: true，并選擇生成靜態HTML文件，然后將其保存在開發環境之外的某個位置以供以后使用。

React-Proto是開發人員和設計人員的原型工具。它是桌面軟件，因此您必須在使用前下載并安裝該軟件。

以下是此軟件的一個示例：

該應用程序允許您聲明道具及其類型，在樹形圖中查看組件，導入背景圖像，將它們定義為有狀態或無狀態，定義其父文件將是什么，放大/縮小，以及將原型導出到新的或現有項目中。

該應用程序似乎更適合Mac用戶，但Windows用戶其實也是可以的。

完成映射用戶界面后，可以選擇導出到現有項目或新項目。如果您選擇導出到現有項目并選擇根目錄，它將導出它們./src/components，如下所示：

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

React-Proto在GitHub上收到了超過2,000顆Star。

就個人而言，React-Proto其實有一些沒有那么方便的地方，比如，如果您導入背景圖像，縮小，然后繼續刪除背景圖像，您將無法放大。

放大的唯一方法是重新導入背景圖像，然后在放大后將其刪除。但即便有著這樣小小的不便，我仍然覺得它是個值得推薦的工具，因為同類工具幾乎很難再找到可以與它相提并論的了。

而且，開源是這個應用程序最大的好處之一，因為這些目前的小缺陷有可能在未來制作趨勢開源的存儲庫列表中的得以改善。

Why Did You Render猴子補丁可通知您有關可避免的重新渲染。

這非常有用，不僅可以指導您完成項目的性能修復，還可以幫助您了解React的工作原理。而且，當您更好地了解React如何工作時，它會讓您成為更好的React開發人員。

通過聲明一個額外的靜態屬性whyDidYouRender并將其值設置為true，您可以將偵聽器附加到任何自定義組件:

 1 import React from "react"
 2 import Button from "@material-ui/core/Button"
 3
 4 const Child = (props) => 

 5
 6 const Child2 = ({ children, ...props }) => (
 7  

 8    {children} 
 9  
10 )
11
12 Child2.whyDidYouRender = true
13
14 const App = () => {
15  const [state, setState] = React.useState({})
16
17  return (
18    

19      {JSON.stringify(state, null, 2)}
20      

21         setState({ hello: "hi" })}>
22          Submit
23        
24      
25      Child #2
26    
27  )
28 }
29
30 export default App

只有在這樣做之后，您的控制臺才會被發出以下有些“煩人”警告：

別誤會我的意思。把這些警告當作一件好事。有效利用這些消息，這樣你就可以修復那些因不必要重新渲染而浪費的資源!

很多人都知道，Create React App是開始開發React項目最快捷的方式（開箱即用的現代功能）。

什么可能比這更容易npx create-react-app ？

所有關于Medium build React接口的教程幾乎都create-react-app只是因為它快速而簡單。

我們有些人可能不知道的是如何使用CRA 創建TypeScript項目。你所要做的就是在最后添加上：

npx create-react-app — typescript

這樣可以省去手動將TypeScript添加到CRA項目的麻煩了。

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

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

 1 import React from "react"
 2 import {
 3  Log,
 4  VisualizerProvider,
 5  traceLifecycle,
 6 } from "react-lifecycle-visualizer"
 7
 8 class TracedComponent extends React.Component {
 9  state = {
10    loaded: false,
11  }
12
13  componentDidMount() {
14    this.props.onMount()
15  }
16
17  render() {
18    return 
Traced Component
19  }
20 }
21
22 const EnhancedTracedComponent = traceLifecycle(TracedComponent)
23
24 const App = () => (
25  
26    
27    
28  
29 )

可視化工具的顯示形式如下所示：

但是，這個工具有一個缺點是它目前僅適用于類組件，因此尚不支持Hook。

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

他們似乎優先考慮才開始時候用React的人。但是，它對高級開發人員也可能有用。

它為React開發人員定期面對的許多典型任務提供友好的圖形用戶界面，例如創建新項目，執行任務和管理依賴項。

Windows支持是在2018年8月添加的，因此您可以放心，它是跨平臺的。

這是Guppy的樣子：

我一直很喜歡react-testing-library，因為在你編寫單元測試時它會讓你感覺到“一切都剛剛好”。該軟件包提供了React DOM測試實用程序，可鼓勵良好的測試實踐。

此解決方案旨在解決測試實現細節的問題，而不是測試React組件的輸入/輸出，就像用戶看到的一樣。

測試實現細節并不是說可以確保您的應用程序按預期工作的有效方法。

當然，您將能夠對如何獲取組件所需的數據、使用哪種排序方法等更有信心。但是，如果必須更改實現方法以指向不同的數據庫，則單元測試將失敗，因為它們是耦合邏輯的實現細節。

這是react-test -library待解決的一個問題，因為理想情況下，您只希望您的用戶界面能夠正常工作，并最終正確地呈現出來。
以下是使用此庫進行測試的示例代碼：

1 // Hoist helper functions (but not vars) to reuse between test cases
2 const renderComponent = ({ count }) =>
3 render(
4
5
6 ,
7 )
8
9 it("renders initial count", async () => {
10 // Render new instance in every test to prevent leaking state
11 const { getByText } = renderComponent({ count: 5 })
12
13 await waitForElement(() => getByText(/clicked 5 times/i))
14 })
15
16 it("increments count", async () => {
17 // Render new instance in every test to prevent leaking state
18 const { getByText } = renderComponent({ count: 5 })
19
20 fireEvent.click(getByText("+1"))
21 await waitForElement(() => getByText(/clicked 6 times/i))
22 })

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

這是此列表中最常見的擴展，并且仍然是React開發人員可用于調試其應用程序的最有用工具之一。

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

Bit允許您瀏覽數以千計的開源組件，并允許您使用它們來構建項目。

它有許多不同的React組件可供任何人使用，包括選項卡，按鈕，圖表，表格，導航欄，下拉列表，加載微調器，日期選擇器，面包屑，圖標，布局等。

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

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

如果您想要更輕松地構建UI組件，但你還不了解Storybook，我強烈建議您使用看看。

該工具啟動了一個實時開發服務器，支持開箱即用的熱重新加載，您可以在其中多帶帶實時開發React組件。

另一個很棒的事情是，您可以使用現有的開源附加組件將您的開發體驗提升到一個全新的水平。

例如，使用Storybook README包，您可以在同一頁面上開發用于生產的React組件時創建README文檔。

這是普通文件的頁面樣式：

以上是這篇文章的部分內容，我希望你在這里找到了有價值的信息，如果你喜歡的話，我們后續還會繼續為您整理相關內容。

原文鏈接：https://medium.com/better-pro...

以上信息來源于網絡，由“京東云開發者社區”公眾號編輯整理，
不代表京東云立場。

點擊"更多"查看更加豐富的云計算業內知識及信息！