這篇文章主要講解了“React研發(fā)人員的超強工具有哪些”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“React研發(fā)人員的超強工具有哪些”吧！

創(chuàng)新互聯(lián)公司成都網(wǎng)站建設(shè)按需定制，是成都網(wǎng)站維護(hù)公司,為門窗定制提供網(wǎng)站建設(shè)服務(wù),有成熟的網(wǎng)站定制合作流程，提供網(wǎng)站定制設(shè)計服務(wù)：原型圖制作、網(wǎng)站創(chuàng)意設(shè)計、前端HTML5制作、后臺程序開發(fā)等。成都網(wǎng)站設(shè)計熱線：18982081108

1. Webpack Bundle Analyzer

https://github.com/webpack-contrib/webpack-bundle-analyzer

有沒有想過是什么程序包或應(yīng)用程序的零件占用了所有空間?Webpack Bundle Analyzer  可以幫你找到答案。這款程序包可幫助用戶識別那些占用了大部分空間的輸出文件。

它會創(chuàng)建一個實況服務(wù)器，以交互式樹圖這一可視化方式顯示軟件集的內(nèi)容。軟件包中有了它，就可以看見顯示文件的位置、其壓縮文件的大小、解析文件大小以及其源文件/衍生文件。

好處是什么?基于所見優(yōu)化 React 程序!

這是該應(yīng)用程序的截圖：

顯而易見， pdf 程序包在應(yī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ìn)行下載和安裝。

這是該軟件使用實例：

這款應(yīng)用程序允許用戶申報小道具及其類型，在樹形圖中查看組件，輸入背景圖像，定義其有無狀態(tài)，明確其父組件是什么，進(jìn)行縮放，將原型輸出到一個新的或已存在的項目中。

這款程序看上去更像是為 Mac 用戶量身定制，然而，對 Windows 用戶來說，它還是很好用。

已經(jīng)完成用戶接口繪制時，就可以選擇輸出到一個現(xiàn)存的項目還是一個新項目中。如果選擇輸出到現(xiàn)存的項目并選擇了根目錄，就會像這樣輸出到  ./src/components：

此處為實例中存在的組件之一的樣例：

React-Proto 在 GitHub 獲得了2,000多星的好評。

然而，就筆者個人而言，這款應(yīng)用程序仍需更新改進(jìn)，尤其是 React Hooks 的發(fā)行。

而且它無法縮小，除非存在可見的背景圖像。換言之，如果輸入一個背景圖像，縮小，然后刪除背景圖像，那將無法再次放大圖像，因為按鈕會變成灰色。

重新放大的唯一途徑就是重新輸入背景圖像，并在重新放大后再將其移除。這一瑕疵改變了筆者對這款應(yīng)用的看法，但它仍位列前22款工具之中，因為如此開源的確獨此一家。

開源是該應(yīng)用程序的優(yōu)勢，因為它為在未來形成趨向開源的代碼庫列表中提供了各類可能性。(其優(yōu)勢很重要，但似乎缺少人力資源支持。)

3. Why Did You Render

https://github.com/welldone-software/why-did-you-render

這款Why Did You Render 修補程序通過告知研發(fā)人員一些可避免的刷新來修復(fù) React。

這太有用了，不僅指導(dǎo)了項目的修復(fù)工作，還幫助研發(fā)人員了解 React 的運作過程。對 React的運作有了更好的理解后，React  研發(fā)人員將大獲成功。

通過顯示值為 true的額外靜態(tài)性能 whyDidYouRender 給任意一個自定義組件附加一個收聽器：

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

只有做完了這些，控制臺才能在受到非常煩人的警告時獲得通知：

別將這些信息視作錯誤。把它看作是好事。利用這些煩人的信息，就能夠修復(fù)那些浪費的補丁，最后這些煩人的消息都將離你而去!

4. Create React App

https://github.com/facebook/create-react-app

眾人皆知，Create React App 是動手研發(fā)一個 React 項目最快的方式(在工具箱之外包含了現(xiàn)代化性能)。

還有比 npx create-react-app更簡單的嗎?

Medium上所有的教程都用create-react-app建立 React 接口，就是因為快捷。

一些人可能不知道如何使用CRA創(chuàng)建一個TypeScript 項目。只需要在結(jié)尾加上 –typescript就可以了：

npx create-react-app— typescript

它將省去給CRA項目手動添加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> )

這會使觀察器如下顯示：

然而，其中一個缺點是，目前它只對類組件有用，因此暫不支持 Hooks。(問題是，它們可以被視作生命周期嗎?)

6. Guppy

https://github.com/joshwcomeau/guppy

Guppy 是一款友好而免費的應(yīng)用管理程序和任務(wù)管理工具，它為桌面運行的 React 而設(shè)計。

這款應(yīng)用似乎優(yōu)先考慮了在 React 中研發(fā)程序的新手。當(dāng)然，它對高級研發(fā)人員來說，或許也是有用的。

它提供了一個友好的圖像化用戶接口，專門針對 React 研發(fā)人員常面臨的許多典型任務(wù)，比如新項目的創(chuàng)建，任務(wù)的執(zhí)行和依賴性管理。

2018年8月，添加了windows系統(tǒng)的支持，所以可以肯定的是，它是跨平臺的。

這是Guppy的界面樣貌：

7. react-testing-library

https://github.com/testing-library/react-testing-library

筆者一直很喜歡react-testing-library，因為在編寫單元測試的時候，它總讓人覺得對味。該程序包提供 React DOM  測試實用程序，促進(jìn)良好的測試實踐。

這一解決方案的目標(biāo)是解決測試實施細(xì)節(jié)的問題，可它卻測試了 React 組件的輸入/輸出，就像用戶能看見一樣。

測試實施細(xì)節(jié)不是確保應(yīng)用程序如期運行的有效途徑。

當(dāng)然了，更讓人有信心的是如何獲取組件需要的數(shù)據(jù)，使用何種排序方式等。然而，如果需要改變實施方法以針對不同的數(shù)據(jù)庫，單元測試將會失敗，因為它們是耦合邏輯的實施細(xì)節(jié)。

這就是 react-testing-library 解決的問題，因為在理想情況下，研發(fā)人員想要的就是讓用戶接口運行并正確顯示直到結(jié)束。

只要輸出仍在預(yù)期之中，如何給這些組件獲取數(shù)據(jù)真的不重要。

這有一段有關(guān)如何使用庫放置測試的樣本代碼：

// 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組件等級在谷歌和火狐瀏覽器開發(fā)工具中進(jìn)行檢測的延伸工具。

這是該列表中最廣為人知的延伸工具，并且它將繼續(xù)成為React研發(fā)人員調(diào)試應(yīng)用程序最有用的工具之一。

9. Bit

https://bit.dev/

使用例如Material-UI 或 Semantic UI React組件庫的良好替代品之一，就是Bit。

Bit讓用戶可以探索數(shù)以千計的開源組件，并用它們來建立自己的項目。

有太多不同的 React 組件可以讓大家使用，包括制表符、按鍵、圖表、表格、導(dǎo)航條、下拉菜單、加載列表、日期選擇工具、瀏覽痕跡、圖標(biāo)、布局等等。

這些都是像讀者和筆者一樣的React 研發(fā)人員上傳的。

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

10. Storybook

https://storybook.js.org/

如果你還不知道 Storybook，但又想要以更簡單的方式建立 UI 組件的話，筆者強烈建議開始使用它。

這一工具啟動了動態(tài)開發(fā)服務(wù)器，以開箱即用的熱重載為支持，可以實時地、單獨研發(fā) React 組件。

它的另一個好處就是可以使用現(xiàn)存的開源附加組件，從而將研發(fā)體驗帶到一個全新水平。

例如，在為產(chǎn)品使用研發(fā) React 組件時，有了 Storybook README 程序包，就可以創(chuàng)建自述文件 (README) 了。

作為文檔頁進(jìn)行服務(wù)足夠了：

11. React Sight

https://www.reactsight.com/

有沒有想過，在流程圖中應(yīng)用程序會怎樣呈現(xiàn)?那么，React Sight會通過呈現(xiàn)整個程序的動態(tài)組件等級樹，將React 程序可視化。

它也支持 react-router, Redux, 以及 React Fiber。

有了這個工具，就可以將鼠標(biāo)懸停在節(jié)點上，這些節(jié)點是與之直接相關(guān)的組件的鏈接。

如果結(jié)果顯示有問題，可能會想在地址欄中鍵入 chrome:extensions，找到React Sight box，點擊 Allow access to  file URLs 開關(guān)，如下所示：

12. React Cosmos

https://github.com/react-cosmos/react-cosmos

React Cosmos 是一款為創(chuàng)建可重復(fù)使用的 React 組件而設(shè)計的開發(fā)工具。

它為組件掃描項目，使研發(fā)人員能夠：

1.在任意小道具、環(huán)境和狀態(tài)的結(jié)合下修復(fù)組件。

2.模擬每一個外部依賴(例如，應(yīng)用程序界面響應(yīng)，localStorage等)

3.查看在與運行實例交互時應(yīng)用程序狀態(tài)的實時演變。

13. CodeSandbox

這無疑是能讓 React 研發(fā)人員放手大干，不到一眨眼功夫就完成工作的優(yōu)秀工具之一。

這個工具叫做 CodeSandbox，是一款在線編輯器，能夠讓研發(fā)人員從原型到部署創(chuàng)建網(wǎng)絡(luò)應(yīng)用程序——一切都來自網(wǎng)頁!

CodeSandbox 本來只支持早期階段的 React，但現(xiàn)在擴展到為像 Vue 和 Angular 這樣的庫提供額外的初學(xué)者模版。

它還支持通過創(chuàng)建相同的靜態(tài)網(wǎng)站生成器，例如 Gatsby 或 Next.js，啟動下一個 React 網(wǎng)頁項目。

當(dāng)提到 Codesandbox時，有太多好的方面可以說。就一點來說，它非?；钴S。

如果需要探索一些人們建立起來以便捷操作的項目，很簡單，點擊“explore”并獲取一堆有助于革新下一個項目的代碼樣本：

一旦開始編寫項目，就要開始明白會使用到的就是強大的 VS Code 編輯器。

筆者想要寫下如今研發(fā)人員在 CodeSandbox 能用到的所有性能，但似乎這項任務(wù)已經(jīng)完成。

14. React Bits

https://vasanthk.gitbooks.io/react-bits/

React Bits  是對React的模式、技術(shù)、竅門和技巧的收集，一切都被編寫到線上類文檔模式中，從中能夠快速獲得不同的設(shè)計模式和技術(shù)、反模式、式樣、用戶體驗 (UX)  變化以及其他與 React 相關(guān)的有用材料，這一切都在同一個標(biāo)簽下。

它們有一個GitHub repo程序(https://github.com/vasanthk/react-bits)，已有9,923星好評。

有一些實例，包括比如道具代理這樣的概念，處理不同情況下各種用戶體驗的章節(jié)，甚至揭露了一些每個React研發(fā)人員都應(yīng)該意識到的陷阱。

以下是在其頁面中的呈現(xiàn)。正如左側(cè)菜單欄所示，有非常多的信息：

15. folderize

https://marketplace.visualstudio.com/items?itemName=ee92.folderize

folderize 是VS  Code的延伸工具，剛剛發(fā)布不到一周。它使得用戶可以將組件“文件”轉(zhuǎn)到組件“文件夾”架構(gòu)中去。React組件將仍然是個組件，只是轉(zhuǎn)化到了一個文件目錄中去。

例如，比方說研發(fā)人員正在創(chuàng)建一個把文件當(dāng)作小道具，用來和元數(shù)據(jù)一樣顯示有用信息的 React 組件。

元數(shù)據(jù)組件的邏輯占用了大量行，因此研發(fā)人員決定將其分解到一個獨立的文件中。然而一旦如此操作，就會有兩個相互關(guān)聯(lián)的文件。

因此。如果有了像這樣的文件目錄：

研發(fā)人員可能想要將FileView.js 和 FileMetadata.js 提出來放入文件目錄架構(gòu)中，就像 Apples  ——尤其是考慮添加更多和FileScanner.js 類似文件相關(guān)的組件時。

這就是folderize為研發(fā)人員做的事，那么呈現(xiàn)出來的架構(gòu)就和這個類似：

16. React Starter Projects

https://www.javascriptstuff.com/react-starter-projects/

此處，有個 React starter projects  不錯的列表，其中，你能夠在一個頁面上看到所有東西。因此，如果你是那種在同一時間內(nèi)能從一大列選擇中找到有用內(nèi)容的人，那么這款工具很適合你。

一旦研發(fā)人員看到一個喜歡的、好上手的項目，就可以直接復(fù)制倉庫，根據(jù)自己將要面世的應(yīng)用程序自行進(jìn)行修改。

然而，不是所有的項目通過復(fù)制倉庫就可以使用的，因為有一些需要安裝，會成為項目的依賴項。

這使更新變得更容易，也能夠保持項目的清潔。

這是其頁面的樣子：

17. Highlight Updates

https://reactjs.org/docs/optimizing-performance.html

這大概是任何一個研發(fā)人員在其研發(fā)工具箱中用過的最重要的一個工具了。Highlight Updates 是React  DevTools的一個延伸性能，能夠看見頁面中哪些組件被不必要地刷新了：

它有助于發(fā)現(xiàn)研發(fā)頁面時的瓶頸，甚至能讓這一過程更簡便，因為它們會把嚴(yán)重的刷新問題標(biāo)成橙色或紅色。

除非只想建一個普普通通的應(yīng)用程序，不然為什么不把這么優(yōu)秀的工具收入囊中呢?

18. React Diff Viewer

https://praneshravi.in/react-diff-viewer/

React Diff  Viewer是一款由Diff和React制作的簡單而漂亮的文本差異指令觀察器。它支持分屏視圖、內(nèi)聯(lián)視圖、單詞差異指令、線條加粗等性能。

如果研發(fā)人員試圖將此性能嵌入記事本中(比如  Boostnote)并且自定義它使其更適合自己的應(yīng)用程序(主題色、結(jié)合故事書展示的文檔等)，這一工具就很有用。

19. JS.coach

https://js.coach/?collection=React

筆者在尋找React相關(guān)材料時用的最多的網(wǎng)站就是JS.coach?，F(xiàn)在筆者還無法確定這一寶藏網(wǎng)站不被眾人提及的原因，但筆者已在這一網(wǎng)頁上找到了所有需要的東西。

它簡單快捷，不斷更新，并且從沒在提供項目所需資料方面失敗過。

最棒的是，這個網(wǎng)站剛剛添加了 React VR 標(biāo)簽!

20. Awesome React

https://github.com/enaqx/awesome-react

GitHub Awesome React開源倉庫是一個有關(guān)React知識的超棒列表。

筆者可能都要忘記其他網(wǎng)站了，而且只從這一網(wǎng)站上學(xué)習(xí)React，你定會找到大量有助于建立強大 React 應(yīng)用程序的有用資源的!

21. Proton Native

https://github.com/kusti8/proton-native

Proton Native 提供了一個React 環(huán)境，以建立跨平臺的本地桌面應(yīng)用程序。

它是Electron的替代品，有一些簡潔的特性，包括了：

• 和 React Native 一樣的語法。

• 和現(xiàn)存的 React 程序庫協(xié)同工作，比如 Redux。

• 跨平臺。

• 本地組件。沒有更多Electron。

• 和所有普通的 Node.js 程序包兼容。

22. Devhints React.js Cheatsheet

https://devhints.io/react

這是一個為React打造的超棒速查表。

感謝各位的閱讀，以上就是“React研發(fā)人員的超強工具有哪些”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對React研發(fā)人員的超強工具有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

網(wǎng)站題目：React研發(fā)人員的超強工具有哪些
轉(zhuǎn)載源于：http://aaarwkj.com/article6/ihhsig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、用戶體驗、App設(shè)計、關(guān)鍵詞優(yōu)化、ChatGPT、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)