下一步是調(diào)試并查看真正導(dǎo)致性能滯后或下降的原因。為此，你可以在開(kāi)發(fā)工具中使用探查器，還可以突出顯示在特定操作上重新呈現(xiàn)的所有組件。對(duì)我來(lái)說(shuō)，這兩個(gè)效果最好，因?yàn)樗鼈兛梢詭椭依斫庵匦落秩镜膬?nèi)容，并且分析器也會(huì)告訴您原因。探查器還將告訴你哪些組件需要多少時(shí)間來(lái)呈現(xiàn)，以及你的應(yīng)用總共需要多少周期才能達(dá)到就緒狀態(tài)。此外，如果我看到嵌套循環(huán)并查看這些循環(huán)是否花費(fèi)大量時(shí)間才能完成，我也使用javascript中的conport.time()方法。在我的場(chǎng)景中，我得到了一些提醒，即我們使用的 React 上下文導(dǎo)致了主要問(wèn)題。

　　單擊此處閱讀有關(guān) React 分析器的所有信息。

　　步驟 3 — 使用以下技術(shù)提高性能

　　在本節(jié)中，我將列出我所做的幫助我提高應(yīng)用性能的操作。

　　從狀態(tài)中刪除了實(shí)際上不需要重新渲染組件的變量：

　　我們有兩個(gè)上下文，并且大約有10-15個(gè)狀態(tài)變量。這樣做的問(wèn)題是，每次由于setState而重新渲染上下文時(shí)，它都會(huì)繼續(xù)進(jìn)行并導(dǎo)致使用上下文的所有子項(xiàng)重新渲染。我刪除了所有沒(méi)有理由繼續(xù)重新呈現(xiàn)組件的狀態(tài)變量，我還刪除了作為值傳遞給上下文提供程序的所有變量，這些變量可以派生或未在整個(gè)應(yīng)用中的任何地方使用。這是一個(gè)重要的學(xué)習(xí)，我們傾向于把一切都放在上下文中，而你應(yīng)該只添加你真正需要的東西。

　　在正確的地方使用了上下文：

　　我看到在一些組件中，我們調(diào)用了上下文，但沒(méi)有真正使用上下文的任何屬性。相反，我們將其作為道具傳遞給子組件。這會(huì)導(dǎo)致大量重新呈現(xiàn)，因?yàn)樵谏舷挛闹兄匦鲁尸F(xiàn)會(huì)觸發(fā)組件 A 重新呈現(xiàn)，這將導(dǎo)致組件 B、C 和 D 的所有子級(jí)重新呈現(xiàn)。只有組件 D 中才需要上下文，因此我直接將上下文移動(dòng)到子組件。我對(duì)我看到的每個(gè)地方都這樣做了，上下文變量作為 prop 傳遞給子組件。

　　添加了空值和空檢查：

　　我看到我們呈現(xiàn)了一個(gè)子組件，該子組件需要來(lái)自父組件和子組件內(nèi)部的一些數(shù)據(jù)，該組件添加了對(duì)存在數(shù)據(jù)的檢查。這種方法沒(méi)有錯(cuò)，但是如果子組件作為少數(shù)組件使用Effects或正在調(diào)用其他API，則將數(shù)據(jù)作為空/空檢查移動(dòng)到父組件是有意義的。您根本不需要將子組件呈現(xiàn)給 DOM，因?yàn)樗鼪](méi)有值。這將節(jié)省應(yīng)用在呈現(xiàn)子項(xiàng)并調(diào)用其中的所有掛鉤和 API 時(shí)可能遇到的所有性能影響。

　　重構(gòu)代碼：

　　我執(zhí)行的一個(gè)一般步驟是嘗試?yán)斫饩帉?xiě)的代碼，特別是在數(shù)據(jù)作或添加到數(shù)組中，或者我們使用嵌套循環(huán)等。將數(shù)組轉(zhuǎn)換為有意義的映射，進(jìn)一步從use中刪除變量效果依賴(lài)項(xiàng)數(shù)組，因?yàn)樗鼈儧](méi)有添加任何值，最后還刪除了對(duì)沒(méi)有多大意義的數(shù)據(jù)的檢查。對(duì)于不同的應(yīng)用程序，此步驟可能會(huì)有所不同，并且必須非常小心地完成，因?yàn)槟幌Ｍ茐囊呀?jīng)工作的內(nèi)容。因此，理想情況下，嘗試盡可能深入地首先理解邏輯，然后如果您有信心，請(qǐng)繼續(xù)重構(gòu)它。

　　結(jié)論

　　使用上述方法，我能夠?yàn)槲业膽?yīng)用減少大約 25-30 次重新渲染。將初始頁(yè)面加載時(shí)間縮短了幾秒鐘，并將響應(yīng)時(shí)間縮短了一兩秒(在性能受到重大影響的情況下)。這是一段旅程，我仍在努力讓它變得更好:D

　　最后，還有很多其他方法可以優(yōu)化 React 應(yīng)用程序。并非所有應(yīng)用都適用于每個(gè)應(yīng)用，也不是你所做的每件事都會(huì)顯著提高性能。有時(shí)問(wèn)題很清楚，解決它們會(huì)使應(yīng)用程序具有高性能，在其他情況下，問(wèn)題很復(fù)雜，很難增加任何性能改進(jìn)。但總而言之，優(yōu)化你的代碼是一個(gè)有趣的旅程，你可以學(xué)到很多東西，大多數(shù)時(shí)候，學(xué)習(xí)一個(gè)交易技巧，你覺(jué)得為什么我之前不知道這一點(diǎn)?

　　經(jīng)常花時(shí)間重構(gòu)代碼，經(jīng)常花時(shí)間評(píng)估性能，因?yàn)槿绻悴贿@樣做，它可能會(huì)突然變得太晚。