2019 年，React 開發人員應該掌握的 22 種神奇工具

本文經 Jsmanifest 受權 LeanCloud 翻譯轉載，原文連接。

衆所周知，React 是 JavaScript 庫，用於構建出色的用戶界面。可是，並非每一個人都在使用相同的工具或都知道全部有用的工具，這些工具備助於使 React 開發體驗更有趣，更主動。

若是你們還沒使用 React ，或者你有對它感興趣的朋友，當他們問你爲何選擇這個庫的時候，你該怎麼回答呢？除了告訴他們這個庫有多棒之外（這應該是首先要說的事），我還想提一下，這些由開源社區建立的工具備助於把開發體驗帶到一個全新的使人興奮的水平。

如下是 2019 年你們能夠用來構建 React 應用程序的 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 個星標。

不過，我認爲這個應用程序還須要更新，而且還有不少須要作的工做，尤爲是 React Hooks 的發佈。

除非咱們有一張可見的背景圖片，否則就不能縮小。換句話說，若是導入一張背景圖片，縮小，而後刪除這張圖片後，圖就沒法放大了，由於操做按鈕已經變灰色，不可以使用了。

放大的惟一方法是從新導入背景圖片，放大後將其刪除。這個缺陷改變了我對這個工具產生的好感，但由於在其餘地方看不到此開源文件，因此把它加入了列表中。固然，成爲開源軟件對這個應用程序來講是件好事，由於這使它有可能成爲將來流行的開源存儲庫列表。

3. Why Did You Render

Why Did You Render 猴子補丁 React 通知咱們能夠避免重渲染。這不只很是有用，還能夠指導咱們對項目進行性能修復，幫助咱們瞭解 React 工做的方式。並且，當咱們對 React 工做原理有更多的瞭解時，也能讓咱們成爲更好的 React 開發人員。

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

咱們能夠經過聲明一個額外的靜態屬性 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> 更簡單的呢？

我在 Medium 上的教程（以及 Dev.to）都是用 create-react-app 構建 React 接口界面的，就由於它又快又簡單。

咱們當中有些人可能不知道如何用 CRA 來建立一個 TypeScript 項目。咱們要作的就是在末尾加上 --typescript：

npx create-react-app <name> --typescript
複製代碼

這會幫咱們省去給 CRA 項目手工添加 TypeScript 的麻煩。

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 的一個友好且免費的應用程序管理器和任務運行器，能夠在桌面上運行且支持跨平臺，你們能夠放心使用。

它提供了不少友好的圖形界面，爲 React 開發人員的一些典型任務項目提供支持。例如建立新項目，執行任務和管理依賴項。並在 2018 年 8 月添加支持 Windows，所以能夠放心，它確定是跨平臺的。

如下是 Guppy 使用時的樣子：

7. react-testing-library

我一直很喜歡 react-testing-library，由於在編寫單元測試時感受不錯。這個包提供了實用的 DOM 測試程序，鼓勵良好的測試實踐。

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

測試實施細節並非確保應用按預期運行的有效方法。固然，咱們可以更清楚的瞭解如何獲取組件所需的數據，使用哪一種排序方法等。可是，若是咱們必須更改實現方式以指向另外一個數據庫的話，單元測試就會失敗，由於這些是耦合邏輯的實現細節。

這是 react-testing-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 開發人員工具中查看 React 組件層次結構。

這是 React 開發中最多見的擴展插件，而且是 React 開發人員用來調試其應用程序的最有用的工具之一。

9. Bit

在使用諸如 material-ui 或 semantic-ui-react 之類的組件庫時，Bit 是一個很好的替代方案。它可讓咱們探索數千個開源組件，並使用它們來構建項目。

有不少不一樣的 React 組件，可供任何人使用，包括選項卡、按鈕、圖表、表格、導航條、下拉菜單、加載旋轉器、日期選擇器、麪包屑導航（breadcrumbs）、圖標、佈局等等。

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

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

10. Storybook

若是你們還不瞭解 Storybook，而且但願可以輕鬆地構建 UI 組件，我強烈建議你當即使用它。該工具啓動了支持熱重載的實時開發服務器，讓咱們能夠在其中獨立地實時開發 React 組件。

另外一個很棒的事情是，咱們可使用現有的開源插件，將咱們的開發經驗提高到一個全新的水平。例如，利用 Storybook README 包，咱們能夠在同一頁面上建立 README 文檔，同時開發供生產使用的 React 組件。這足以做爲常規文檔頁面了：

11. React Sight

你們有沒有想過本身的應用程序在流程圖中看起來是什麼樣的？React -sight 可讓整個應用程序以樹狀圖的形式展現層次結構，清楚查看咱們的 React 應用程序。它還支持 React Router，Redux 和 React Fibre。

使用此工具，咱們能夠將鼠標懸停在節點上，這些節點是指向樹中與它們直接相關的組件的連接。

若是你們在查看結果時遇到問題，能夠在地址欄上輸入 chrome:extensions，找到 React Sight 框並單擊 Allow access to file URLs 開關，以下所示：

12. React-cosmos

React-cosmos 是用於建立可重複使用 React 組件的開發工具。

它會掃描項目中的組件，而且能夠實現如下功能：

• 用屬性、上下文和狀態的任意組合下渲染組件

• 模擬每一個外部依賴項（例如 API 響應、localStorage 等）

• 與正在運行的實例進行交互時，查看應用程序狀態的實時變化

13. CodeSandbox

這是本次推薦中最好的可用工具之一，它可讓咱們手動使用 React 的速度比眨眼還快（好吧，也許也沒那麼快）。

這個稱爲 CodeSandbox的工具是一個在線編輯器，咱們從建立原型到 Web 應用程序部署 - 均可以在這個網站實現！

在早期，Codesandbox 僅支持 React，但如今已經擴展到 Vue 和 Angular 等庫。他們還支持常見的靜態站點生成器（如 gatsby 或 nextjs ）建立項目來啓動下一個 React Web 項目。

關於 codesandbox，它不只活躍，還有不少有意思的事情能夠討論。

若是你們須要探索一下人們爲方便你們起見正在構建的一些項目，那麼單擊 explore 就能夠輕鬆訪問到大量代碼示例，來幫助你們更新下一個項目：

你們一旦開始編輯項目，就會意識到，實際上要使用的是個功能強大的 VSCode 編輯器。

我很想寫一篇完整的文章，介紹咱們今天在 codeandbox 上可使用的全部功能，不過，如今看起來工做已經完成了。

14. React bits

React bits 是 React 模式、技術、技巧和竅門的集合，全部這些都以相似在線文檔的格式編寫，你們能夠在同一個選項卡上快速訪問不一樣的設計模式和技術、反模式、樣式、UX 變體以及其餘有用的與 React 相關的材料。

他們有一個 GitHub 存儲庫，目前有 10437 星。

一些示例包括諸如道具代理，在不一樣場景下處理各類 UX 的組合之類的概念，甚至還提示了每一個開發人員應該避免的一些陷阱。

這是他們頁面上的樣子，如你們在左側的菜單上看到的那樣，有不少信息：）

15. Folderize

Folderize 是一個 VSCode 擴展。它可讓咱們將組件文件轉換爲組件文件夾結構。轉換後的 React 組件仍將是一個組件，只是如今已轉換爲一個目錄。

例如，假設咱們正在建立一個 React 組件，它把文件做爲屬性以顯示有用的信息，好比它們的元數據。元數據組件的邏輯佔用了不少行，所以咱們決定將其拆分爲一個單獨的文件。可是，當咱們決定這樣作時，咱們就有了兩個相互關聯的文件。

所以，若是咱們的目錄以下所示：

咱們可能想把 FileView.js 和 FileMetadata.js 抽象到目錄結構中，像 Apples- 那樣，特別是若是咱們但願添加更多與文件相關的組件，好比 FileScanner.js 。這就是 folderize 能夠爲咱們作的事情，這樣它們就能夠具備如下相似結構：

import React from 'react'
import FileView from './src/components/FileView'

const App = (props) => <FileView {...props} />

export default App
複製代碼

16. React Starter Projects

React Starter Projects 是一個很棒的依賴庫列表，咱們能夠在一個頁面中查看所有項目。所以，若是咱們以爲能同時快速查看到大量選項是很是有用的，那麼這個很適合咱們。

一旦看到喜歡的入門項目後，咱們就能夠簡單克隆存儲庫，根據開發中的應用須要進行簡單修改。可是，並不是全部的庫都用來克隆存儲庫，由於其中一些庫須要經過安裝形式，才能成爲項目的依賴項。這樣能夠更輕鬆地獲取更新並保持項目整潔。

如下是該頁面看起來的樣子：

17. Highlight Updates

能夠說，這是每一個開發者工具包裏都應該有的重要工具。Highlight Updates 是 React DevTools 的一項擴展功能，能夠查看頁面中的哪些組件正在沒必要要地重渲染。

它們會用橙色/紅色標出嚴重的重渲染問題，幫助咱們在開發頁面時更容易的發現一些性能問題。

除非咱們的目標是構建平庸的應用程序，不然爲何不試試這個在咱們身邊的好東西。

18. React Diff Viewer

React Diff Viewer 是使用 Diff 和 React 製做的簡單美觀的文本差別查看器。支持多種功能，如：分屏視圖，內聯視圖，單詞差別，行高亮顯示等。

若是咱們想將此功能嵌入記事本（如 Boostnote）和自定義至應用程序（好比主題顏色、故事演示文檔組合等），那麼，它將很是有用。

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

• 跨平臺

• 原生組件，再也不有 Electron

• 與全部正常的 Node.js 包兼容

有興趣瞭解更多嗎？請閱讀他們的文檔。

22. Devhints React.js Cheatsheet

一個不錯的 React 速查表，儘管它缺乏 React Hooks。不用擔憂，我將爲 Reactv16.8 + 建立速查表，請繼續關注。

結論

以上就是本次分享的所有工具。

但願能爲你們提供幫助。