React Developers的10個超實用神奇工具
React是一個用於構建使用者介面的JavaScript庫。但是，很多人都不知道，其實有非常多的有助於我們更好地使用React，提升使用者開發體驗的優秀工具。
如果您還沒有使用過React，或者有可能對使用它感興趣，當他們問你為什麼要使用這個庫時，你會怎麼說？
除了告訴他們React的庫有多棒（這應該是第一件事）之外，我還想提到開源社群建立的工具這部分，它將極大地提升你的體驗感，甚至讓你覺得興奮。
以下是您可以在2019年用於構建React應用程式的10個工具（此列表不按其重要性排序；原文字有22個，我們將在下期接著推送。）
1. Webpack Bundle Analyzer
有沒有想過你的應用程式的哪些部分佔用了大部分空間？那麼，你可以找到Webpack Bundle Analyzer。該軟體包將幫助您識別佔用空間最多的輸出檔案。
它將建立一個實時伺服器，併為您提供捆綁包內容的互動式樹形圖視覺化。通過這個工具包，您可以看到所呈現檔案的位置，gzip大小，解析大小以及子/父檔案。
你可以根據你看到的內容優化你的React應用程式！
這是一個截圖：
您可以清楚地看到pdf包占用應用程式中的最大空間，同時，它也佔據了螢幕上最顯著的位置。這個非常有用。
螢幕截圖只是它功能中非常非常小的一部分，您還可以更進一步地進行檢視，例如generateStatsFile: true，並選擇生成靜態HTML檔案，然後將其儲存在開發環境之外的某個位置以供以後使用。
2. React-Proto
React-Proto是開發人員和設計人員的原型工具。它是桌面軟體，因此您必須在使用前下載並安裝該軟體。
以下是此軟體的一個示例：
該應用程式允許您宣告道具及其型別，在樹形圖中檢視元件，匯入背景影象，將它們定義為有狀態或無狀態，定義其父檔案將是什麼，放大/縮小，以及將原型匯出到新的或現有專案中。
該應用程式似乎更適合Mac使用者，但Windows使用者其實也是可以的。
完成對映使用者介面後，可以選擇匯出到現有專案或新專案。如果您選擇匯出到現有專案並選擇根目錄，它將匯出它們./src/components，如下所示：
以下是我們在示例中使用的元件之一的示例：
React-Proto在GitHub上收到了超過2,000顆Star。
就個人而言，React-Proto其實有一些沒有那麼方便的地方，比如，如果您匯入背景影象，縮小，然後繼續刪除背景影象，您將無法放大。
放大的唯一方法是重新匯入背景影象，然後在放大後將其刪除。但即便有著這樣小小的不便，我仍然覺得它是個值得推薦的工具，因為同類工具幾乎很難再找到可以與它相提並論的了。
而且，開源是這個應用程式最大的好處之一，因為這些目前的小缺陷有可能在未來製作趨勢開源的儲存庫列表中的得以改善。
3.Why Did You Render
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) => <div {...props} />
5
6 const Child2 = ({ children, ...props }) => (
7 <div {...props}>
8 {children} <Child />
9 </div>
10 )
11
12 Child2.whyDidYouRender = true
13
14 const App = () => {
15 const [state, setState] = React.useState({})
16
17 return (
18 <div>
19 <Child>{JSON.stringify(state, null, 2)}</Child>
20 <div>
21 <Button type="button" onClick={() => setState({ hello: 'hi' })}>
22 Submit
23 </Button>
24 </div>
25 <Child2>Child #2</Child2>
26 </div>
27 )
28 }
29
30 export default App
只有在這樣做之後，您的控制檯才會被髮出以下有些“煩人”警告：
別誤會我的意思。把這些警告當作一件好事。有效利用這些訊息，這樣你就可以修復那些因不必要重新渲染而浪費的資源!
4.Creat React App
很多人都知道，Create React App是開始開發React專案最快捷的方式（開箱即用的現代功能）。
什麼可能比這更容易npx create-react-app <name>？
所有關於Medium build React介面的教程幾乎都create-react-app只是因為它快速而簡單。
我們有些人可能不知道的是如何使用CRA 建立TypeScript專案。你所要做的就是在最後新增上：
npx create-react-app <name> — typescript
這樣可以省去手動將TypeScript新增到CRA專案的麻煩了。
5. React Lifecycle Visualizer
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 <h2>Traced Component</h2>
19 }
20 }
21
22 const EnhancedTracedComponent = traceLifecycle(TracedComponent)
23
24 const App = () => (
25 <VisualizerProvider>
26 <EnhancedTracedComponent />
27 <Log />
28 </VisualizerProvider>
29 )
視覺化工具的顯示形式如下所示：
但是，這個工具有一個缺點是它目前僅適用於類元件，因此尚不支援Hook。
6.Guppy
Guppy是React的一個友好且免費的應用程式管理器和任務執行器，它在桌面上執行。
他們似乎優先考慮才開始時候用React的人。但是，它對高階開發人員也可能有用。
它為React開發人員定期面對的許多典型任務提供友好的圖形使用者介面，例如建立新專案，執行任務和管理依賴項。
Windows支援是在2018年8月新增的，因此您可以放心，它是跨平臺的。
這是Guppy的樣子：
7.react-testing-library
我一直很喜歡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 <StateMock state={{ count }}>
5 <StatefulCounter />
6 </StateMock>,
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 })
8.React Developer Tools
React Developer Tools是一個擴充套件工具，它允許在Chrome和Firefox Developer Tools中檢查React的元件層次結構。
這是此列表中最常見的擴充套件，並且仍然是React開發人員可用於除錯其應用程式的最有用工具之一。
9.Bit
使用元件庫(如Material-UI或Semantic UI React)的一個很好的替代方法是Bit。
Bit允許您瀏覽數以千計的開源元件，並允許您使用它們來構建專案。
它有許多不同的React元件可供任何人使用，包括選項卡，按鈕，圖表，表格，導航欄，下拉列表，載入微調器，日期選擇器，麵包屑，圖示，佈局等。
這些是由其他React開發人員上傳的，就像你跟我一樣。
但是，也有一些有用的實用程式，例如格式化日期之間的距離。
10.Storybook
如果您想要更輕鬆地構建UI元件，但你還不瞭解Storybook，我強烈建議您使用看看。
該工具啟動了一個實時開發伺服器，支援開箱即用的熱重新載入，您可以在其中單獨實時開發React元件。
另一個很棒的事情是，您可以使用現有的開源附加元件將您的開發體驗提升到一個全新的水平。
例如，使用Storybook README包，您可以在同一頁面上開發用於生產的React元件時建立README文件。
這是普通檔案的頁面樣式：
以上是這篇文章的部分內容，我希望你在這裡找到了有價值的資訊，如果你喜歡的話，我們後續還會繼續為您整理相關內容。
原文連結：https://medium.com/better-programming/22-miraculous-tools-for-react-developers-in-2019-7d72054e2306
以上資訊來源於網路，由“京東雲開發者社群”公眾號編輯整理，
不代表京東雲立場。
點選"更多"檢視更加豐富的雲端計算業內知識及資訊！
