摘要：但是，如果必須更改實(shí)現(xiàn)方法以指向不同的數(shù)據(jù)庫(kù)，則單元測(cè)試將失敗，因?yàn)樗鼈兪邱詈线壿嫷膶?shí)現(xiàn)細(xì)節(jié)。

React是一個(gè)用于構(gòu)建用戶界面的JavaScript庫(kù)。但是，很多人都不知道，其實(shí)有非常多的有助于我們更好地使用React，提升用戶開發(fā)體驗(yàn)的優(yōu)秀工具。

如果您還沒(méi)有使用過(guò)React，或者有可能對(duì)使用它感興趣，當(dāng)他們問(wèn)你為什么要使用這個(gè)庫(kù)時(shí)，你會(huì)怎么說(shuō)？

除了告訴他們React的庫(kù)有多棒（這應(yīng)該是第一件事）之外，我還想提到開源社區(qū)創(chuàng)建的工具這部分，它將極大地提升你的體驗(yàn)感，甚至讓你覺(jué)得興奮。

以下是您可以在2019年用于構(gòu)建React應(yīng)用程序的10個(gè)工具（此列表不按其重要性排序；原文本有22個(gè)，我們將在下期接著推送。）

有沒(méi)有想過(guò)你的應(yīng)用程序的哪些部分占用了大部分空間？那么，你可以找到Webpack Bundle Analyzer。該軟件包將幫助您識(shí)別占用空間最多的輸出文件。

它將創(chuàng)建一個(gè)實(shí)時(shí)服務(wù)器，并為您提供捆綁包內(nèi)容的交互式樹形圖可視化。通過(guò)這個(gè)工具包，您可以看到所呈現(xiàn)文件的位置，gzip大小，解析大小以及子/父文件。

你可以根據(jù)你看到的內(nèi)容優(yōu)化你的React應(yīng)用程序！

這是一個(gè)截圖：

您可以清楚地看到pdf包占用應(yīng)用程序中的最大空間，同時(shí)，它也占據(jù)了屏幕上最顯著的位置。這個(gè)非常有用。

屏幕截圖只是它功能中非常非常小的一部分，您還可以更進(jìn)一步地進(jìn)行查看，例如generateStatsFile: true，并選擇生成靜態(tài)HTML文件，然后將其保存在開發(fā)環(huán)境之外的某個(gè)位置以供以后使用。

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

以下是此軟件的一個(gè)示例：

該應(yīng)用程序允許您聲明道具及其類型，在樹形圖中查看組件，導(dǎo)入背景圖像，將它們定義為有狀態(tài)或無(wú)狀態(tài)，定義其父文件將是什么，放大/縮小，以及將原型導(dǎo)出到新的或現(xiàn)有項(xiàng)目中。

該應(yīng)用程序似乎更適合Mac用戶，但Windows用戶其實(shí)也是可以的。

完成映射用戶界面后，可以選擇導(dǎo)出到現(xiàn)有項(xiàng)目或新項(xiàng)目。如果您選擇導(dǎo)出到現(xiàn)有項(xiàng)目并選擇根目錄，它將導(dǎo)出它們./src/components，如下所示：

以下是我們?cè)谑纠惺褂玫慕M件之一的示例：

React-Proto在GitHub上收到了超過(guò)2,000顆Star。

就個(gè)人而言，React-Proto其實(shí)有一些沒(méi)有那么方便的地方，比如，如果您導(dǎo)入背景圖像，縮小，然后繼續(xù)刪除背景圖像，您將無(wú)法放大。

放大的唯一方法是重新導(dǎo)入背景圖像，然后在放大后將其刪除。但即便有著這樣小小的不便，我仍然覺(jué)得它是個(gè)值得推薦的工具，因?yàn)橥惞ぞ邘缀鹾茈y再找到可以與它相提并論的了。

而且，開源是這個(gè)應(yīng)用程序最大的好處之一，因?yàn)檫@些目前的小缺陷有可能在未來(lái)制作趨勢(shì)開源的存儲(chǔ)庫(kù)列表中的得以改善。

Why Did You Render猴子補(bǔ)丁可通知您有關(guān)可避免的重新渲染。

這非常有用，不僅可以指導(dǎo)您完成項(xiàng)目的性能修復(fù)，還可以幫助您了解React的工作原理。而且，當(dāng)您更好地了解React如何工作時(shí)，它會(huì)讓您成為更好的React開發(fā)人員。

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

 1 import React from "react"
 2 import Button from "@material-ui/core/Button"
 3
 4 const Child = (props) => 

 5
 6 const Child2 = ({ children, ...props }) => (
 7  

 8    {children} 
 9  
10 )
11
12 Child2.whyDidYouRender = true
13
14 const App = () => {
15  const [state, setState] = React.useState({})
16
17  return (
18    

19      {JSON.stringify(state, null, 2)}
20      

21         setState({ hello: "hi" })}>
22          Submit
23        
24      
25      Child #2
26    
27  )
28 }
29
30 export default App

只有在這樣做之后，您的控制臺(tái)才會(huì)被發(fā)出以下有些“煩人”警告：

別誤會(huì)我的意思。把這些警告當(dāng)作一件好事。有效利用這些消息，這樣你就可以修復(fù)那些因不必要重新渲染而浪費(fèi)的資源!

很多人都知道，Create React App是開始開發(fā)React項(xiàng)目最快捷的方式（開箱即用的現(xiàn)代功能）。

什么可能比這更容易npx create-react-app ？

所有關(guān)于Medium build React接口的教程幾乎都create-react-app只是因?yàn)樗焖俣?jiǎn)單。

我們有些人可能不知道的是如何使用CRA 創(chuàng)建TypeScript項(xiàng)目。你所要做的就是在最后添加上：

npx create-react-app — typescript

這樣可以省去手動(dòng)將TypeScript添加到CRA項(xiàng)目的麻煩了。

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

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

 1 import React from "react"
 2 import {
 3  Log,
 4  VisualizerProvider,
 5  traceLifecycle,
 6 } from "react-lifecycle-visualizer"
 7
 8 class TracedComponent extends React.Component {
 9  state = {
10    loaded: false,
11  }
12
13  componentDidMount() {
14    this.props.onMount()
15  }
16
17  render() {
18    return 
Traced Component
19  }
20 }
21
22 const EnhancedTracedComponent = traceLifecycle(TracedComponent)
23
24 const App = () => (
25  
26    
27    
28  
29 )

可視化工具的顯示形式如下所示：

但是，這個(gè)工具有一個(gè)缺點(diǎn)是它目前僅適用于類組件，因此尚不支持Hook。

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

他們似乎優(yōu)先考慮才開始時(shí)候用React的人。但是，它對(duì)高級(jí)開發(fā)人員也可能有用。

它為React開發(fā)人員定期面對(duì)的許多典型任務(wù)提供友好的圖形用戶界面，例如創(chuàng)建新項(xiàng)目，執(zhí)行任務(wù)和管理依賴項(xiàng)。

Windows支持是在2018年8月添加的，因此您可以放心，它是跨平臺(tái)的。

這是Guppy的樣子：

我一直很喜歡react-testing-library，因?yàn)樵谀憔帉憜卧獪y(cè)試時(shí)它會(huì)讓你感覺(jué)到“一切都剛剛好”。該軟件包提供了React DOM測(cè)試實(shí)用程序，可鼓勵(lì)良好的測(cè)試實(shí)踐。

此解決方案旨在解決測(cè)試實(shí)現(xiàn)細(xì)節(jié)的問(wèn)題，而不是測(cè)試React組件的輸入/輸出，就像用戶看到的一樣。

測(cè)試實(shí)現(xiàn)細(xì)節(jié)并不是說(shuō)可以確保您的應(yīng)用程序按預(yù)期工作的有效方法。

當(dāng)然，您將能夠?qū)θ绾潍@取組件所需的數(shù)據(jù)、使用哪種排序方法等更有信心。但是，如果必須更改實(shí)現(xiàn)方法以指向不同的數(shù)據(jù)庫(kù)，則單元測(cè)試將失敗，因?yàn)樗鼈兪邱詈线壿嫷膶?shí)現(xiàn)細(xì)節(jié)。

這是react-test -library待解決的一個(gè)問(wèn)題，因?yàn)槔硐肭闆r下，您只希望您的用戶界面能夠正常工作，并最終正確地呈現(xiàn)出來(lái)。
以下是使用此庫(kù)進(jìn)行測(cè)試的示例代碼：

1 // Hoist helper functions (but not vars) to reuse between test cases
2 const renderComponent = ({ count }) =>
3 render(
4
5
6 ,
7 )
8
9 it("renders initial count", async () => {
10 // Render new instance in every test to prevent leaking state
11 const { getByText } = renderComponent({ count: 5 })
12
13 await waitForElement(() => getByText(/clicked 5 times/i))
14 })
15
16 it("increments count", async () => {
17 // Render new instance in every test to prevent leaking state
18 const { getByText } = renderComponent({ count: 5 })
19
20 fireEvent.click(getByText("+1"))
21 await waitForElement(() => getByText(/clicked 6 times/i))
22 })

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

這是此列表中最常見的擴(kuò)展，并且仍然是React開發(fā)人員可用于調(diào)試其應(yīng)用程序的最有用工具之一。

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

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

它有許多不同的React組件可供任何人使用，包括選項(xiàng)卡，按鈕，圖表，表格，導(dǎo)航欄，下拉列表，加載微調(diào)器，日期選擇器，面包屑，圖標(biāo)，布局等。

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

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

如果您想要更輕松地構(gòu)建UI組件，但你還不了解Storybook，我強(qiáng)烈建議您使用看看。

該工具啟動(dòng)了一個(gè)實(shí)時(shí)開發(fā)服務(wù)器，支持開箱即用的熱重新加載，您可以在其中多帶帶實(shí)時(shí)開發(fā)React組件。

另一個(gè)很棒的事情是，您可以使用現(xiàn)有的開源附加組件將您的開發(fā)體驗(yàn)提升到一個(gè)全新的水平。

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

這是普通文件的頁(yè)面樣式：

以上是這篇文章的部分內(nèi)容，我希望你在這里找到了有價(jià)值的信息，如果你喜歡的話，我們后續(xù)還會(huì)繼續(xù)為您整理相關(guān)內(nèi)容。

原文鏈接：https://medium.com/better-pro...

以上信息來(lái)源于網(wǎng)絡(luò)，由“京東云開發(fā)者社區(qū)”公眾號(hào)編輯整理，
不代表京東云立場(chǎng)。

點(diǎn)擊"更多"查看更加豐富的云計(jì)算業(yè)內(nèi)知識(shí)及信息！