正如我們所知， React 是 JavaScript 庫(kù)，用于構(gòu)建精彩的用戶(hù)界面。然而，并不是每個(gè)人都在使用相同的工具或知道有這么一些出色的工具，可以讓 Reacat 開(kāi)發(fā)體驗(yàn)變得更加有趣和積極主動(dòng)。

如果大家還沒(méi)有用過(guò) React，或者大家的朋友可能有興趣使用它，那么，當(dāng)被問(wèn)及為什么要使用這個(gè)庫(kù)的時(shí)候，我們?cè)撛趺椿卮鹉?

[[280214]]

除了告訴他們這個(gè)庫(kù)多么棒以外(這應(yīng)該是首先要說(shuō)的事)，我還會(huì)提一下，由開(kāi)源社區(qū)創(chuàng)建的工具有助于把開(kāi)發(fā)體驗(yàn)帶到一個(gè)全新的令人興奮的水平。

以下是 2019 年大家可以用來(lái)構(gòu)建 React 應(yīng)用程序的 22 個(gè)工具(該列表沒(méi)有按它們的重要性排序)

1. Webpack Bundle Analyzer

有沒(méi)有想過(guò)自己的應(yīng)用程序中的哪些包或哪些部分占用了全部的空間?好了，我們可以用 Webpack Bundle Analyzer 來(lái)找出答案。這個(gè)包將幫助我們識(shí)別出占用最多空間的輸出文件。

它將創(chuàng)建一個(gè)活動(dòng)服務(wù)器，可視化我們的包的內(nèi)容，用一個(gè)交互式樹(shù)狀圖呈現(xiàn)給我們。在我們的工具包里有了這個(gè)工具之后，我們就能夠看到呈現(xiàn)的文件所處的位置、它們的 gzip 大小、解析后的大小以及它們的父文件 / 子文件。

好處?嗯，我們可以根據(jù)所看到的來(lái)優(yōu)化自己的 React 應(yīng)用程序!

下面是個(gè)截屏，它看起來(lái)就是這樣的：

 

 

我們可以清楚地看到，PDF 包在應(yīng)用程序中占用了大部分空間。并且，它還占據(jù)了大部分的屏幕。這非常有用。

然而，截屏是最低限度的展示。我們還可以傳入有用的選項(xiàng)，以更詳細(xì)地查看它，如 generateStatesFile：true，還可以選擇生成一個(gè)靜態(tài) HTML 文件，我們可以把它保存在我們的開(kāi)發(fā)環(huán)境外面的某個(gè)地方，以便以后使用。

2. React-Proto

React-Proto 是開(kāi)發(fā)人員和設(shè)計(jì)人員的原型工具。它是一個(gè)桌面軟件，因此，在使用之前，我們必須下載并安裝該軟件。

以下是該軟件在使用時(shí)的一個(gè)示例：

 

 

該應(yīng)用程序允許我們聲明屬性及其類(lèi)型、在樹(shù)狀圖中查看我們的組件，導(dǎo)入一張背景圖片、把它們定義為有狀態(tài)或無(wú)狀態(tài)、定義其父組件、放大 / 縮小，并把原型導(dǎo)出到一個(gè)新的或現(xiàn)有的項(xiàng)目中。

該應(yīng)用程序似乎更適合 Mac 用戶(hù)，但是，它也適合 Windows 用戶(hù)。

當(dāng)我們完成用戶(hù)界面的映射時(shí)，可以選擇導(dǎo)出到一個(gè)現(xiàn)有項(xiàng)目或一個(gè)新項(xiàng)目中。如果選擇導(dǎo)出到一個(gè)現(xiàn)有項(xiàng)目并選擇了根目錄，它將把它們導(dǎo)出到./src/components，如下所示：

 

 

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

 

 

React-Proto 在 GitHub 上已經(jīng)獲得了 2000 多個(gè)星標(biāo)。

但是，我本人認(rèn)為該應(yīng)用程序需要更新，而且還有更多的工作要做，尤其是 React Hooks 的發(fā)布。

除非我們有一張可見(jiàn)的背景圖片，不然就不會(huì)縮小。換句話說(shuō)，如果導(dǎo)入一張背景圖片，縮小，然后刪除這張圖片，那么，就無(wú)法放大了，因?yàn)椴僮靼粹o已經(jīng)變灰色，不可使用了。

唯一能夠放大的方法是再次導(dǎo)入該背景圖片，然后在放大后刪除它。這個(gè)缺陷改變了我對(duì)該應(yīng)用程序的看法，但是，因?yàn)槲覀冊(cè)谄渌胤蕉伎床坏竭@個(gè)開(kāi)源工具，所以還是把它放進(jìn)了列表中。

還有，成為開(kāi)源軟件對(duì)這個(gè)應(yīng)用程序來(lái)說(shuō)是件好事，因?yàn)檫@使它有可能成為未來(lái)流行的開(kāi)源存儲(chǔ)庫(kù)列表(它們的特點(diǎn)是重要的，但是，它們似乎缺人手。)

3. Why Did You Render

Why Did You Render 猴補(bǔ)丁(monkey patches) React 通知我們可以避免的重渲染。這非常有用，不僅可以指導(dǎo)我們?yōu)槲覀兊捻?xiàng)目進(jìn)行修復(fù)，而且可以幫助我們理解 React 的工作原理。并且，當(dāng)我們對(duì) React 的工作原理有更好的理解時(shí)，我們就會(huì)成為更好的 React 開(kāi)發(fā)人員。

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

importReactfrom'react' 
importButtonfrom'@material-ui/core/Button' 
constChild =(props) =><div {...props} /> 
constChild2 =({ children, ...props }) =>( 
<div{...props}> 
{children}<Child/> 
</div> 
) 
Child2.whyDidYouRender =true 
constApp =()=>{ 
const[state, setState] = React.useState({}) 
return( 
<div> 
<Child>{JSON.stringify(state, null, 2)}</Child> 
<div> 
<Buttontype="button"onClick={()=>setState({ hello: 'hi' })}> 
Submit 
</Button> 
</div> 
<Child2>Child #2</Child2> 
</div> 
) 
} 
exportdefaultApp 

 

只有在這么做了以后，我們的控制臺(tái)才會(huì)彈出令人難以置信的惱人警報(bào)：

 

 

別誤會(huì)我的意思。要把它當(dāng)做好事情。利用這些惱人的消息，這樣我們就可以修復(fù)這些很浪費(fèi)的重渲染，并且，這些惱人的消息最終將不再煩人。

4. Create React 應(yīng)用程序

大家都知道 Create React 應(yīng)用程序 是啟動(dòng)開(kāi)發(fā) React 項(xiàng)目最快的方法(擁有開(kāi)箱即用的現(xiàn)代功能)。

還有什么能比 npx create-react-app 更簡(jiǎn)單的呢?

我在 Medium 上的教程都是用 create-react-app 構(gòu)建 React 接口界面的，只是因?yàn)樗挚煊趾?jiǎn)單。

我們當(dāng)中有些人可能不知道如何用 CRA 來(lái)創(chuàng)建一個(gè) TypeScript 項(xiàng)目。我們要做的就是在末尾加上 typescript：

npx create-react-app — typescript 

這會(huì)幫我們省去給 CRA 項(xiàng)目手工添加 TypeScript 的麻煩。

5. React Lifecycle Visualizer

React Lifecycle Visualizer 是一個(gè) npm 包，用于跟蹤和可視化任意 React 組件的生命周期方式。

與 Why Did You Render 類(lèi)似，我們可以啟用我們選擇的任何組件來(lái)顯示生命周期可視化器：

importReactfrom'react' 
import{ 
Log, 
VisualizerProvider, 
traceLifecycle, 
}from'react-lifecycle-visualizer' 
classTracedComponentextendsReact.Component{ 
state = { 
loaded:false, 
} 
componentDidMount() { 
this.props.onMount() 
} 
render() { 
return<h2>Traced Component</h2> 
} 
} 
constEnhancedTracedComponent = traceLifecycle(TracedComponent) 
constApp =()=>( 
<VisualizerProvider> 
<EnhancedTracedComponent/> 
<Log/> 
</VisualizerProvider> 
) 

Traced Component

}}constEnhancedTracedComponent = traceLifecycle(TracedComponent)constApp =()=>()

 

這將呈現(xiàn)可視化器，所示如下：

 

 

然而，這有個(gè)缺點(diǎn)，目前只能用于類(lèi)組件，因此還不支持 Hooks。(問(wèn)題是，它們能夠做到嗎?因?yàn)檫@跟生命周期有關(guān)。)

6. Guppy

Guppy 是一個(gè)友好且免費(fèi)的 React 應(yīng)用程序管理器和任務(wù)運(yùn)行器，可以在桌面上運(yùn)行。

它們似乎優(yōu)先考慮那些 React 的開(kāi)發(fā)新手。但是，對(duì)于高級(jí)開(kāi)發(fā)人員也可能是有用的。

它提供了一種友好的圖形化用戶(hù)界面，用于 React 開(kāi)發(fā)人員經(jīng)常面對(duì)的很多典型任務(wù)，如：創(chuàng)建一個(gè)新項(xiàng)目、執(zhí)行任務(wù)和管理依賴(lài)項(xiàng)。2018 年 8 月添加了對(duì) Windows 的支持，因此，可以肯定它是跨平臺(tái)的。以下是 Guppy 看起來(lái)的樣子：

 

 

7. react-testing-library

在編寫(xiě)單元測(cè)試時(shí)， react-testing-library 用起來(lái)感覺(jué)很好，因此，我一直喜歡用它。這個(gè)包提供了 React DOM 測(cè)試實(shí)用程序，鼓勵(lì)良好的測(cè)試實(shí)踐。

該解決方案旨在解決測(cè)試實(shí)施細(xì)節(jié)的問(wèn)題，就像用戶(hù)可以看到它們一樣，而不是測(cè)試 React 組件的輸入 / 輸出。

測(cè)試實(shí)施細(xì)節(jié)并不是確保應(yīng)用程序按預(yù)期工作的有效方法。

當(dāng)然，對(duì)我們?nèi)绾潍@取組件需要的數(shù)據(jù)、使用某種方法等等，我們能夠更有信心。但是，如果我們必須改變我們的實(shí)現(xiàn)方法，以指向不同的數(shù)據(jù)庫(kù)，那么，單元測(cè)試就會(huì)失敗，因?yàn)樗鼈兪邱詈线壿嫷膶?shí)現(xiàn)細(xì)節(jié)。

這是 react-testing-library 解決的一個(gè)問(wèn)題，因?yàn)椋硐肭闆r下，我們只希望我們的用戶(hù)接口界面能夠正常工作，最終可以正確地呈現(xiàn)。

我們?nèi)绾螢檫@些組件獲取數(shù)據(jù)真的無(wú)關(guān)緊要，只要它們?nèi)匀惶峁╊A(yù)期的輸出即可。

以下是我們?nèi)绾问褂迷搸?kù)來(lái)進(jìn)行測(cè)試的 示例代碼 ：

// Hoist helper functions (but not vars) to reuse between test cases 
constrenderComponent =({ count }) => 
render( 
<StateMockstate={{count}}> 
<StatefulCounter/> 
</StateMock>, 
) 
it('renders initial count',async() => { 
// Render new instance in every test to prevent leaking state 
const{ getByText } = renderComponent({count:5}) 
awaitwaitForElement(()=>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')) 
awaitwaitForElement(()=>getByText(/clicked 6 times/i)) 
}) 

8. React Developer Tools

React Developer Tools 是一個(gè)擴(kuò)展，它允許在 Chrome 和 Firefox Developer Tools 中查看 React 的組件層次結(jié)構(gòu)。

這是在本列表中最常見(jiàn)的擴(kuò)展，并仍然是 React 開(kāi)發(fā)人員能夠用于調(diào)試應(yīng)用程序的最有幫助的工具之一。

9. Bit

在使用組件庫(kù)(如 Material-UI 或 Semantic UI React )時(shí)， Bit 是一個(gè)很好的替代方法。

Bit 讓我們探索數(shù)以千計(jì)的開(kāi)源組件，并允許我們使用它們來(lái)構(gòu)建項(xiàng)目。

 

有很多不同的 React 組件，可供任何人使用，包括選項(xiàng)卡、按鈕、圖表、表格、導(dǎo)航條、下拉菜單、加載旋轉(zhuǎn)器、日期選擇器、面包屑導(dǎo)航(breadcrumbs)、圖標(biāo)、布局等等。

這些是由其他 React 開(kāi)發(fā)人員上傳的，這些開(kāi)發(fā)人員就跟你我一樣。

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

10. Storybook

如果你還不知道 Storybook ，并希望能夠更容易地構(gòu)建 UI 組件，那么，我強(qiáng)烈建議你開(kāi)始使用它。

該工具啟動(dòng)一個(gè)實(shí)時(shí)開(kāi)發(fā)服務(wù)器，支持開(kāi)箱即用的熱重載，我們可以在其中獨(dú)立地實(shí)時(shí)開(kāi)發(fā) React 組件。

關(guān)于這個(gè)還有一件很棒的事情是，我們可以使用現(xiàn)有的開(kāi)源插件，把我們的開(kāi)發(fā)體驗(yàn)提升到一個(gè)全新的水平。

比如，借助 Storybook README 包，我們可以創(chuàng)建 README 文檔，同時(shí)，在同一頁(yè)面上開(kāi)發(fā)用于生產(chǎn)的 React 組件。

這足以作為普通的文檔頁(yè)面了：

 

 

11. React Sight

大家有沒(méi)有想過(guò)，自己的應(yīng)用程序在流程圖中看起來(lái)是什么樣子? React Sight 可以讓大家可視化自己的 React 應(yīng)用程序，借助整個(gè)應(yīng)用程序的實(shí)時(shí)組件層次結(jié)構(gòu)樹(shù)呈現(xiàn)。

它還支持 反應(yīng)路由器(react-router) 、 Redux ，以及 React Fiber 。

借助該工具，大家可以將鼠標(biāo)懸停于節(jié)點(diǎn)上，它們是指向那些跟樹(shù)中直接跟它們有關(guān)的組件的鏈接。

如果大家在查看結(jié)果時(shí)遇到困難，那么，可以在地址欄中鍵入 chrome:extensions，查找 React Sight 工具箱，然后點(diǎn)擊 Allow access to file URLs 開(kāi)關(guān)，如下所示：

 

 

12. React Cosmos

React Cosmos 是用于創(chuàng)建可重用 React 組件的開(kāi)發(fā)工具。

它掃描項(xiàng)目中的組件，并使我們能夠：

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

模擬每個(gè)外部依賴(lài)項(xiàng)(如：API 響應(yīng)、localStorage 等等)。

在和運(yùn)行中的實(shí)例進(jìn)行交互時(shí)，實(shí)時(shí)查看應(yīng)用程序的狀態(tài)演變。

13. CodeSandbox

這毫無(wú)疑問(wèn)是最好的可用工具之一，可以讓我們親手使用 React 的速度比眨眼還要快(好吧，也許沒(méi)有那么快)。

這個(gè)被稱(chēng)為 CodeSandbox 的工具是一個(gè)在線編輯器，它讓我們從原型創(chuàng)建 web 應(yīng)用程序以進(jìn)行部署——所有這些都來(lái)自該網(wǎng)站。

在早期階段， CodeSandbox 最初只支持 React，但是，現(xiàn)在已經(jīng)擴(kuò)展到如 Vue和 Angular 等庫(kù)的附加啟動(dòng)模板。

它們還通過(guò)使用 Gateby 或 Next.js 等常用靜態(tài)站點(diǎn)生成器創(chuàng)建項(xiàng)目，支持啟動(dòng)下一個(gè) React web 項(xiàng)目。

談到 CodeSandbox，有很多好東西可以講。首先，它非常活躍。

如果大家需要探索一下人們?yōu)榉奖愦蠹移鹨?jiàn)正在構(gòu)建的一些項(xiàng)目，那么簡(jiǎn)單地點(diǎn)擊一下 explore 就可以訪問(wèn)一大堆代碼示例，來(lái)幫助大家更新下一個(gè)項(xiàng)目：

 

 

一旦大家開(kāi)始編輯一個(gè)項(xiàng)目，就會(huì)意識(shí)到，將要使用的實(shí)際上是個(gè)強(qiáng)大的 VS Code編輯器。

我很想寫(xiě)一篇文章全面介紹一下如今我們可以在 CodeSandbox 使用的功能，但是，看起來(lái)，這項(xiàng)工作 已經(jīng)完成了 。

14. React Bits

React Bits 是 React 模式、技術(shù)、技巧和竅門(mén)的集合，都是用類(lèi)似于在線類(lèi)文檔的格式編寫(xiě)的，大家可以快速地訪問(wèn)不同的設(shè)計(jì)模式和技術(shù)、反模式、樣式、UX 變體和其他有幫助的與 React 相關(guān)的材料，所有這一切都在同一個(gè)選項(xiàng)卡上。

他們有個(gè) GitHub 存儲(chǔ)庫(kù) ，目前有 9923 個(gè)星標(biāo)。

一些示例包括一些概念，如屬性代理、用于在不同場(chǎng)景中處理不同 UX 的組合，甚至公開(kāi)了一些每個(gè) React 開(kāi)發(fā)人員都應(yīng)該知道的一些陷阱。

這就是在他們頁(yè)面上的感覺(jué)。正如大家可以在左側(cè)菜單上看到的，上面有很多信息：

 

 

15. folderize

folderize 是一個(gè) VS Code 擴(kuò)展，發(fā)布的時(shí)間還不到 7 天。它使我們能夠把一個(gè)組件文件轉(zhuǎn)換為組件文件夾結(jié)構(gòu)。我們的 React 組件仍將是個(gè)組件，只是現(xiàn)在它轉(zhuǎn)換成一個(gè)目錄而已。

比如，假設(shè)我們?cè)趧?chuàng)建一個(gè) React 組件，它把文件作為屬性以顯示有用的信息，比如它們的元數(shù)據(jù)。

用于元數(shù)據(jù)組件的邏輯占用了很多行，因此，我們決定把這個(gè)拆分成一個(gè)單獨(dú)的文件。但是，當(dāng)我們決定這么做的時(shí)候，我們就有了兩個(gè)相互關(guān)聯(lián)的文件。

因此，如果我們有個(gè)像這樣的目錄：

 

 

我們可能想把 FileView.js 和 FileMetadata.js 抽象到一個(gè)目錄結(jié)構(gòu)中，就像 Apples 那樣——尤其是，如果我們正在考慮添加更多與 FileScanner.js 等文件相關(guān)的組件。

這就是 folderize 為我們所做的事，這樣，它們可以得到與下面類(lèi)似的結(jié)構(gòu)：

 

 

16. React 啟動(dòng)項(xiàng)目

以下是一個(gè)很棒的 React 啟動(dòng)項(xiàng)目 列表，我們可以在一個(gè)頁(yè)面上看到全部項(xiàng)目。因此，如果我們是那種覺(jué)得用一個(gè)巨大的列表來(lái)同時(shí)列出所有的選項(xiàng)是很有用的人，那么這個(gè)就很適合我們。

一旦看到我們喜歡的啟動(dòng)項(xiàng)目，我們可以簡(jiǎn)單地克隆存儲(chǔ)庫(kù)，并根據(jù)我們將要開(kāi)發(fā)的應(yīng)用程序做一些修改。

然而，并不是所有的庫(kù)都打算通過(guò)克隆存儲(chǔ)庫(kù)來(lái)使用，因?yàn)樗鼈冎杏幸恍┦且惭b的，這將成為我們項(xiàng)目中的依賴(lài)項(xiàng)。

這使獲得更新并保持項(xiàng)目簡(jiǎn)潔變得更容易。

以下是該頁(yè)面看起來(lái)的樣子：

 

 

17. 高亮顯示更新(Highlight Updates)

按理說(shuō)，這是最重要的工具，任何人都會(huì)把它放在自己的開(kāi)發(fā)工具包里。 高亮顯示更新 是 React DevTools 擴(kuò)展的功能，可以讓我們查看頁(yè)面中有哪些組件進(jìn)行了不必要的重渲染：

 

它有助于我們看到開(kāi)發(fā)頁(yè)面時(shí)的瓶頸問(wèn)題，并且因?yàn)樗鼈冇贸壬蚣t色對(duì)嚴(yán)重的重渲染問(wèn)題進(jìn)行了著色，所以更容易發(fā)現(xiàn)問(wèn)題。

除非我們的目標(biāo)是構(gòu)建一個(gè)平庸的應(yīng)用程序，否則為什么不試試這個(gè)在我們身邊的好東西呢?

18. React Diff Viewer

React Diff Viewer 是個(gè)簡(jiǎn)單又美觀的文本差異查看器，用 Diff 和 React 構(gòu)建而成。它支持這些功能，如：分屏視圖、內(nèi)聯(lián)視圖、單詞差異、行高亮等等。

如果我們想把這個(gè)功能嵌入我們的記事簿(如 Boostnote)，并對(duì)其進(jìn)行定制以更適合我們的應(yīng)用程序(主題顏色、文檔與故事書(shū)演示文本的組合等等)，那么，這是很有用的。

 

 

19. JS.coach

我用來(lái)尋找 React 相關(guān)資料最常用的網(wǎng)站是 JS.coach。現(xiàn)在，我不確定為什么提到這個(gè)網(wǎng)站的人不多，但是，僅僅從這個(gè)網(wǎng)頁(yè)，我已經(jīng)找到了所有我需要的東西。

它又快又簡(jiǎn)單，并且不斷地更新，總是能為我所有的項(xiàng)目提供所需的結(jié)果。

最近，他們添加了 React VR 選項(xiàng)卡，非常棒!

20. Awesome React

這個(gè) GitHub Awesome React 開(kāi)源存儲(chǔ)庫(kù)是一個(gè)列表，里面有一些跟 React 相關(guān)的好東西。

我可能忘了其他網(wǎng)站，只是從這個(gè)鏈接學(xué)習(xí) React。大家會(huì)找到一大堆有用的資源，這些資源一定會(huì)有助于大家構(gòu)建出色的 React 應(yīng)用程序!

21. Proton Native

Proton Native 給我們提供了一個(gè) React 環(huán)境以構(gòu)建跨平臺(tái)的本機(jī)桌面應(yīng)用程序。

是 Electron 的替代產(chǎn)品，具有一些簡(jiǎn)潔的功能，包括：

與 React Native 語(yǔ)法相同。

適用于現(xiàn)存的 React 庫(kù)，如 Redux。

跨平臺(tái)。

原生組件。不再有 Electron。

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

有興趣了解更多嗎?請(qǐng)閱讀它們的 文檔 。

22. Devhints React.js Cheatsheet

這是 一張很好的 React 速查表 ，盡管它缺少 React Hooks。不要擔(dān)心，我將為 React v16.8+ 創(chuàng)建一張速查表。