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

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

　　換句話說(shuō)，它提供了簡(jiǎn)單性。

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

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

　　開始之前

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

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

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

　　沒(méi)有“使用這個(gè)特定的庫(kù)，因?yàn)樗侨魏我环N行為(AG網(wǎng)格，反應(yīng)查詢，反應(yīng)鉤子表單等)的最佳建議?；驑邮?材質(zhì)UI、順風(fēng)、引導(dǎo)等)。這些庫(kù)使用獨(dú)特不同的范例解決獨(dú)特不同的問(wèn)題，以及選擇使用哪種工具來(lái)解決哪個(gè)問(wèn)題，應(yīng)該由您作為工程師決定。

　　1. 位

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

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

　　Bit 是一個(gè)開源工具鏈和組件中心，它提供了一種簡(jiǎn)單、可擴(kuò)展的方式來(lái)創(chuàng)建、使用和共享組件，無(wú)論您的用例如何，也無(wú)論該用例在團(tuán)隊(duì)和項(xiàng)目中的碎片化程度如何。

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

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

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

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

　　從邏輯上識(shí)別您的單個(gè)組件(或?qū)⑺鼈兎纸?，直到我們獲得盡可能小的單位，如自定義按鈕組件)，

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

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

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

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

　　2. 類型腳本

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

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

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

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

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

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

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

　　因?yàn)槿绻鷽Q定更改類型定義或添加新類型定義(或者您正在使用的第三方庫(kù))類型腳本將在每個(gè)文件中產(chǎn)生簡(jiǎn)潔的錯(cuò)誤，那么您的IDE可以使用現(xiàn)在具有的新的，強(qiáng)大的重構(gòu)選項(xiàng)一鍵解決。

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

　　TS 使您的代碼具有自文檔性，并且可無(wú)限提高可維護(hù)性。入職培訓(xùn)也得到了簡(jiǎn)化，因?yàn)樾聠T工可以跳進(jìn)來(lái)，并立即對(duì)代碼庫(kù)的作用以及如何做有一個(gè)精確的了解。

　　使用類型腳本。簡(jiǎn)單地說(shuō)：沒(méi)有它，開發(fā)速度會(huì)更慢，更復(fù)雜，風(fēng)險(xiǎn)更大。

　　3. 代碼段

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

　　安裝擴(kuò)展后，重新啟動(dòng) VS Code，然后可以通過(guò)鍵入快捷方式并按 Tab 或 Enter 來(lái)使用這些代碼段。

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

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

　　4. 腳手架

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

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

　　步驟 1：在項(xiàng)目根目錄的目錄中編寫模板。scaffolder

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

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

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

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

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

　　5. 最佳實(shí)踐

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

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

　　無(wú)論您是獨(dú)立開發(fā)人員還是團(tuán)隊(duì)的一員，風(fēng)格指南始終確保代碼干凈、可維護(hù)。

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

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

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

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

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

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

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

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

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

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

　　結(jié)論

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

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