22 個讓 React 開發(fā)更高效更有趣的工具

英文?|?https://dev.to/jsmanifest/22-miraculous-tools-for-react-developers-in-2019-4i46
翻譯 |?https://www.leancloud.cn/
眾所周知，React 是 JavaScript 庫，用于構(gòu)建出色的用戶界面。但是，并不是每個人都在使用相同的工具或都知道所有有用的工具，這些工具有助于使 React 開發(fā)體驗更有趣，更主動。
如果大家還沒使用 React ，或者你有對它感興趣的朋友，當(dāng)他們問你為什么選擇這個庫的時候，你該怎么回答呢？除了告訴他們這個庫有多棒以外（這應(yīng)該是首先要說的事），我還想提一下，這些由開源社區(qū)創(chuàng)建的工具有助于把開發(fā)體驗帶到一個全新的令人興奮的水平。以下是 2019 年大家可以用來構(gòu)建 React 應(yīng)用程序的 22 個工具（該列表沒有按它們的重要性排序）。1.?webpack-bundle-analyzer大家有沒有想過自己的應(yīng)用程序哪些包或哪部分占用了全部空間？好了，我們可以用 webpack-bundle-analyzer 來查看，它將幫助我們識別出占用最多空間的輸出文件。它將創(chuàng)建一個實時服務(wù)器，并向我們提供捆綁包內(nèi)容的交互式可視化樹狀圖。借助此工具包，我們可以查看所顯示文件的位置，它們的 gzip 大小，解析后的大小及其所屬的父子級文件。有什么好處？我們可以根據(jù)看到的圖示來優(yōu)化我們的 React 應(yīng)用！這是它的屏幕截圖：

我們可以清楚地看到 pdf 軟件包在應(yīng)用程序中占據(jù)了最大的空間。它還占據(jù)了最大屏幕，這對我們都很有用。不過，屏幕截圖質(zhì)量非常小。我們還可以輸入有用的選項以查看更多詳細信息，如 generateStatsFile: true， 并且可以選擇生成靜態(tài) HTML 文件，保存在開發(fā)環(huán)境之外的某個地方，以備后用。

2.?React-Proto

React-Proto 是面向開發(fā)人員和設(shè)計人員的原型制作工具。這是一個桌面軟件，所以在使用之前，我們需要下載安裝該軟件。以下是工具頁面樣式：

該應(yīng)用程序允許我們聲明屬性及其類型，在樹狀圖中查看組件，導(dǎo)入背景圖像，將其定義為有狀態(tài)或無狀態(tài)，定義其父組件，放大/縮小，以及將原型導(dǎo)出到一個新的或已有的項目中。該應(yīng)用程序似乎更適合 Mac 用戶，不過，它也支持 Windows。當(dāng)我們完成用戶界面映射后，可以選擇導(dǎo)出到現(xiàn)有項目或新項目中。如果選擇導(dǎo)出到現(xiàn)有項目并選擇了根目錄，它們將被導(dǎo)出到 ./src/components，如下所示：

以下是在示例中我們使用組件之一的例子：

React-Proto 在 GitHub 上獲得了 2,000 個星標。不過，我認為這個應(yīng)用程序還需要更新，并且還有很多需要做的工作，尤其是 React Hooks 的發(fā)布。除非我們有一張可見的背景圖片，不然就不能縮小。換句話說，如果導(dǎo)入一張背景圖片，縮小，然后刪除這張圖片后，圖就無法放大了，因為操作按鈕已經(jīng)變灰色，不可使用了。放大的唯一方法是重新導(dǎo)入背景圖片，放大后將其刪除。這個缺陷改變了我對這個工具產(chǎn)生的好感，但因為在其他地方看不到此開源文件，所以把它加入了列表中。當(dāng)然，成為開源軟件對這個應(yīng)用程序來說是件好事，因為這使它有可能成為未來流行的開源存儲庫列表。

3.?Why Did You Render

Why Did You Render 猴子補丁 React 通知我們可以避免重渲染。這不僅非常有用，還可以指導(dǎo)我們對項目進行性能修復(fù)，幫助我們了解 React 工作的方式。而且，當(dāng)我們對 React 工作原理有更多的了解時，也能讓我們成為更好的 React 開發(fā)人員。

猴子補丁: 這個叫法起源于 Zope 框架，大家在修正 Zope 的 Bug 的時候經(jīng)常在程序后面追加更新部分，這些被稱作是“雜牌軍補丁（guerilla patch）”，后來 guerilla 就漸漸的寫成了 gorllia（猩猩），再后來就寫了monkey（猴子），所以猴子補丁的叫法是這么莫名其妙的得來的。

我們可以通過聲明一個額外的靜態(tài)屬性?whyDidYouRender，并將其值設(shè)置為?true，把一個偵聽器附加到任意自定義組件：

import React from 'react'import Button from '@material-ui/core/Button'
const Child = (props) => 

const Child2 = ({ children, ...props }) => (  
    {children}   
)
Child2.whyDidYouRender = true
const App = () => {  const [state, setState] = React.useState({})
  return (    
      {JSON.stringify(state, null, 2)}      
         setState({ hello: 'hi' })}>          Submit              
      Child #2    
  )}
export default App

只有這樣做之后，我們的控制臺才會彈出令人難以置信的煩人警報：

但別誤會，請把它當(dāng)成一件好事。利用那些煩人的消息，我們就可以修復(fù)那些浪費的重渲染。

4.?Create React App

大家都知道 Create React App 是啟動開發(fā) React 項目最快的方法（擁有開箱即用的現(xiàn)代功能）。還有什么能比?npx create-react-app ?更簡單的呢？我在 Medium 上的教程（以及 Dev.to）都是用 create-react-app 構(gòu)建 React 接口界面的，就因為它又快又簡單。我們當(dāng)中有些人可能不知道如何用 CRA 來創(chuàng)建一個 TypeScript 項目。我們要做的就是在末尾加上?--typescript：

npx create-react-app  --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 
Traced Component  }}
const EnhancedTracedComponent = traceLifecycle(TracedComponent)
const App = () => (            )

運行結(jié)果，如下所示：

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

6.?Guppy

Guppy 是 React 的一個友好且免費的應(yīng)用程序管理器和任務(wù)運行器，可以在桌面上運行且支持跨平臺，大家可以放心使用。它提供了很多友好的圖形界面，為 React 開發(fā)人員的一些典型任務(wù)項目提供支持。例如創(chuàng)建新項目，執(zhí)行任務(wù)和管理依賴項。并在 2018 年 8 月添加支持 Windows，因此可以放心，它肯定是跨平臺的。以下是 Guppy 使用時的樣子：

7.?react-testing-library

我一直很喜歡 react-testing-library，因為在編寫單元測試時感覺不錯。這個包提供了實用的 DOM 測試程序，鼓勵良好的測試實踐。此解決方案旨在解決測試實施細節(jié)的問題，就像用戶可以看到它們一樣，而不是測試 React 組件的輸入/輸出。測試實施細節(jié)并不是確保應(yīng)用按預(yù)期運行的有效方法。當(dāng)然，我們能夠更清楚的了解如何獲取組件所需的數(shù)據(jù)，使用哪種排序方法等。但是，如果我們必須更改實現(xiàn)方式以指向另一個數(shù)據(jù)庫的話，單元測試就會失敗，因為這些是耦合邏輯的實現(xiàn)細節(jié)。這是 react-testing-library 解決的一個問題，因為理想情況下，我們只希望我們的用戶界面能夠正常工作并最終正確顯示。只要這些組件能夠提供預(yù)期的輸出，數(shù)據(jù)如何獲取到這些組件實際上并不重要。以下是使用此庫進行測試的示例代碼：

// Hoist helper functions (but not vars) to reuse between test casesconst renderComponent = ({ count }) =>  render(              ,  )
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 開發(fā)人員工具中查看 React 組件層次結(jié)構(gòu)。這是 React 開發(fā)中最常見的擴展插件，并且是 React 開發(fā)人員用來調(diào)試其應(yīng)用程序的最有用的工具之一。

9.?Bit

在使用諸如 material-ui 或 semantic-ui-react 之類的組件庫時，Bit 是一個很好的替代方案。它可以讓我們探索數(shù)千個開源組件，并使用它們來構(gòu)建項目。

有很多不同的 React 組件，可供任何人使用，包括選項卡、按鈕、圖表、表格、導(dǎo)航條、下拉菜單、加載旋轉(zhuǎn)器、日期選擇器、面包屑導(dǎo)航（breadcrumbs）、圖標、布局等等。這些是由其他 React 開發(fā)人員上傳的，這些開發(fā)人員就跟你我一樣。但是，也有一些可用的實用程序，如格式化日期之間的距離。

10.?Storybook

如果大家還不了解 Storybook，并且希望能夠輕松地構(gòu)建 UI 組件，我強烈建議你立即使用它。該工具啟動了支持熱重載的實時開發(fā)服務(wù)器，讓我們可以在其中獨立地實時開發(fā) React 組件。另一個很棒的事情是，我們可以使用現(xiàn)有的開源插件，將我們的開發(fā)經(jīng)驗提升到一個全新的水平。例如，利用 Storybook README 包，我們可以在同一頁面上創(chuàng)建 README 文檔，同時開發(fā)供生產(chǎn)使用的 React 組件。這足以作為常規(guī)文檔頁面了：

11.?React Sight
大家有沒有想過自己的應(yīng)用程序在流程圖中看起來是什么樣的？React -sight 可以讓整個應(yīng)用程序以樹狀圖的形式展示層次結(jié)構(gòu)，清楚查看我們的 React 應(yīng)用程序。它還支持 React Router，Redux 和 React Fibre。使用此工具，我們可以將鼠標懸停在節(jié)點上，這些節(jié)點是指向樹中與它們直接相關(guān)的組件的鏈接。如果大家在查看結(jié)果時遇到問題，可以在地址欄上輸入 chrome:extensions，找到 React Sight 框并單擊 Allow access to file URLs 開關(guān)，如下所示：

12.?React-cosmos

React-cosmos 是用于創(chuàng)建可重復(fù)使用 React 組件的開發(fā)工具。它會掃描項目中的組件，并且可以實現(xiàn)以下功能：

• 用屬性、上下文和狀態(tài)的任意組合下渲染組件

• 模擬每個外部依賴項（例如 API 響應(yīng)、localStorage 等）

• 與正在運行的實例進行交互時，查看應(yīng)用程序狀態(tài)的實時變化

13.?CodeSandbox

這是本次推薦中最好的可用工具之一，它可以讓我們手動使用 React 的速度比眨眼還快（好吧，也許也沒那么快）。這個稱為 CodeSandbox 的工具是一個在線編輯器，我們從創(chuàng)建原型到 Web 應(yīng)用程序部署 - 都可以在這個網(wǎng)站實現(xiàn)！在早期，Codesandbox 僅支持 React，但現(xiàn)在已經(jīng)擴展到 Vue 和 Angular 等庫。他們還支持常見的靜態(tài)站點生成器（如 gatsby 或 nextjs ）創(chuàng)建項目來啟動下一個 React Web 項目。關(guān)于 codesandbox，它不僅活躍，還有很多有意思的事情可以討論。如果大家需要探索一下人們?yōu)榉奖愦蠹移鹨娬跇?gòu)建的一些項目，那么單擊 explore 就可以輕松訪問到大量代碼示例，來幫助大家更新下一個項目：

大家一旦開始編輯項目，就會意識到，實際上要使用的是個功能強大的 VSCode 編輯器。我很想寫一篇完整的文章，介紹我們今天在 codeandbox 上可以使用的所有功能，不過，現(xiàn)在看起來工作已經(jīng)完成了。

14.?React bits

React bits 是 React 模式、技術(shù)、技巧和竅門的集合，所有這些都以類似在線文檔的格式編寫，大家可以在同一個選項卡上快速訪問不同的設(shè)計模式和技術(shù)、反模式、樣式、UX 變體以及其他有用的與 React 相關(guān)的材料。他們有一個 GitHub 存儲庫，目前有 10437 星。一些示例包括諸如道具代理，在不同場景下處理各種 UX 的組合之類的概念，甚至還提示了每個開發(fā)人員應(yīng)該避免的一些陷阱。這是他們頁面上的樣子，如大家在左側(cè)的菜單上看到的那樣，有很多信息：）

15.?Folderize

Folderize 是一個 VSCode 擴展。它可以讓我們將組件文件轉(zhuǎn)換為組件文件夾結(jié)構(gòu)。轉(zhuǎn)換后的 React 組件仍將是一個組件，只是現(xiàn)在已轉(zhuǎn)換為一個目錄。例如，假設(shè)我們正在創(chuàng)建一個 React 組件，它把文件作為屬性以顯示有用的信息，比如它們的元數(shù)據(jù)。元數(shù)據(jù)組件的邏輯占用了很多行，因此我們決定將其拆分為一個單獨的文件。但是，當(dāng)我們決定這樣做時，我們就有了兩個相互關(guān)聯(lián)的文件。因此，如果我們的目錄如下所示：

我們可能想把 FileView.js 和 FileMetadata.js 抽象到目錄結(jié)構(gòu)中，像 Apples-?那樣，特別是如果我們希望添加更多與文件相關(guān)的組件，比如 FileScanner.js 。這就是 folderize 可以為我們做的事情，這樣它們就可以具有以下類似結(jié)構(gòu)：

import React from 'react'import FileView from './src/components/FileView'
const App = (props) => 
export default App

16.?React Starter Projects

React Starter Projects 是一個很棒的依賴庫列表，我們可以在一個頁面中查看全部項目。因此，如果我們覺得能同時快速查看到大量選項是非常有用的，那么這個很適合我們。一旦看到喜歡的入門項目后，我們就可以簡單克隆存儲庫，根據(jù)開發(fā)中的應(yīng)用需要進行簡單修改。但是，并非所有的庫都用來克隆存儲庫，因為其中一些庫需要通過安裝形式，才能成為項目的依賴項。這樣可以更輕松地獲取更新并保持項目整潔。以下是該頁面看起來的樣子：

17. Highlight Updates

可以說，這是每個開發(fā)者工具包里都應(yīng)該有的重要工具。Highlight Updates 是 React DevTools 的一項擴展功能，可以查看頁面中的哪些組件正在不必要地重渲染。

它們會用橙色/紅色標出嚴重的重渲染問題，幫助我們在開發(fā)頁面時更容易的發(fā)現(xiàn)一些性能問題。除非我們的目標是構(gòu)建平庸的應(yīng)用程序，否則為什么不試試這個在我們身邊的好東西。

18.?React Diff Viewer

React Diff Viewer 是使用 Diff 和 React 制作的簡單美觀的文本差異查看器。支持多種功能，如：分屏視圖，內(nèi)聯(lián)視圖，單詞差異，行高亮顯示等。如果我們想將此功能嵌入記事本（如 Boostnote）和自定義至應(yīng)用程序（比如主題顏色、故事演示文檔組合等），那么，它將非常有用。

19.?JS.coach

JS.coach 是我經(jīng)常用來查找 React 相關(guān)材料的網(wǎng)站。我不知道為什么提到這個網(wǎng)站的人不多，但在這個頁面我發(fā)現(xiàn)了幾乎所有我需要的信息，它快捷、方便，并不斷更新，總是能為我所有的項目提供所需的結(jié)果。最近，他們添加了 React VR 選項卡，這真是太好了！

20.?Awesome React

Awesome React 開源庫是一個與 React 相關(guān)的并非常棒的列表。這讓我可能會忘記其他網(wǎng)站只從這個鏈接學(xué)習(xí) React 。因為可以在此找到大量有用的資源，這些資源肯定會幫助我們構(gòu)建出色的 React 應(yīng)用程序！

21.?Proton Native

Proton Native 為大家提供了一個 React 環(huán)境來構(gòu)建跨平臺的本機桌面應(yīng)用程序。它是 Electron 的替代產(chǎn)品，只有一些簡潔的功能，包括：

• 與 React Native 相同的語法

• 適用于現(xiàn)存的 React 庫，例如 Redux

• 跨平臺

• 原生組件，不再有 Electron

• 與所有正常的 Node.js 包兼容

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

22.?Devhints React.js Cheatsheet

一個不錯的 React 速查表，盡管它缺少 React Hooks。不用擔(dān)心，我將為 Reactv16.8 + 創(chuàng)建速查表，請繼續(xù)關(guān)注。

結(jié)論

以上就是本次分享的全部工具。希望大家在這里找到了有價值的信息。