響應(yīng)工具、提示和最佳實踐，幫助您更快地構(gòu)建應(yīng)用

　　React 沒有為樣式、數(shù)據(jù)獲取、路由或動畫規(guī)定慣用的解決方案。您可以管理狀態(tài)和組件之間的關(guān)系，以執(zhí)行需要執(zhí)行的操作，并使用所需的任何其他工具執(zhí)行此操作，并將結(jié)果呈現(xiàn)給 DOM。

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

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

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

　　開始之前

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

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

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

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

　　1. 位

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

　　這是你會發(fā)現(xiàn)比特有用的時候。

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

　　您可以使用 Bit 從頭開始構(gòu)建整個應(yīng)用程序，將每個組件創(chuàng)建為自己的單獨包。

　　最重要的是，您可以發(fā)現(xiàn)其他組件，這些組件由您自己或您的團隊創(chuàng)建，或者由在線提供其Bit組件的其他開發(fā)人員創(chuàng)建。

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

　　想要發(fā)布和分享您自己的內(nèi)容?偉大!使用位，您可以：

　　從邏輯上識別您的單個組件(或?qū)⑺鼈兎纸猓钡轿覀儷@得盡可能小的單位，如自定義按鈕組件)，

　　使它們獨立于現(xiàn)有庫或應(yīng)用的上下文，

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

　　Bit 是以正確的方式進行組件驅(qū)動開發(fā)的理想選擇 - 具有易于發(fā)現(xiàn)、無限可重用/可擴展的組件。如果你想構(gòu)建一些東西，比如 React UI 庫，甚至是整個設(shè)計系統(tǒng)，Bit 是我的首選解決方案。

　　上面的櫻桃？默認(rèn)情況下，Bit上的任何內(nèi)容都是樹可晃動的。想要純原子構(gòu)建基塊來編寫你的應(yīng)用?繼續(xù)前進，從您正在關(guān)注的表單組件中導(dǎo)入*僅*花哨的自定義按鈕。

　　2. 類型腳本

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

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

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

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

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

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

　　2. 重構(gòu)現(xiàn)在是微不足道的。

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

　　3. 團隊合作現(xiàn)在是一件小事。

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

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

　　3. 代碼段

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

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

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

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

　　4. 腳手架

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

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

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

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

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

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

　　第3步：恭喜！您已經(jīng)成功生成了一個基本的組件結(jié)構(gòu)，而無需手動創(chuàng)建一堆文件和一個文件夾。

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

　　5. 最佳實踐

　　使用風(fēng)格指南并堅持下去。

　　風(fēng)格指南是項目的規(guī)則集，包含結(jié)構(gòu)化導(dǎo)入順序的指令(例如，首先是第三方庫，其次是代碼庫導(dǎo)入，最后是 React 內(nèi)部結(jié)構(gòu))，選擇使用內(nèi)聯(lián)樣式，文件/文件夾/鉤子/組件/變量的命名約定，良好的目錄結(jié)構(gòu)等。

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

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

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

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

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

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

　　使用 use還原器而不是 useState 如果您有復(fù)雜的狀態(tài)配置

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

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

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

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

　　結(jié)論

　　React確實是現(xiàn)代Web開發(fā)的標(biāo)準(zhǔn)，從某種意義上說，每個新框架都必須將自己與它進行比較并回答：“這有什么作用來幫助我使用模塊化技術(shù)大規(guī)模構(gòu)建我需要的東西？

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