您好,登錄后才能下訂單哦!
這篇文章主要講解了“React研發(fā)人員的超強(qiáng)工具有哪些”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“React研發(fā)人員的超強(qiáng)工具有哪些”吧!
1. Webpack Bundle Analyzer
https://github.com/webpack-contrib/webpack-bundle-analyzer
有沒有想過是什么程序包或應(yīng)用程序的零件占用了所有空間?Webpack Bundle Analyzer 可以幫你找到答案。這款程序包可幫助用戶識(shí)別那些占用了大部分空間的輸出文件。
它會(huì)創(chuàng)建一個(gè)實(shí)況服務(wù)器,以交互式樹圖這一可視化方式顯示軟件集的內(nèi)容。軟件包中有了它,就可以看見顯示文件的位置、其壓縮文件的大小、解析文件大小以及其源文件/衍生文件。
好處是什么?基于所見優(yōu)化 React 程序!
這是該應(yīng)用程序的截圖:
顯而易見, pdf 程序包在應(yīng)用程序中占用了大部分空間。但它也占用了屏幕上的大部分空間。這真的很有用。
然而,這個(gè)截屏是最小化的,還可以瀏覽一些有用的選項(xiàng)查看更多細(xì)節(jié),比如 generateStatsFile: true,并且也可以選擇生成靜態(tài)的 HTML 文件,將其保存到研發(fā)環(huán)境外以備用。
2. React-Proto
https://github.com/React-Proto/react-proto
React-Proto 是一款提供給研發(fā)人員和設(shè)計(jì)人員的原型化工具。這是一款桌面軟件,所以在使用前必須進(jìn)行下載和安裝。
這是該軟件使用實(shí)例:
這款應(yīng)用程序允許用戶申報(bào)小道具及其類型,在樹形圖中查看組件,輸入背景圖像,定義其有無狀態(tài),明確其父組件是什么,進(jìn)行縮放,將原型輸出到一個(gè)新的或已存在的項(xiàng)目中。
這款程序看上去更像是為 Mac 用戶量身定制,然而,對(duì) Windows 用戶來說,它還是很好用。
已經(jīng)完成用戶接口繪制時(shí),就可以選擇輸出到一個(gè)現(xiàn)存的項(xiàng)目還是一個(gè)新項(xiàng)目中。如果選擇輸出到現(xiàn)存的項(xiàng)目并選擇了根目錄,就會(huì)像這樣輸出到 ./src/components:
此處為實(shí)例中存在的組件之一的樣例:
React-Proto 在 GitHub 獲得了2,000多星的好評(píng)。
然而,就筆者個(gè)人而言,這款應(yīng)用程序仍需更新改進(jìn),尤其是 React Hooks 的發(fā)行。
而且它無法縮小,除非存在可見的背景圖像。換言之,如果輸入一個(gè)背景圖像,縮小,然后刪除背景圖像,那將無法再次放大圖像,因?yàn)榘粹o會(huì)變成灰色。
重新放大的唯一途徑就是重新輸入背景圖像,并在重新放大后再將其移除。這一瑕疵改變了筆者對(duì)這款應(yīng)用的看法,但它仍位列前22款工具之中,因?yàn)槿绱碎_源的確獨(dú)此一家。
開源是該應(yīng)用程序的優(yōu)勢(shì),因?yàn)樗鼮樵谖磥硇纬哨呄蜷_源的代碼庫列表中提供了各類可能性。(其優(yōu)勢(shì)很重要,但似乎缺少人力資源支持。)
3. Why Did You Render
https://github.com/welldone-software/why-did-you-render
這款Why Did You Render 修補(bǔ)程序通過告知研發(fā)人員一些可避免的刷新來修復(fù) React。
這太有用了,不僅指導(dǎo)了項(xiàng)目的修復(fù)工作,還幫助研發(fā)人員了解 React 的運(yùn)作過程。對(duì) React的運(yùn)作有了更好的理解后,React 研發(fā)人員將大獲成功。
通過顯示值為 true的額外靜態(tài)性能 whyDidYouRender 給任意一個(gè)自定義組件附加一個(gè)收聽器:
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
只有做完了這些,控制臺(tái)才能在受到非常煩人的警告時(shí)獲得通知:
別將這些信息視作錯(cuò)誤。把它看作是好事。利用這些煩人的信息,就能夠修復(fù)那些浪費(fèi)的補(bǔ)丁,最后這些煩人的消息都將離你而去!
4. Create React App
https://github.com/facebook/create-react-app
眾人皆知,Create React App 是動(dòng)手研發(fā)一個(gè) React 項(xiàng)目最快的方式(在工具箱之外包含了現(xiàn)代化性能)。
還有比 npx create-react-app
Medium上所有的教程都用create-react-app建立 React 接口,就是因?yàn)榭旖荨?/p>
一些人可能不知道如何使用CRA創(chuàng)建一個(gè)TypeScript 項(xiàng)目。只需要在結(jié)尾加上 –typescript就可以了:
npx create-react-app
它將省去給CRA項(xiàng)目手動(dòng)添加TypeScript的麻煩。
5. React Lifecycle Visualizer
https://github.com/Oblosys/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 <h3>Traced Component</h3> } } const EnhancedTracedComponent = traceLifecycle(TracedComponent) const App = () => ( <VisualizerProvider> <EnhancedTracedComponent /> <Log /> </VisualizerProvider> )
這會(huì)使觀察器如下顯示:
然而,其中一個(gè)缺點(diǎn)是,目前它只對(duì)類組件有用,因此暫不支持 Hooks。(問題是,它們可以被視作生命周期嗎?)
6. Guppy
https://github.com/joshwcomeau/guppy
Guppy 是一款友好而免費(fèi)的應(yīng)用管理程序和任務(wù)管理工具,它為桌面運(yùn)行的 React 而設(shè)計(jì)。
這款應(yīng)用似乎優(yōu)先考慮了在 React 中研發(fā)程序的新手。當(dāng)然,它對(duì)高級(jí)研發(fā)人員來說,或許也是有用的。
它提供了一個(gè)友好的圖像化用戶接口,專門針對(duì) React 研發(fā)人員常面臨的許多典型任務(wù),比如新項(xiàng)目的創(chuàng)建,任務(wù)的執(zhí)行和依賴性管理。
2018年8月,添加了windows系統(tǒng)的支持,所以可以肯定的是,它是跨平臺(tái)的。
這是Guppy的界面樣貌:
7. react-testing-library
https://github.com/testing-library/react-testing-library
筆者一直很喜歡react-testing-library,因?yàn)樵诰帉憜卧獪y(cè)試的時(shí)候,它總讓人覺得對(duì)味。該程序包提供 React DOM 測(cè)試實(shí)用程序,促進(jìn)良好的測(cè)試實(shí)踐。
這一解決方案的目標(biāo)是解決測(cè)試實(shí)施細(xì)節(jié)的問題,可它卻測(cè)試了 React 組件的輸入/輸出,就像用戶能看見一樣。
測(cè)試實(shí)施細(xì)節(jié)不是確保應(yīng)用程序如期運(yùn)行的有效途徑。
當(dāng)然了,更讓人有信心的是如何獲取組件需要的數(shù)據(jù),使用何種排序方式等。然而,如果需要改變實(shí)施方法以針對(duì)不同的數(shù)據(jù)庫,單元測(cè)試將會(huì)失敗,因?yàn)樗鼈兪邱詈线壿嫷膶?shí)施細(xì)節(jié)。
這就是 react-testing-library 解決的問題,因?yàn)樵诶硐肭闆r下,研發(fā)人員想要的就是讓用戶接口運(yùn)行并正確顯示直到結(jié)束。
只要輸出仍在預(yù)期之中,如何給這些組件獲取數(shù)據(jù)真的不重要。
這有一段有關(guān)如何使用庫放置測(cè)試的樣本代碼:
// 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
https://github.com/facebook/react-devtools
React Developer Tools 是允許React組件等級(jí)在谷歌和火狐瀏覽器開發(fā)工具中進(jìn)行檢測(cè)的延伸工具。
這是該列表中最廣為人知的延伸工具,并且它將繼續(xù)成為React研發(fā)人員調(diào)試應(yīng)用程序最有用的工具之一。
9. Bit
https://bit.dev/
使用例如Material-UI 或 Semantic UI React組件庫的良好替代品之一,就是Bit。
Bit讓用戶可以探索數(shù)以千計(jì)的開源組件,并用它們來建立自己的項(xiàng)目。
有太多不同的 React 組件可以讓大家使用,包括制表符、按鍵、圖表、表格、導(dǎo)航條、下拉菜單、加載列表、日期選擇工具、瀏覽痕跡、圖標(biāo)、布局等等。
這些都是像讀者和筆者一樣的React 研發(fā)人員上傳的。
但是,也有一些可獲取的實(shí)用程序,比如將日期之間的距離格式化。
10. Storybook
https://storybook.js.org/
如果你還不知道 Storybook,但又想要以更簡(jiǎn)單的方式建立 UI 組件的話,筆者強(qiáng)烈建議開始使用它。
這一工具啟動(dòng)了動(dòng)態(tài)開發(fā)服務(wù)器,以開箱即用的熱重載為支持,可以實(shí)時(shí)地、單獨(dú)研發(fā) React 組件。
它的另一個(gè)好處就是可以使用現(xiàn)存的開源附加組件,從而將研發(fā)體驗(yàn)帶到一個(gè)全新水平。
例如,在為產(chǎn)品使用研發(fā) React 組件時(shí),有了 Storybook README 程序包,就可以創(chuàng)建自述文件 (README) 了。
作為文檔頁進(jìn)行服務(wù)足夠了:
11. React Sight
https://www.reactsight.com/
有沒有想過,在流程圖中應(yīng)用程序會(huì)怎樣呈現(xiàn)?那么,React Sight會(huì)通過呈現(xiàn)整個(gè)程序的動(dòng)態(tài)組件等級(jí)樹,將React 程序可視化。
它也支持 react-router, Redux, 以及 React Fiber。
有了這個(gè)工具,就可以將鼠標(biāo)懸停在節(jié)點(diǎn)上,這些節(jié)點(diǎn)是與之直接相關(guān)的組件的鏈接。
如果結(jié)果顯示有問題,可能會(huì)想在地址欄中鍵入 chrome:extensions,找到React Sight box,點(diǎn)擊 Allow access to file URLs 開關(guān),如下所示:
12. React Cosmos
https://github.com/react-cosmos/react-cosmos
React Cosmos 是一款為創(chuàng)建可重復(fù)使用的 React 組件而設(shè)計(jì)的開發(fā)工具。
它為組件掃描項(xiàng)目,使研發(fā)人員能夠:
1.在任意小道具、環(huán)境和狀態(tài)的結(jié)合下修復(fù)組件。
2.模擬每一個(gè)外部依賴(例如,應(yīng)用程序界面響應(yīng),localStorage等)
3.查看在與運(yùn)行實(shí)例交互時(shí)應(yīng)用程序狀態(tài)的實(shí)時(shí)演變。
13. CodeSandbox
這無疑是能讓 React 研發(fā)人員放手大干,不到一眨眼功夫就完成工作的優(yōu)秀工具之一。
這個(gè)工具叫做 CodeSandbox,是一款在線編輯器,能夠讓研發(fā)人員從原型到部署創(chuàng)建網(wǎng)絡(luò)應(yīng)用程序——一切都來自網(wǎng)頁!
CodeSandbox 本來只支持早期階段的 React,但現(xiàn)在擴(kuò)展到為像 Vue 和 Angular 這樣的庫提供額外的初學(xué)者模版。
它還支持通過創(chuàng)建相同的靜態(tài)網(wǎng)站生成器,例如 Gatsby 或 Next.js,啟動(dòng)下一個(gè) React 網(wǎng)頁項(xiàng)目。
當(dāng)提到 Codesandbox時(shí),有太多好的方面可以說。就一點(diǎn)來說,它非?;钴S。
如果需要探索一些人們建立起來以便捷操作的項(xiàng)目,很簡(jiǎn)單,點(diǎn)擊“explore”并獲取一堆有助于革新下一個(gè)項(xiàng)目的代碼樣本:
一旦開始編寫項(xiàng)目,就要開始明白會(huì)使用到的就是強(qiáng)大的 VS Code 編輯器。
筆者想要寫下如今研發(fā)人員在 CodeSandbox 能用到的所有性能,但似乎這項(xiàng)任務(wù)已經(jīng)完成。
14. React Bits
https://vasanthk.gitbooks.io/react-bits/
React Bits 是對(duì)React的模式、技術(shù)、竅門和技巧的收集,一切都被編寫到線上類文檔模式中,從中能夠快速獲得不同的設(shè)計(jì)模式和技術(shù)、反模式、式樣、用戶體驗(yàn) (UX) 變化以及其他與 React 相關(guān)的有用材料,這一切都在同一個(gè)標(biāo)簽下。
它們有一個(gè)GitHub repo程序(https://github.com/vasanthk/react-bits),已有9,923星好評(píng)。
有一些實(shí)例,包括比如道具代理這樣的概念,處理不同情況下各種用戶體驗(yàn)的章節(jié),甚至揭露了一些每個(gè)React研發(fā)人員都應(yīng)該意識(shí)到的陷阱。
以下是在其頁面中的呈現(xiàn)。正如左側(cè)菜單欄所示,有非常多的信息:
15. folderize
https://marketplace.visualstudio.com/items?itemName=ee92.folderize
folderize 是VS Code的延伸工具,剛剛發(fā)布不到一周。它使得用戶可以將組件“文件”轉(zhuǎn)到組件“文件夾”架構(gòu)中去。React組件將仍然是個(gè)組件,只是轉(zhuǎn)化到了一個(gè)文件目錄中去。
例如,比方說研發(fā)人員正在創(chuàng)建一個(gè)把文件當(dāng)作小道具,用來和元數(shù)據(jù)一樣顯示有用信息的 React 組件。
元數(shù)據(jù)組件的邏輯占用了大量行,因此研發(fā)人員決定將其分解到一個(gè)獨(dú)立的文件中。然而一旦如此操作,就會(huì)有兩個(gè)相互關(guān)聯(lián)的文件。
因此。如果有了像這樣的文件目錄:
研發(fā)人員可能想要將FileView.js 和 FileMetadata.js 提出來放入文件目錄架構(gòu)中,就像 Apples ——尤其是考慮添加更多和FileScanner.js 類似文件相關(guān)的組件時(shí)。
這就是folderize為研發(fā)人員做的事,那么呈現(xiàn)出來的架構(gòu)就和這個(gè)類似:
16. React Starter Projects
https://www.javascriptstuff.com/react-starter-projects/
此處,有個(gè) React starter projects 不錯(cuò)的列表,其中,你能夠在一個(gè)頁面上看到所有東西。因此,如果你是那種在同一時(shí)間內(nèi)能從一大列選擇中找到有用內(nèi)容的人,那么這款工具很適合你。
一旦研發(fā)人員看到一個(gè)喜歡的、好上手的項(xiàng)目,就可以直接復(fù)制倉庫,根據(jù)自己將要面世的應(yīng)用程序自行進(jìn)行修改。
然而,不是所有的項(xiàng)目通過復(fù)制倉庫就可以使用的,因?yàn)橛幸恍┬枰惭b,會(huì)成為項(xiàng)目的依賴項(xiàng)。
這使更新變得更容易,也能夠保持項(xiàng)目的清潔。
這是其頁面的樣子:
17. Highlight Updates
https://reactjs.org/docs/optimizing-performance.html
這大概是任何一個(gè)研發(fā)人員在其研發(fā)工具箱中用過的最重要的一個(gè)工具了。Highlight Updates 是React DevTools的一個(gè)延伸性能,能夠看見頁面中哪些組件被不必要地刷新了:
它有助于發(fā)現(xiàn)研發(fā)頁面時(shí)的瓶頸,甚至能讓這一過程更簡(jiǎn)便,因?yàn)樗鼈儠?huì)把嚴(yán)重的刷新問題標(biāo)成橙色或紅色。
除非只想建一個(gè)普普通通的應(yīng)用程序,不然為什么不把這么優(yōu)秀的工具收入囊中呢?
18. React Diff Viewer
https://praneshravi.in/react-diff-viewer/
React Diff Viewer是一款由Diff和React制作的簡(jiǎn)單而漂亮的文本差異指令觀察器。它支持分屏視圖、內(nèi)聯(lián)視圖、單詞差異指令、線條加粗等性能。
如果研發(fā)人員試圖將此性能嵌入記事本中(比如 Boostnote)并且自定義它使其更適合自己的應(yīng)用程序(主題色、結(jié)合故事書展示的文檔等),這一工具就很有用。
19. JS.coach
https://js.coach/?collection=React
筆者在尋找React相關(guān)材料時(shí)用的最多的網(wǎng)站就是JS.coach。現(xiàn)在筆者還無法確定這一寶藏網(wǎng)站不被眾人提及的原因,但筆者已在這一網(wǎng)頁上找到了所有需要的東西。
它簡(jiǎn)單快捷,不斷更新,并且從沒在提供項(xiàng)目所需資料方面失敗過。
最棒的是,這個(gè)網(wǎng)站剛剛添加了 React VR 標(biāo)簽!
20. Awesome React
https://github.com/enaqx/awesome-react
GitHub Awesome React開源倉庫是一個(gè)有關(guān)React知識(shí)的超棒列表。
筆者可能都要忘記其他網(wǎng)站了,而且只從這一網(wǎng)站上學(xué)習(xí)React,你定會(huì)找到大量有助于建立強(qiáng)大 React 應(yīng)用程序的有用資源的!
21. Proton Native
https://github.com/kusti8/proton-native
Proton Native 提供了一個(gè)React 環(huán)境,以建立跨平臺(tái)的本地桌面應(yīng)用程序。
它是Electron的替代品,有一些簡(jiǎn)潔的特性,包括了:
和 React Native 一樣的語法。
和現(xiàn)存的 React 程序庫協(xié)同工作,比如 Redux。
跨平臺(tái)。
本地組件。沒有更多Electron。
和所有普通的 Node.js 程序包兼容。
22. Devhints React.js Cheatsheet
https://devhints.io/react
這是一個(gè)為React打造的超棒速查表。
感謝各位的閱讀,以上就是“React研發(fā)人員的超強(qiáng)工具有哪些”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對(duì)React研發(fā)人員的超強(qiáng)工具有哪些這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。