響應工具、提示和最佳實踐，幫助您更快地構建應用

　　React 沒有為樣式、數據獲取、路由或動畫規定慣用的解決方案。您可以管理狀態和組件之間的關系，以執行需要執行的操作，并使用所需的任何其他工具執行此操作，并將結果呈現給 DOM。

　　換句話說，它提供了簡單性。

　　我看到了一件事情的美麗，它被設計成完全沒有主見，做一件事 - 并且完美地做那件事。

　　因為 React 的核心是微小的，所以作為開發人員，你可以做一些事情來在這個領域生存和實驗。以下是您可以使用 React 構建更快、更好、更具可擴展性的應用程序的五件事。

　　開始之前

　　讓我們先制定一些基本規則，這樣你就知道這不是什么。

　　我沒有涵蓋多年來一直被認為是必不可少的開發工具 - 例如ESLint / TSLint +更漂亮，React開發工具，Emmet等。有成千上萬的教程;他們是必須的。使用它們。

　　沒有開發環境建議。我在Windows 10系統上使用VS代碼，發現它適用于我。對于您來說，這可能是另一種組合，因為您已經擁有公司許可證。使用任何最有意義的東西;您的開發環境不會阻礙您。

　　沒有“使用這個特定的庫，因為它是任何一種行為(AG網格，反應查詢，反應鉤子表單等)的最佳建議。或樣式(材質UI、順風、引導等)。這些庫使用獨特不同的范例解決獨特不同的問題，以及選擇使用哪種工具來解決哪個問題，應該由您作為工程師決定。

　　1. 位

　　在Web開發中，你會遇到的最大的時刻是當你理解了 React 的可組合性范式并大聲思考時：如果 React 支持模塊化的、組件驅動的開發，為什么我不能從某種組件倉庫中獲取我需要的那些，然后用它們構建我的應用程序？

　　這是你會發現比特有用的時候。

　　Bit 是一個開源工具鏈和組件中心，它提供了一種簡單、可擴展的方式來創建、使用和共享組件，無論您的用例如何，也無論該用例在團隊和項目中的碎片化程度如何。

　　您可以使用 Bit 從頭開始構建整個應用程序，將每個組件創建為自己的單獨包。

　　最重要的是，您可以發現其他組件，這些組件由您自己或您的團隊創建，或者由在線提供其Bit組件的其他開發人員創建。

　　這個過程很簡單。您轉到 bit.cloud，瀏覽/搜索以發現最適合您項目的組件，嘗試它們，然后獨立導入，更新并使用它們來編寫任何項目 - 所有這些都帶有一個簡單的.npm install

　　想要發布和分享您自己的內容?偉大!使用位，您可以：

　　從邏輯上識別您的單個組件(或將它們分解，直到我們獲得盡可能小的單位，如自定義按鈕組件)，

　　使它們獨立于現有庫或應用的上下文，

　　然后，在 Bit 上構建、測試、版本控制并將它們作為單個包發布，該包將為您管理依賴項。

　　Bit 是以正確的方式進行組件驅動開發的理想選擇 - 具有易于發現、無限可重用/可擴展的組件。如果你想構建一些東西，比如 React UI 庫，甚至是整個設計系統，Bit 是我的首選解決方案。

　　上面的櫻桃？默認情況下，Bit上的任何內容都是樹可晃動的。想要純原子構建基塊來編寫你的應用?繼續前進，從您正在關注的表單組件中導入*僅*花哨的自定義按鈕。

　　2. 類型腳本

　　我知道你在想什么。“類型腳本如何幫助我更快地編碼？鍵入我的所有結構和功能不是很繁瑣和緩慢嗎？

　　有一個學習曲線，但TypeScript并不是一種完全陌生的語言，你需要幾個月才能弄清楚。從技術上講，任何 JavaScript 文件都是有效的 TypeScript 文件，因此遷移不需要是一個巨大的、一夜之間、生死攸關的過程。你可以逐步做到這一點，考慮到你得到的回報，時間投資根本不會是一個太大的成本：

　　1. 您可以更快地編寫代碼，因為您的 IDE 現在為您提供了更多幫助。

　　采用類型腳本就像增強 IDE 一樣。有沒有調用過真正具有未定義/空值的東西?是否曾經在 API 調用中包含錯誤的字段，或者發送錯誤的數據類型?JavaScript會非常樂意讓你繼續前進，你只會意識到生產中出了什么問題。但是，TypeScript 會產生簡潔的錯誤，讓您在編碼時確切地知道出了什么問題。

　　完全有效的JS，但不知何故，我懷疑“56”是你正在尋找的答案。當然，使用TS，您可以立即抓住這一點。

　　對于您的代碼和 JSX/TSX，對于您的所有道具，您都可以獲得無限更好的智能感知，即使您使用的是第三方庫和未知道具！在開發過程中，您將發現更多問題并支撐更多不可預測的行為，這比任何測試套件都能做到。

　　2. 重構現在是微不足道的。

　　因為如果您決定更改類型定義或添加新類型定義(或者您正在使用的第三方庫)類型腳本將在每個文件中產生簡潔的錯誤，那么您的IDE可以使用現在具有的新的，強大的重構選項一鍵解決。

　　3. 團隊合作現在是一件小事。

　　TS 使您的代碼具有自文檔性，并且可無限提高可維護性。入職培訓也得到了簡化，因為新員工可以跳進來，并立即對代碼庫的作用以及如何做有一個精確的了解。

　　使用類型腳本。簡單地說：沒有它，開發速度會更慢，更復雜，風險更大。

　　3. 代碼段

　　這很容易。在樣板上花費的時間更少;將其抽象為幾個擊鍵。相反，花更多的時間在重要的事情上：建立很酷的東西。

　　安裝擴展后，重新啟動 VS Code，然后可以通過鍵入快捷方式并按 Tab 或 Enter 來使用這些代碼段。

　　例如，“rafce”(如果您使用的是 TypeScript，則為“tsrafce”)用于使用箭頭函數語法的功能組件，并添加默認導出。

　　在此處查看快捷方式的完整列表。

　　4. 腳手架

　　基架是一個交互式CLI工具/ VS Code擴展，可讓您使用模板自動生成任何內容，盡管框架也是如此。您所要做的就是在項目根目錄中創建一個存根文件夾/文件結構，描述您要自動生成的內容(模板)，Scaffolder將立即為您創建它，同時在您想要的位置動態替換變量名稱。

　　下面介紹了設置 Scaffolder 以生成具有動態變量的樣板組件是多么簡單：

　　步驟 1：在項目根目錄的目錄中編寫模板。scaffolder

　　使用雙大括號表示變量名稱。此示例有一個“組件”模板，該模板將使用提供的名稱創建一個文件夾，該文件夾包含一個 JSX 和一個具有相同名稱的 CSS 文件。

　　這是我的CSS，組件邏輯和桶模板。

　　步驟2：進入您的組件目錄和.如果改用 VS Code 擴展，請右鍵單擊組件文件夾，然后單擊。然后，基架的交互式界面將接管并指導您完成命名過程。cdnpx scaffolder-cli iScaffolder : Use Template

　　第3步：恭喜！您已經成功生成了一個基本的組件結構，而無需手動創建一堆文件和一個文件夾。

　　最好的部分：這不是特定于組件(或React，甚至)的。你可以用它來創建實用程序函數、測試、鉤子、JSON/YAML配置文件，任何東西——只要你能為它編寫一個模板。

　　5. 最佳實踐

　　使用風格指南并堅持下去。

　　風格指南是項目的規則集，包含結構化導入順序的指令(例如，首先是第三方庫，其次是代碼庫導入，最后是 React 內部結構)，選擇使用內聯樣式，文件/文件夾/鉤子/組件/變量的命名約定，良好的目錄結構等。

　　無論您是獨立開發人員還是團隊的一員，風格指南始終確保代碼干凈、可維護。

　　您甚至可以考慮使用Bit創建一個僅包含設計令牌/ CSS變量的組件，并將其注入到所有組件中 - 這絕對是保持一致性的好方法！

　　將可重用的邏輯提取到自定義掛鉤中。

　　根據官方的 React 文檔：鉤子允許我們重用有狀態邏輯，而無需更改組件層次結構。因此，如果您有在多個位置處理狀態-組件關系的代碼，請將其提取到自定義掛鉤中。

　　舉個例子，這是我的鉤子。一個簡單的去抖程序，可以避免用請求沖擊外部服務器，可以在整個應用程序中的每個API請求中重復使用。useDebounce

　　你甚至可以創建自定義鉤子作為單獨的Bit組件，以提高可重用性！

　　使用 use還原器而不是 useState 如果您有復雜的狀態配置

　　如果你的狀態由非基元組成，如果你的 列表越來越長，如果你的下一個狀態依賴于前一個狀態，或者如果你有多個事件處理程序更新狀態：你最好實現鉤子來增強代碼的可讀性，并使調試狀態更容易，一舉。useStateuseReducer

　　停止使用“使用效果”重新創建組件DidMount()

　　無論你是在中斷后重新訪問 React，還是在移植遺留代碼，你都需要忘記古老的類組件范例。具體來說，這不是一種生命周期方法。它是道具和狀態的快照 — 一個 JavaScript 閉包，它只知道創建閉包時的閉包值是什么useEffect

　　獎勵：現在您知道為什么 需要一個依賴數組了 — 以避免過時的閉包)。因此，它最適合于同步 DOM 更新和網絡請求，而不是數據流。useEffect

　　結論

　　React確實是現代Web開發的標準，從某種意義上說，每個新框架都必須將自己與它進行比較并回答：“這有什么作用來幫助我使用模塊化技術大規模構建我需要的東西？

　　因此，這里的動機是分享一系列工具和實踐的組合，這些工具和實踐幫助我在這方面變得更快 - 使用模塊化，組件驅動的思維方式構建和發布東西 - 希望它們能幫助你做同樣的事情！