一個簡潔、強大、可擴展的前端項目架構(gòu)是什么樣的

1、React技術(shù)棧的一大優(yōu)勢在于社區(qū)繁榮，你業(yè)務(wù)中需要實現(xiàn)的功能基本都 能找到對應(yīng)的開源庫。但繁榮也有不好的一面要實現(xiàn)同樣的功能，有太多項選擇擇，到底選哪個？本文要介紹一個12.7k的開源工程 Bulletproof React這個工程為構(gòu)建簡潔、強大、可擴展的前端工程架構(gòu)的方方面面給出了建議。歡迎加入人類高質(zhì)量前端框架群，帶飛Bulletproof React 是什么取也中“of Rea比與我們常見的腳手架（比方CRA）不同，后者的作用是根據(jù)模版 創(chuàng)立一個新工程。而前者包含一個完整的React全棧論壇工程:React Hook ForkvxForrvukReact Filial FormURL

2、狀態(tài)URL狀態(tài)包括：uH params (/app/$dynamicParam)qaerg /匕/s (/app?dynamicParam = l)這局部狀態(tài)通常是路由庫處理，比方react-routes-dowo總結(jié)本文節(jié)選了局部Bulletproof React中推薦的方案，有沒有讓你認可的觀點呢?歡迎在評論區(qū)交流工程架構(gòu)中的最正確實踐。Log in to your accountEmail AddressRequiredPasswordRequiredLog inRegister作者通過這個工程舉例，展示了與工程架構(gòu)相關(guān)的13個方面的內(nèi)容，比方:文件目錄該如何組織工程化配置有什么推薦寫業(yè)

3、務(wù)組件時該怎么規(guī)范怎么做狀態(tài)管理AP/層如何設(shè)計等等 Application Overview0 Project Configuration Style GuideB Project Structure Components And StylingAPI LayerS State Management/ Testing! Error HandlingM Securityw Performance彈 Deployment西 Additional Resources限于篇幅有限，本文介紹其中局部觀點。不知道這些觀點你是否認同呢？文件目錄如何組織工程推薦如下目錄形式：十 assets#靜態(tài)資源十 C

4、OkVpOMlt$#公共組件十一config#全局配置十 features#特性十 kooks#公用kooks十 lih#二次導(dǎo)出的第三方庫十一一providers#應(yīng)用中所有providers#路由配置十 stores#全局狀態(tài)stores十 test#測試工具、Mock服務(wù)器+ - types十 utiVs#全局類型文件#通用工具函數(shù)其中，features目錄與com?o八e八ts目錄的區(qū)別在于：com?o八c八ts存放全局公用的組件，而features存放業(yè)務(wù)相關(guān)特性。比方我要開發(fā)評論模塊，評論作為一個特性，與他相關(guān)的所有內(nèi)容都存在于 features/co目 錄下。評論模塊中需要輸入框

5、，輸入框這個通用組件來自于方作陽八小區(qū)目錄。所有特性相關(guān)的內(nèi)容都會收斂到領(lǐng)演心目錄下，具體包括：src/featu res/xxx-featu re+ - api#與特性相關(guān)的請求+ - assets#與特性相關(guān)的靜態(tài)資源十 一，。出？。八ents #與特性相關(guān)的組件+ - utils#與特性相關(guān)的工具函數(shù)+ - i八dcx.ts# 入口特性導(dǎo)出的所有內(nèi)容只能通過統(tǒng)一的入口調(diào)用，比方:一- kooks#與特性相關(guān)的kooks一- routes#與特性相關(guān)的路由+一-一 stores#與特性相關(guān)的狀態(tài)stores一一 types#與特性相關(guān)的類型申明import Commc 八 4K ) fro

6、 ha /features/coiveits,1而不是：import ) froM /fc”九(rcs/co3MC八ts/cokp。八c八ts/CoMMotB4r這可以通過配置ESUt實現(xiàn)：(rules： -restricted -imports:zerrorSpattern： /feato(丫es/關(guān)/關(guān)口,)/其他配置)相比于將特性相關(guān)的內(nèi)容都以扁平的形式存放在全局目錄下(比方將特性的 hooks存放在全局hooks目錄)，以色岫/es目錄作為相關(guān)代碼的集合能夠有效 防止工程體積增大后代碼組織混亂的情況。怎么做狀態(tài)管理工程中并不是所有狀態(tài)都需要保存在中心化的store中，需要根據(jù)狀態(tài)類型區(qū)

7、別 對待。組件狀態(tài)對于組件的局部狀態(tài)，如果只有組件自身以及他的子孫組件需要這局部狀態(tài)，那 么可以用use.State或useRcduccr保存他們。應(yīng)用狀態(tài)與應(yīng)用交互相關(guān)的狀態(tài)，比方翻開彈窗、通知、改變黑夜模式等，應(yīng)該遵循將狀 態(tài)盡可能靠近使用他的組件的原那么，不要什么狀態(tài)都定義為全局狀態(tài)。以Buhtproof React中的例如工程舉例，首先定義通知相關(guān)的狀態(tài)：/ bulletproof-react/src/stores/iotificatio.tsexport co八st lAScNotificatio八St。夕。=wcateNotificati(msSto3(sct) = (notifi

8、cation: 口addNotificatioi: (notification =s況(stnte)二(ratifications: .state.八otificatio八s, id:八4八。以()sotificatio八)?),WisMissNatificati。八:(id)=set(state) = (notification: state.八atificati(ms.fi(ter(Aatificatio2 = laotificatioi.id /= id).!)再在任何使用通知相關(guān)的狀態(tài)的地方引用lASeNotificatioiStore,比方:/ hiAlletproof-react/

9、sirc/coipoMyts/Notification/Notificatiois.tsximport useNotificatioiStore frokv /stores/八otificaticm;import Notification fro% ./Notification1;export co八st Notification = ()=co八st notification, disMissNotificatio八二 nseNotificatio八Stoire。;return (八o力ficatio八s.儂叩(hotificatio八)= (Notificationkeg=(notific

10、atio 八.id八 atificati。八二notification。八 Dismiss=disMissNatificatioQ/八 atificati。八二notification。八 Dismiss=disMissNatificatioQ/);這里使用的狀態(tài)管理工具是加也八小 除此之外還有很多可選方案：context + hooksredux + redux toolkitiobxcostatejotairecoilxstate這些方案各有特點，但他們都是為了處理應(yīng)用狀態(tài)。服務(wù)端緩存狀態(tài)對于從服務(wù)端請求而來，緩存在前端的數(shù)據(jù)，雖然可以用上述處理應(yīng)用狀態(tài)的工 具解決，但服務(wù)端緩存狀態(tài)相比于應(yīng)用狀態(tài)，還涉及到緩存失效、序列化數(shù)據(jù)等 問題。所以最好用