21個讓React 開發更高效更有趣的工具

發表於2019-08-12
React

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

想閱讀更多優質文章請猛戳GitHub部落格,一年百來篇優質文章等著你！

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

1.Webpack Bundle Analyzer

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

Webpack Bundle Analyzer建立一個實時伺服器，並提供依賴包互動式樹形圖視覺化。 通過這個工具包，可以看到所渲染檔案的位置，gzip大小，解析大小以及所父子級之間詳情。

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

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

clipboard.png

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

然而，生成分析圖空間有限，你還可以傳遞一些有用的選項來更詳細地檢視它，比如generateStatsFile: true，還可以選擇生成一個靜態HTML檔案，可以將其儲存在開發環境之外的某個地方，以供以後使用。

2. React-Proto

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

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

clipboard.png

該應用程式允許你宣告props及其types，在樹中檢視元件，匯入背景影象，將它們定義為有狀態或無狀態，定義其父元件將是什麼，放大/縮小，以及將原型匯出到新的或現有專案。

該應用程式似乎更適合Mac使用者，但它仍適用於Windows使用者。

完成使用者介面後，可以選擇匯出到現有專案或新專案。 如果你選擇匯出到現有專案並選擇根目錄，它會將它們匯出到./src/components，如下所示：

clipboard.png

隨著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

這樣做之後，在控制檯才會列印令人惱人冗長警告：

clipboard.png

不要認為這是錯誤的提示，把它當成一件好事。 利用那些煩人的訊息，這樣你就可以修復那些浪費的重新渲染。

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>
)

執行結果，如下所示：

clipboard.png

但是，其中一個缺點是它目前僅適用於類元件，因此尚不支援 Hook。

6. Guppy

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

它為開發人員經常面臨的許多典型任務(如建立新專案、執行任務和管理依賴項)提供了友好的圖形使用者介面。

Guppy 啟動後的的樣子

clipboard.png

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))
})

8. React Developer Tools

React Developer Tools是一個擴充套件外掛，允許在Chrome和Firefox Developer Tools中檢查React的元件層次結構。

這是React開發中最常見的擴充套件外掛，並且是React開發人員可以用來除錯其應用程式的最有用的工具之一。

9. Bit

通過Bit可以看到數以千計的開源元件，並允許還可以使用它們來構建專案。

圖片描述

列表中有很多很多React元件可供我們們使用，包括選項卡，按鈕，圖表，表格，導航欄，下拉選單，載入微調器，日期選擇器，麵包屑，圖示，佈局等。

10. Storybook

Storybook 是一個輕鬆地構建UI元件的庫。該工具啟動一個實時開發伺服器，支援開箱即用的熱過載，你可以在其中獨立地實時開發React元件。

這足以作為普通文件頁面：

clipboard.png

11. React Sight

你有沒有想過你的應用程式在流程圖中的樣子？ React Sight允許你通過展示整個應用程式的實時元件層次結構樹來視覺化React應用程式。

它還支援react-router，Redux以及React Fiber。

使用此工具，您可以將滑鼠懸停在節點上，這些節點是指向與樹中元件直接相關的元件的連結。

如果在檢視結果時遇到問題，可以在位址列中輸入chrome:extensions ，查詢“React Sight”框，然後單擊“Allow access to file URLs”開關，如下所示：

clipboard.png

12. React Cosmos

React Cosmos是一個用於建立可重用React元件的開發工具。

它掃描專案中的元件，並使你能夠:

  • 通過 props，context和state任意組合來渲染元件。
  • 模擬每個外部依賴項(API響應、localStorage等)。
  • 檢視應用程式狀態在與執行例項互動時的實時演變。

13. CodeSandbox

CodeSandbox一個線上編輯器，可以在上面建立Web應用程式並實行執行。

CodeSandbox 最初只在早期階段支援React，但它們現在已經擴充套件到Vue和Angular等庫的其他入門模板。

他們還支援使用常見的靜態站點生成器（如Gatsby或Next.js）建立專案來啟動React Web專案。

clipboard.png

14. React Bits

React Bits是一個React模式、技術、技巧和技巧的集合，所有這些都以類似於線上文件的格式編寫，你可以在同一個選項卡上快速訪問不同的設計模式和技術、反模式、樣式、UX變體以及其他與React相關的有用材料。

GitHub repo，目前有10083顆星星。

clipboard.png

15. folderize

folderize是一個VS Code 擴充套件。 它允許您將元件檔案轉換為元件資料夾結構。 React 元件仍然是一個元件，只是轉換為一個目錄。

例如，假設正在建立一個React元件，該元件將檔案作為props來顯示有用的資訊，如後設資料

後設資料元件的邏輯佔用了大量的行，因此我們們決定將其拆分為單獨的檔案。 但是，當這樣做時，我們們就有兩個相互關聯的檔案。

所以，就有有一個大概如下所示的目錄：

clipboard.png

我們們可能想要將FileView.js和filemetada.js抽象到目錄結構中，就像Apple一樣，尤其是考慮新增更多與FileScanner.js等檔案相關的元件時。

這就是folderize為我們們所做的，這樣元件們就可以得到一個類似的結構

clipboard.png

16. React Starter Projects

React starter projects 是一個依賴庫列表，可以在上面快速你需要要的依賴庫的名稱並可以跳轉對應的 github 上。

一旦看到一個你喜歡的入門專案，你就可以簡單地克隆這個庫，並根據你的需要進行修改。

但是，並不是所有的依賴庫都是通過克隆使用，因為其中一些庫需要通過安裝形式，才能成為專案的依賴項。

clipboard.png

17. Highlight Updates

這可能是開發工具包中最重要的工具。 Highlight Updates是React DevTools擴充套件的一個特性，可以檢視頁面中的哪些元件正在不必要地重新渲染。

圖片描述

它可以幫助你在開發頁面時是更容易發現一些效能問題，因為它們會使用橙色或紅色對嚴重的重新渲染問題進行著色。

18. React Diff Viewer

React Diff Viewer是一個簡單而美觀的文字差異對比工具 這支援分割檢視，內嵌檢視，字元差異，線條突出顯示等功能。

clipboard.png

19. JS.coach

JS.coach 是我最常用來與 React 有需要的庫的網站。從這個頁面可以找到需要的任何東西。

它快速、簡單、不斷更新，並且總是能給我所有專案所需的結果。最近還新增了React VR，非常棒。

20. Awesome React

Awesome React開源庫是一個與React相關的很棒的列表。

我可能會忘記其他網站並單獨從這個連結學習React。 因為可以在此找到批量有用的資源，這些資源肯定會幫助我們構建出色的React應用程式！

21. Proton Native

Proton Native為我們們提供了一個React環境來構建跨平臺的本機桌面應用程式。

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

  • 與React Native語法相同。
  • 適用於現有的React庫，例如 Redux。
  • 相容所有正常的 Node.js 包。

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

交流

乾貨系列文章彙總如下，覺得不錯點個Star，歡迎 加群 互相學習。

https://github.com/qq44924588...

我是小智，公眾號「大遷世界」作者，對前端技術保持學習愛好者。我會經常分享自己所學所看的乾貨，在進階的路上，共勉！

關注公眾號，後臺回覆福利，即可看到福利，你懂的。

clipboard.png

相關文章