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-pro...

以上信息來源於網絡，由「京東雲開發者社區」公衆號編輯整理，
不表明京東雲立場。

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

歡迎點擊「京東雲」瞭解更多精彩