21 個對 React 開發有所幫助的工具庫

時間 2020-09-28

標籤 react 開發有所幫助工具欄目 React 简体版

原文原文鏈接

做者：piyush-kochhar
譯者：前端小智
來源：hackernoon

點贊再看，微信搜索 【大遷世界】 關注這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。javascript

爲了保證的可讀性，本文采用意譯而非直譯。html

下列工具中的重要性與排序無關。前端

1.Webpack Bundle Analyzer

有沒有想過你的應用程序的哪些包或哪部分代碼所佔總大小的多少? Webpack Bundle Analyzer能夠幫助我們分析。java

Webpack Bundle Analyzer建立一個實時服務器，並提供依賴包交互式樹形圖可視化。經過這個工具包，能夠看到所渲染文件的位置，gzip大小，解析大小以及所父子級之間詳情。react

這個工具的好處是，能夠根據你所看到來優化你的React應用。webpack

收下是它生成的一個分析圖：git

能夠清楚地看到pdf包大小佔用應用程序是最多的，同時也是佔用分析圖片最大比例，這對於我們來講是所看即所得效果。github

然而，生成分析圖空間有限，你還能夠傳遞一些有用的選項來更詳細地查看它，好比generateStatsFile: true，還能夠選擇生成一個靜態HTML文件，能夠將其保存在開發環境以外的某個地方，以供之後使用。web

2. React-Proto

React-Proto 是一個面向開發人員和設計人員的原型工具。這是一個桌面軟件，因此在使用以前你必須下載並安裝這個軟件。chrome

如下是使用方式一個簡單演示：

該應用程序容許你聲明props及其types，在樹中查看組件，導入背景圖像，將它們定義爲有狀態或無狀態，定義其父組件將是什麼，放大/縮小，以及將原型導出到新的或現有項目。

該應用程序彷佛更適合Mac用戶，但它仍適用於Windows用戶。

完成用戶界面後，能夠選擇導出到現有項目或新項目。若是你選擇導出到現有項目並選擇根目錄，它會將它們導出到./src/components，以下所示：

隨着React hook的發佈，這個應用程序須要更新作更多的工做。固然，開源是這個應用程序的好處，由於它使它有可能成爲將來流行的開源存儲庫列表。

3. Why Did You Render

Why Did You Render 猴子補丁React通知你有關可避免的從新渲染的信息。

猴子補丁: 這個叫法起源於Zope框架，你們在修正Zope的Bug的時候常常在程序後面追加更新部分，這些被稱做是「雜牌軍補丁(guerilla patch)」，後來guerilla就漸漸的寫成了gorllia((猩猩)，再後來就寫了monkey(猴子)，因此猴子補丁的叫法是這麼莫名其妙的得來的。

猴子補丁主要有如下幾個用處：

在運行時替換方法、屬性等
在不修改第三方代碼的狀況下增長原來不支持的功能
在運行時爲內存中的對象增長patch而不是在磁盤的源代碼中增長

這很是有用，不只能夠指導我們修復項目的性能，還能夠幫助你理解React是如何工做的。並且，當你更好地理解React的工做原理時，你就會成爲更好的React開發人員。

經過聲明一個額外的靜態屬性whyDidYouRender並將其值設置爲true，能夠將偵聽器附加到任何自定義組件

import React from 'react'
import Button from '@material-ui/core/Button'

const Child = (props) => <div {...props} />

const Child2 = ({ children, ...props }) => (
  <div {...props}>
    {children} <Child />
  </div>
)

Child2.whyDidYouRender = true

const App = () => {
  const [state, setState] = React.useState({})

  return (
    <div>
      <Child>{JSON.stringify(state, null, 2)}</Child>
      <div>
        <Button type="button" onClick={() => setState({ hello: 'hi' })}>
          Submit
        </Button>
      </div>
      <Child2>Child #2</Child2>
    </div>
  )
}

export default App

這樣作以後，在控制檯纔會打印使人惱人冗長警告：

不要認爲這是錯誤的提示，把它當成一件好事。利用那些煩人的消息，這樣你就能夠修復那些浪費的從新渲染。

4. Create React App

你們都知道，Create React App是建立 React項目的最快方式（開箱即用）。

還有什麼比 npx create-react-app <name>更簡單的呢

我們還有些人可能不知道的是如何使用CRA建立TypeScript項目，這個也很簡單，只須要在末尾添加--typescript 便可：

npx create-react-app <name> — typescript

這樣能夠省去手動將TypeScript添加到CRA建立項目中的麻煩。

5. React Lifecycle Visualizer

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

與 Why Did You Render 工具相似，你能夠選擇任何組件來啓動生命週期可視化工具：

import React from 'react'
import {
  Log,
  VisualizerProvider,
  traceLifecycle,
} from 'react-lifecycle-visualizer'

class TracedComponent extends React.Component {
  state = {
    loaded: false,
  }

  componentDidMount() {
    this.props.onMount()
  }

  render() {
    return <h2>Traced Component</h2>
  }
}

const EnhancedTracedComponent = traceLifecycle(TracedComponent)

const App = () => (
  <VisualizerProvider>
    <EnhancedTracedComponent />
    <Log />
  </VisualizerProvider>
)

運行結果，以下所示：

可是，其中一個缺點是它目前僅適用於類組件，所以尚不支持 Hook。

6. Guppy

Guppy 是React的一個友好且免費的應用程序管理器和任務運行器，它在桌面上運行且跨平臺的，你能夠放心用。

它爲開發人員常常面臨的許多典型任務(如建立新項目、執行任務和管理依賴項)提供了友好的圖形用戶界面。

Guppy 啓動後的的樣子

7. react-testing-library

react-testing-library 是一個很棒的測試庫，編寫單元測試時，它會讓你感受很好。這個包提供了React DOM測試實用程序，鼓勵良好的測試實踐。

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

這是react-test -library解決的一個問題，由於理想狀況下，你只但願您的用戶界面可以正常工做，並最終正確地渲染出來。

如何將數據獲取到這些組件並不重要，只要它們仍然提供預期的輸出便可。

如下是使用此庫進行測試的示例代碼：

// Hoist helper functions (but not vars) to reuse between test cases
const renderComponent = ({ count }) =>
  render(
    <StateMock state={{ count }}>
      <StatefulCounter />
    </StateMock>,
  )

it('renders initial count', async () => {
  // Render new instance in every test to prevent leaking state
  const { getByText } = renderComponent({ count: 5 })

  await waitForElement(() => 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'))
  await waitForElement(() => getByText(/clicked 6 times/i))
})