2019 年，React 開發(fā)人員應(yīng)該使用的 22 個(gè)神奇工具
正如我們所知， React 是 JavaScript 庫，用于構(gòu)建精彩的用戶界面。然而，并不是每個(gè)人都在使用相同的工具或知道有這么一些出色的工具，可以讓 Reacat 開發(fā)體驗(yàn)變得更加有趣和積極主動(dòng)。
如果大家還沒有用過 React，或者大家的朋友可能有興趣使用它，那么，當(dāng)被問及為什么要使用這個(gè)庫的時(shí)候，我們?cè)撛趺椿卮鹉?
除了告訴他們這個(gè)庫多么棒以外(這應(yīng)該是首先要說的事)，我還會(huì)提一下，由開源社區(qū)創(chuàng)建的工具有助于把開發(fā)體驗(yàn)帶到一個(gè)全新的令人興奮的水平。
以下是 2019 年大家可以用來構(gòu)建 React 應(yīng)用程序的 22 個(gè)工具(該列表沒有按它們的重要性排序)
1. Webpack Bundle Analyzer
有沒有想過自己的應(yīng)用程序中的哪些包或哪些部分占用了全部的空間?好了，我們可以用 Webpack Bundle Analyzer 來找出答案。這個(gè)包將幫助我們識(shí)別出占用最多空間的輸出文件。
它將創(chuàng)建一個(gè)活動(dòng)服務(wù)器，可視化我們的包的內(nèi)容，用一個(gè)交互式樹狀圖呈現(xiàn)給我們。在我們的工具包里有了這個(gè)工具之后，我們就能夠看到呈現(xiàn)的文件所處的位置、它們的 gzip 大小、解析后的大小以及它們的父文件 / 子文件。
好處?嗯，我們可以根據(jù)所看到的來優(yōu)化自己的 React 應(yīng)用程序!
下面是個(gè)截屏，它看起來就是這樣的：
我們可以清楚地看到，PDF 包在應(yīng)用程序中占用了大部分空間。并且，它還占據(jù)了大部分的屏幕。這非常有用。
然而，截屏是最低限度的展示。我們還可以傳入有用的選項(xiàng)，以更詳細(xì)地查看它，如 generateStatesFile：true，還可以選擇生成一個(gè)靜態(tài) HTML 文件，我們可以把它保存在我們的開發(fā)環(huán)境外面的某個(gè)地方，以便以后使用。
2. React-Proto
React-Proto 是開發(fā)人員和設(shè)計(jì)人員的原型工具。它是一個(gè)桌面軟件，因此，在使用之前，我們必須下載并安裝該軟件。
以下是該軟件在使用時(shí)的一個(gè)示例：
該應(yīng)用程序允許我們聲明屬性及其類型、在樹狀圖中查看我們的組件，導(dǎo)入一張背景圖片、把它們定義為有狀態(tài)或無狀態(tài)、定義其父組件、放大 / 縮小，并把原型導(dǎo)出到一個(gè)新的或現(xiàn)有的項(xiàng)目中。
該應(yīng)用程序似乎更適合 Mac 用戶，但是，它也適合 Windows 用戶。
當(dāng)我們完成用戶界面的映射時(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ā)布。
除非我們有一張可見的背景圖片，不然就不會(huì)縮小。換句話說，如果導(dǎo)入一張背景圖片，縮小，然后刪除這張圖片，那么，就無法放大了，因?yàn)椴僮靼粹o已經(jīng)變灰色，不可使用了。
唯一能夠放大的方法是再次導(dǎo)入該背景圖片，然后在放大后刪除它。這個(gè)缺陷改變了我對(duì)該應(yīng)用程序的看法，但是，因?yàn)槲覀冊(cè)谄渌胤蕉伎床坏竭@個(gè)開源工具，所以還是把它放進(jìn)了列表中。
還有，成為開源軟件對(duì)這個(gè)應(yīng)用程序來說是件好事，因?yàn)檫@使它有可能成為未來流行的開源存儲(chǔ)庫列表(它們的特點(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 開發(fā)人員。
我們可以通過聲明一個(gè)額外的靜態(tài)屬性 whyDidYouRender，并將其值設(shè)置為 true，把一個(gè)偵聽器附加到任意自定義組件：
- 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)開發(fā) React 項(xiàng)目最快的方法(擁有開箱即用的現(xiàn)代功能)。
還有什么能比 npx create-react-app 更簡(jiǎn)單的呢?
我在 Medium 上的教程都是用 create-react-app 構(gòu)建 React 接口界面的，只是因?yàn)樗挚煊趾?jiǎn)單。
我們當(dāng)中有些人可能不知道如何用 CRA 來創(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 類似，我們可以啟用我們選擇的任何組件來顯示生命周期可視化器：
- 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)，目前只能用于類組件，因此還不支持 Hooks。(問題是，它們能夠做到嗎?因?yàn)檫@跟生命周期有關(guān)。)
6. Guppy
Guppy 是一個(gè)友好且免費(fèi)的 React 應(yīng)用程序管理器和任務(wù)運(yùn)行器，可以在桌面上運(yùn)行。
它們似乎優(yōu)先考慮那些 React 的開發(fā)新手。但是，對(duì)于高級(jí)開發(fā)人員也可能是有用的。
它提供了一種友好的圖形化用戶界面，用于 React 開發(fā)人員經(jīng)常面對(duì)的很多典型任務(wù)，如：創(chuàng)建一個(gè)新項(xiàng)目、執(zhí)行任務(wù)和管理依賴項(xiàng)。2018 年 8 月添加了對(duì) Windows 的支持，因此，可以肯定它是跨平臺(tái)的。以下是 Guppy 看起來的樣子：
7. react-testing-library
在編寫單元測(cè)試時(shí)， react-testing-library 用起來感覺很好，因此，我一直喜歡用它。這個(gè)包提供了 React DOM 測(cè)試實(shí)用程序，鼓勵(lì)良好的測(cè)試實(shí)踐。
該解決方案旨在解決測(cè)試實(shí)施細(xì)節(jié)的問題，就像用戶可以看到它們一樣，而不是測(cè)試 React 組件的輸入 / 輸出。
測(cè)試實(shí)施細(xì)節(jié)并不是確保應(yīng)用程序按預(yù)期工作的有效方法。
當(dāng)然，對(duì)我們?nèi)绾潍@取組件需要的數(shù)據(jù)、使用某種方法等等，我們能夠更有信心。但是，如果我們必須改變我們的實(shí)現(xiàn)方法，以指向不同的數(shù)據(jù)庫，那么，單元測(cè)試就會(huì)失敗，因?yàn)樗鼈兪邱詈线壿嫷膶?shí)現(xiàn)細(xì)節(jié)。
這是 react-testing-library 解決的一個(gè)問題，因?yàn)椋硐肭闆r下，我們只希望我們的用戶接口界面能夠正常工作，最終可以正確地呈現(xiàn)。
我們?nèi)绾螢檫@些組件獲取數(shù)據(jù)真的無關(guān)緊要，只要它們?nèi)匀惶峁╊A(yù)期的輸出即可。
以下是我們?nèi)绾问褂迷搸靵磉M(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)。
這是在本列表中最常見的擴(kuò)展，并仍然是 React 開發(fā)人員能夠用于調(diào)試應(yīng)用程序的最有幫助的工具之一。
9. Bit
在使用組件庫(如 Material-UI 或 Semantic UI React )時(shí)， Bit 是一個(gè)很好的替代方法。
Bit 讓我們探索數(shù)以千計(jì)的開源組件，并允許我們使用它們來構(gòu)建項(xiàng)目。
有很多不同的 React 組件，可供任何人使用，包括選項(xiàng)卡、按鈕、圖表、表格、導(dǎo)航條、下拉菜單、加載旋轉(zhuǎn)器、日期選擇器、面包屑導(dǎo)航(breadcrumbs)、圖標(biāo)、布局等等。
這些是由其他 React 開發(fā)人員上傳的，這些開發(fā)人員就跟你我一樣。
但是，也有一些可用的實(shí)用程序，如格式化日期之間的距離。
10. Storybook
如果你還不知道 Storybook ，并希望能夠更容易地構(gòu)建 UI 組件，那么，我強(qiáng)烈建議你開始使用它。
該工具啟動(dòng)一個(gè)實(shí)時(shí)開發(fā)服務(wù)器，支持開箱即用的熱重載，我們可以在其中獨(dú)立地實(shí)時(shí)開發(fā) React 組件。
關(guān)于這個(gè)還有一件很棒的事情是，我們可以使用現(xiàn)有的開源插件，把我們的開發(fā)體驗(yàn)提升到一個(gè)全新的水平。
比如，借助 Storybook README 包，我們可以創(chuàng)建 README 文檔，同時(shí)，在同一頁面上開發(fā)用于生產(chǎn)的 React 組件。
這足以作為普通的文檔頁面了：
11. React Sight
大家有沒有想過，自己的應(yīng)用程序在流程圖中看起來是什么樣子? React Sight 可以讓大家可視化自己的 React 應(yīng)用程序，借助整個(gè)應(yīng)用程序的實(shí)時(shí)組件層次結(jié)構(gòu)樹呈現(xiàn)。
它還支持 反應(yīng)路由器(react-router) 、 Redux ，以及 React Fiber 。
借助該工具，大家可以將鼠標(biāo)懸停于節(jié)點(diǎn)上，它們是指向那些跟樹中直接跟它們有關(guān)的組件的鏈接。
如果大家在查看結(jié)果時(shí)遇到困難，那么，可以在地址欄中鍵入 chrome:extensions，查找 React Sight 工具箱，然后點(diǎn)擊 Allow access to file URLs 開關(guān)，如下所示：
12. React Cosmos
React Cosmos 是用于創(chuàng)建可重用 React 組件的開發(fā)工具。
它掃描項(xiàng)目中的組件，并使我們能夠：
用屬性、上下文和狀態(tài)的任意組合來渲染組件。
模擬每個(gè)外部依賴項(xiàng)(如：API 響應(yīng)、localStorage 等等)。
在和運(yùn)行中的實(shí)例進(jìn)行交互時(shí)，實(shí)時(shí)查看應(yīng)用程序的狀態(tài)演變。
13. CodeSandbox
這毫無疑問是最好的可用工具之一，可以讓我們親手使用 React 的速度比眨眼還要快(好吧，也許沒有那么快)。
這個(gè)被稱為 CodeSandbox 的工具是一個(gè)在線編輯器，它讓我們從原型創(chuàng)建 web 應(yīng)用程序以進(jìn)行部署——所有這些都來自該網(wǎng)站。
在早期階段， CodeSandbox 最初只支持 React，但是，現(xiàn)在已經(jīng)擴(kuò)展到如 Vue和 Angular 等庫的附加啟動(dòng)模板。
它們還通過使用 Gateby 或 Next.js 等常用靜態(tài)站點(diǎn)生成器創(chuàng)建項(xiàng)目，支持啟動(dòng)下一個(gè) React web 項(xiàng)目。
談到 CodeSandbox，有很多好東西可以講。首先，它非常活躍。
如果大家需要探索一下人們?yōu)榉奖愦蠹移鹨娬跇?gòu)建的一些項(xiàng)目，那么簡(jiǎn)單地點(diǎn)擊一下 explore 就可以訪問一大堆代碼示例，來幫助大家更新下一個(gè)項(xiàng)目：
一旦大家開始編輯一個(gè)項(xiàng)目，就會(huì)意識(shí)到，將要使用的實(shí)際上是個(gè)強(qiáng)大的 VS Code編輯器。
我很想寫一篇文章全面介紹一下如今我們可以在 CodeSandbox 使用的功能，但是，看起來，這項(xiàng)工作 已經(jīng)完成了 。
14. React Bits
React Bits 是 React 模式、技術(shù)、技巧和竅門的集合，都是用類似于在線類文檔的格式編寫的，大家可以快速地訪問不同的設(shè)計(jì)模式和技術(shù)、反模式、樣式、UX 變體和其他有幫助的與 React 相關(guān)的材料，所有這一切都在同一個(gè)選項(xiàng)卡上。
他們有個(gè) GitHub 存儲(chǔ)庫 ，目前有 9923 個(gè)星標(biāo)。
一些示例包括一些概念，如屬性代理、用于在不同場(chǎng)景中處理不同 UX 的組合，甚至公開了一些每個(gè) React 開發(fā)人員都應(yīng)該知道的一些陷阱。
這就是在他們頁面上的感覺。正如大家可以在左側(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 為我們所做的事，這樣，它們可以得到與下面類似的結(jié)構(gòu)：
16. React 啟動(dòng)項(xiàng)目
以下是一個(gè)很棒的 React 啟動(dòng)項(xiàng)目 列表，我們可以在一個(gè)頁面上看到全部項(xiàng)目。因此，如果我們是那種覺得用一個(gè)巨大的列表來同時(shí)列出所有的選項(xiàng)是很有用的人，那么這個(gè)就很適合我們。
一旦看到我們喜歡的啟動(dòng)項(xiàng)目，我們可以簡(jiǎn)單地克隆存儲(chǔ)庫，并根據(jù)我們將要開發(fā)的應(yīng)用程序做一些修改。
然而，并不是所有的庫都打算通過克隆存儲(chǔ)庫來使用，因?yàn)樗鼈冎杏幸恍┦且惭b的，這將成為我們項(xiàng)目中的依賴項(xiàng)。
這使獲得更新并保持項(xiàng)目簡(jiǎn)潔變得更容易。
以下是該頁面看起來的樣子：
17. 高亮顯示更新(Highlight Updates)
按理說，這是最重要的工具，任何人都會(huì)把它放在自己的開發(fā)工具包里。 高亮顯示更新 是 React DevTools 擴(kuò)展的功能，可以讓我們查看頁面中有哪些組件進(jìn)行了不必要的重渲染：
它有助于我們看到開發(fā)頁面時(shí)的瓶頸問題，并且因?yàn)樗鼈冇贸壬蚣t色對(duì)嚴(yán)重的重渲染問題進(jìn)行了著色，所以更容易發(fā)現(xià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)用程序(主題顏色、文檔與故事書演示文本的組合等等)，那么，這是很有用的。
19. JS.coach
我用來尋找 React 相關(guān)資料最常用的網(wǎng)站是 JS.coach。現(xiàn)在，我不確定為什么提到這個(gè)網(wǎng)站的人不多，但是，僅僅從這個(gè)網(wǎng)頁，我已經(jīng)找到了所有我需要的東西。
它又快又簡(jiǎn)單，并且不斷地更新，總是能為我所有的項(xiàng)目提供所需的結(jié)果。
最近，他們添加了 React VR 選項(xiàng)卡，非常棒!
20. Awesome React
這個(gè) GitHub Awesome React 開源存儲(chǔ)庫是一個(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 語法相同。
適用于現(xiàn)存的 React 庫，如 Redux。
跨平臺(tái)。
原生組件。不再有 Electron。
與所有正常的 Node.js 包兼容。
有興趣了解更多嗎?請(qǐng)閱讀它們的 文檔 。
22. Devhints React.js Cheatsheet
這是 一張很好的 React 速查表 ，盡管它缺少 React Hooks。不要擔(dān)心，我將為 React v16.8+ 創(chuàng)建一張速查表。
