一个简洁、强大、可扩展的前端项目架构是什么样的

1、React技术栈的一大优势在于社区繁荣，你业务中需要实现的功能基本都 能找到对应的开源库。但繁荣也有不好的一面要实现同样的功能，有太多项选择择，到底选哪个？本文要介绍一个12.7k的开源工程 Bulletproof React这个工程为构建简洁、强大、可扩展的前端工程架构的方方面面给出了建议。欢迎加入人类高质量前端框架群，带飞Bulletproof React 是什么取也中“of Rea比与我们常见的脚手架（比方CRA）不同，后者的作用是根据模版 创立一个新工程。而前者包含一个完整的React全栈论坛工程:React Hook ForkvxForrvukReact Filial FormURL

2、状态URL状态包括：uH params (/app/$dynamicParam)qaerg /匕/s (/app?dynamicParam = l)这局部状态通常是路由库处理，比方react-routes-dowo总结本文节选了局部Bulletproof React中推荐的方案，有没有让你认可的观点呢?欢迎在评论区交流工程架构中的最正确实践。Log in to your accountEmail AddressRequiredPasswordRequiredLog inRegister作者通过这个工程举例，展示了与工程架构相关的13个方面的内容，比方:文件目录该如何组织工程化配置有什么推荐写业

3、务组件时该怎么规范怎么做状态管理AP/层如何设计等等 Application Overview0 Project Configuration Style GuideB Project Structure Components And StylingAPI LayerS State Management/ Testing! Error HandlingM Securityw Performance弹 Deployment西 Additional Resources限于篇幅有限，本文介绍其中局部观点。不知道这些观点你是否认同呢？文件目录如何组织工程推荐如下目录形式：十 assets#静态资源十 C

4、OkVpOMlt$#公共组件十一config#全局配置十 features#特性十 kooks#公用kooks十 lih#二次导出的第三方库十一一providers#应用中所有providers#路由配置十 stores#全局状态stores十 test#测试工具、Mock服务器+ - types十 utiVs#全局类型文件#通用工具函数其中，features目录与com?o八e八ts目录的区别在于：com?o八c八ts存放全局公用的组件，而features存放业务相关特性。比方我要开发评论模块，评论作为一个特性，与他相关的所有内容都存在于 features/co目 录下。评论模块中需要输入框

5、，输入框这个通用组件来自于方作阳八小区目录。所有特性相关的内容都会收敛到领演心目录下，具体包括：src/featu res/xxx-featu re+ - api#与特性相关的请求+ - assets#与特性相关的静态资源十 一，。出？。八ents #与特性相关的组件+ - utils#与特性相关的工具函数+ - i八dcx.ts# 入口特性导出的所有内容只能通过统一的入口调用，比方:一- kooks#与特性相关的kooks一- routes#与特性相关的路由+一-一 stores#与特性相关的状态stores一一 types#与特性相关的类型申明import Commc 八 4K ) fro

6、 ha /features/coiveits,1而不是：import ) froM /fc”九(rcs/co3MC八ts/cokp。八c八ts/CoMMotB4r这可以通过配置ESUt实现：(rules： -restricted -imports:zerrorSpattern： /feato(丫es/关/关口,)/其他配置)相比于将特性相关的内容都以扁平的形式存放在全局目录下(比方将特性的 hooks存放在全局hooks目录)，以色岫/es目录作为相关代码的集合能够有效 防止工程体积增大后代码组织混乱的情况。怎么做状态管理工程中并不是所有状态都需要保存在中心化的store中，需要根据状态类型区

7、别 对待。组件状态对于组件的局部状态，如果只有组件自身以及他的子孙组件需要这局部状态，那 么可以用use.State或useRcduccr保存他们。应用状态与应用交互相关的状态，比方翻开弹窗、通知、改变黑夜模式等，应该遵循将状 态尽可能靠近使用他的组件的原那么，不要什么状态都定义为全局状态。以Buhtproof React中的例如工程举例，首先定义通知相关的状态：/ 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).!)再在任何使用通知相关的状态的地方引用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/);这里使用的状态管理工具是加也八小 除此之外还有很多可选方案：context + hooksredux + redux toolkitiobxcostatejotairecoilxstate这些方案各有特点，但他们都是为了处理应用状态。服务端缓存状态对于从服务端请求而来，缓存在前端的数据，虽然可以用上述处理应用状态的工 具解决，但服务端缓存状态相比于应用状态，还涉及到缓存失效、序列化数据等 问题。所以最好用