」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > React:好程式碼和壞程式碼

React:好程式碼和壞程式碼

發佈於2024-08-17
瀏覽:607

React: Good and Bad Code

:從mapStateToProps傳回新陣列或新物件。如果要返回一個對象,請確保它以後不會被更改。當該物件發生哪怕最輕微的變化時,這可能會導致整個元件和子樹被重新渲染。 

Do:mapstateToProps 應該只會傳回直接來自狀態的基元和數組(不要從 mapStateToProps 建立新數組,如果需要,建立一個選擇器來快取參數計算結果數組)。稍後將迭代的陣列應包含要呈現的項目的字串 id。列表項目負責使用從 props 傳遞的 id 來尋找全域狀態資訊。

Do:建立您自己的自訂鉤子時,請確保要傳回的陣列也被記住。不成熟的優化不被認可,但為什麼不以最優化的方式建立一些東西,它不需要花費大量的精力,並且可以促進其他處理程式碼的工程師的學習。提升團隊技能!

Do:建構大型物件時,按字母順序對鍵進行排序。物件的大小可能會增加,並且搜尋屬性可能非常耗時。尤其是商店,請確保減速器按字母順序排序。

不要:建立特定於您正在建造的頁面/螢幕的減速器。想想它如何擴展到其他頁面/螢幕。諮詢團隊以了解您正在建立的頁面/螢幕未來可能的用途。

Do:確保使用客製化的 API 封裝與外部 api 的通訊。將來如果需要更換服務,可以透過這個客製化的 API 來完成。以 Bugsnag 為例。將那個男嬰包裝在客製化的 API 上,以防萬一您想使用 Sentry。

Do:同樣的註解。請標準化後端和前端處理錯誤的方式。應用程式中的每個操作都應該包裝在 try/catch 區塊上,並且 catch 區塊將報告傳送到錯誤報告工具。您的應用程式也應該用錯誤邊界包裝整個應用程式。我相信有一種適當的方法可以建立正確的模式。能夠捕獲所有錯誤並報告有意義的資訊的模式。

Do:使用 Sonar 等強製程式碼品質的工具,這將在程式碼審查期間節省大量時間,因為有人決定使用 if ... else 而不是 if ... return 。小細節會降低開發人員的創造力,而只是遵循聲納程式碼品質標準的要求。從第一天起,即使是遵循這些細節的程式碼庫也很容易編碼。

結論

這就是我目前的所有看法。有了一個強制模式的程式碼庫,人們可以從程式碼庫的其他地方取得一段程式碼,貼上它,稍微改變一下措辭等等,你就擁有了一個以各種可能的方式滿足生產標準的功能。雖然有一些觀點,但至少在撰寫本文時確實存在著最有效率的做事方式。可能會出現其他方法,但在編寫程式碼時最高效的編寫程式碼的方法是編寫程式碼的唯一方法。說起來容易做起來難,直到你遇到最後期限的怪物。

版本聲明 本文轉載於:https://dev.to/carlosrambles/react-good-and-bad-code-43g?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • ## 您可以在不使用 JavaScript 的情況下使用 CSS 建立餅圖分段嗎?
    ## 您可以在不使用 JavaScript 的情況下使用 CSS 建立餅圖分段嗎?
    使用 CSS 在圓中分段使用 border-radius 在 CSS 中建立圓是一種常見的做法。但是,我們可以透過分段(類似餅圖)來實現類似的效果嗎?本文深入研究了僅透過 HTML 和 CSS 實現此目的的方法,不包括使用 JavaScript。 產生相等大小的段相等大小段的一種方法涉及產生以下內容...
    程式設計 發佈於2024-11-06
  • 從頭開始建立一個小型向量存儲
    從頭開始建立一個小型向量存儲
    With the evolving landscape of generative AI, vector databases are playing crucial role in powering generative AI applications. There are so many vect...
    程式設計 發佈於2024-11-06
  • 如何在Chrome使用AI實驗API
    如何在Chrome使用AI實驗API
    要在 Chrome 中使用實驗性 AI API,請依照下列步驟操作: 硬體需求 4GB 記憶體 GPU可用 至少 22GB 空間 Windows 10.11 或 macOS Ventura 或更新版本(無 Linux 規格) 尚不支持: Chrome作業系統 Chrome iOS C...
    程式設計 發佈於2024-11-06
  • 評論:Adam Johnson 的《Boost Your Django DX》
    評論:Adam Johnson 的《Boost Your Django DX》
    書評很微妙。您不想破壞它,但您也想讓潛在讀者體驗所期待的內容。這是提供背景和保持興趣之間的巧妙平衡。我試圖在這篇評論中達到這種平衡,為您提供足夠的內容來吸引您,而不透露太多。 一個小背景故事:我第一次從 Djangonaut Space 的好朋友 Tim 那裡聽說這本書,並將其添加到我的閱讀清單中...
    程式設計 發佈於2024-11-06
  • 如何將陣列元素分組並組合多維數組中另一列的值?
    如何將陣列元素分組並組合多維數組中另一列的值?
    按列將數組元素分組並組合另一列中的值給定一個包含兩列嵌套數組的數組,任務是將基於特定列的子數組,並將每個組中另一列的值連接起來,產生以逗號分隔的清單。 考慮以下範例陣列:$array = [ ["444", "0081"], ["44...
    程式設計 發佈於2024-11-06
  • 三個新加入的例外功能
    三個新加入的例外功能
    從 JDK 7 開始,異常處理已擴展為三個新功能:自動資源管理、多重捕獲和更準確的重新拋出。 多重catch可讓您使用同一個catch子句擷取多個異常,避免程式碼重複。 要使用多重捕獲,請指定由 | 分隔的異常清單。在 catch 子句中。每個參數都是隱式最終參數。 用法範例:catch(f...
    程式設計 發佈於2024-11-06
  • 如何修復執行 ES6 程式碼時出現「意外的令牌匯出」錯誤?
    如何修復執行 ES6 程式碼時出現「意外的令牌匯出」錯誤?
    「排除意外的令牌匯出錯誤」嘗試在專案中執行ES6 程式碼時,可能會出現「意外的令牌導出”錯誤。此錯誤表示所使用的環境不支援 ES6 模組中使用的匯出關鍵字語法。 錯誤詳細資料以下程式碼片段舉例說明了錯誤的來源: export class MyClass { constructor() { ...
    程式設計 發佈於2024-11-06
  • 即使卸載後,VSCode 擴充功能也不會從檔案系統中刪除,我建立了一個解決方案!
    即使卸載後,VSCode 擴充功能也不會從檔案系統中刪除,我建立了一個解決方案!
    所以這是基於 vscode 的編輯器的問題。即使您卸載了擴充功能,它也會保留在檔案系統中,並隨著時間的推移堵塞您的系統。我創建了一個簡單的解決方案。執行此 python 腳本將刪除 vscode 上未安裝的擴充功能。 它適用於 VS Code、VS Code Insiders,也適用於 VSCod...
    程式設計 發佈於2024-11-06
  • 透過 GitHub Actions 按計畫更新網站內容
    透過 GitHub Actions 按計畫更新網站內容
    我想分享我建立一個自我永續的內容管理系統的旅程,該系統不需要傳統意義上的內容資料庫。 問題 該網站的內容(部落格文章和書籤)儲存在 Notion 資料庫中: 附書籤的資料庫 –  Notion UI 我試圖解決的問題是不必在添加每個書籤後手動部署網站。最重要的是 - 保持託管盡可能...
    程式設計 發佈於2024-11-06
  • 如何在 Laravel 5 應用程式的共享託管環境中清除快取?
    如何在 Laravel 5 應用程式的共享託管環境中清除快取?
    如何從 Laravel 5 中的共享託管伺服器清除快取清除快取對於維護 Laravel 應用程式的效能和效率至關重要。但是,在您可能無法存取 CLI 的共享託管環境中,清除快取可能是一個挑戰。 清除視圖快取的解決方法在這種情況下,您可以透過在 CLI 之外呼叫 Artisan 命令來解決此問題。要清...
    程式設計 發佈於2024-11-06
  • 如何加速 Matplotlib 繪圖以提高效能?
    如何加速 Matplotlib 繪圖以提高效能?
    為什麼 Matplotlib 這麼慢? 在評估 Python 繪圖庫時,考慮效能很重要。 Matplotlib 是一個廣泛使用的函式庫,它看起來可能很緩慢,引發了關於加快速度或探索替代選項的問題。讓我們深入研究這個問題並探索可能的解決方案。 提供的範例展示了具有多個子圖和資料更新的圖。使用 Matp...
    程式設計 發佈於2024-11-06
  • 使用畫布調整影像大小時如何克服鋸齒狀邊緣和模糊結果?
    使用畫布調整影像大小時如何克服鋸齒狀邊緣和模糊結果?
    解決在JavaScript 中使用Canvas 調整影像大小時的平滑問題在JavaScript 中使用Canvas 調整影像大小有時會導致明顯的鋸齒狀邊緣或模糊。為了實現平滑的調整大小,可以採用一種稱為向下步進的技術。 在大多數瀏覽器中,預設使用線性內插法來調整大小。雙三次插值可產生更平滑的結果,涉...
    程式設計 發佈於2024-11-06
  • 如何解決 MySQL C# 中的文字編碼問題?
    如何解決 MySQL C# 中的文字編碼問題?
    修復MySQL C# 中的文字編碼問題使用實體框架在C# 中處理MySQL 資料庫時,使用者可能會遇到文字編碼問題,特別是帶有特殊字符,例如“ë”,渲染不正確。本文探討了解決此常見問題的最合適的解決方案。 要修正編碼問題,必須執行以下操作:驗證排序規則設定: 確保所涉及的資料庫或表的排序規則與UTF...
    程式設計 發佈於2024-11-06
  • 如何將美麗搜尋與 Node.js 集成
    如何將美麗搜尋與 Node.js 集成
    作為 Node.js 開發人員,建立能夠提供快速且準確的搜尋結果的應用程式非常重要。使用者期望立即得到相關的回應,但實現起來可能具有挑戰性,特別是在處理大型資料集時。 這就是美麗搜尋的用武之地——一個為輕鬆滿足這些需求而構建的搜尋引擎。 什麼是美麗搜尋? Meilisearch ...
    程式設計 發佈於2024-11-06
  • 平行 JavaScript 機
    平行 JavaScript 機
    作者:Vladas Saulis,PE Prodata,克萊佩達,立陶宛 2024 年 5 月 18 日 抽象的 本文提出了一種新的程式設計模型,可以以簡單且自動平衡的方式利用多核心 CPU 系統。該模型還提出了一種更簡單的程式設計範例,用於在大多數大規模平行計算領域(例如天氣預報、核子物理、搜尋引...
    程式設計 發佈於2024-11-06

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3