還有很多其他方法可以優(yōu)化 React 應(yīng)用程序。并非所有應(yīng)用都適用于每個應(yīng)用，也不是你所做的每件事都會顯著提高性能。我最近被分配了一個任務(wù)，上面寫著“提高應(yīng)用程序的性能”。這是我在記錄這段旅程。

　　步驟 1 — 查找性能開始下降的方案

　　我很幸運，當我被告知性能下降如此之大以至于用戶體驗絕對無法忍受時，我被告知了這種情況。要找出所有此類方案，需要嚴格地繼續(xù)在應(yīng)用程序上執(zhí)行各種操作，并在性能開始下降時繼續(xù)監(jiān)視。沒有直接的方法可以做到這一點，唯一的方法是讓越來越多的人使用該應(yīng)用程序并報告他們的經(jīng)歷。另一種方法也可能是生成大量虛擬數(shù)據(jù)，并嘗試將所有這些數(shù)據(jù)加載到UI上，看看它的表現(xiàn)如何。此外，不要指望一次找到所有方案，你會不時發(fā)現(xiàn)它們，然后你可以執(zhí)行以下步驟來提高每個方案的性能。

　　步驟2 - 調(diào)試并嘗試找到真正的罪魁禍首

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

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

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

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

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

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

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

　　我看到在一些組件中，我們調(diào)用了上下文，但沒有真正使用上下文的任何屬性。相反，我們將其作為道具傳遞給子組件。這會導致大量重新呈現(xiàn)，因為在上下文中重新呈現(xiàn)會觸發(fā)組件 A 重新呈現(xiàn)，這將導致組件 B、C 和 D 的所有子級重新呈現(xiàn)。只有組件 D 中才需要上下文，因此我直接將上下文移動到子組件。我對我看到的每個地方都這樣做了，上下文變量作為 prop 傳遞給子組件。

　　添加了空值和空檢查：

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

　　重構(gòu)代碼：

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

　　結(jié)論

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

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

　　經(jīng)常花時間重構(gòu)代碼，經(jīng)常花時間評估性能，因為如果你不這樣做，它可能會突然變得太晚。