大家好，我卡颂。
React但繁荣也有不好的一面 —— 要实现同样的功能，有太多选择，到底选哪个？
本文要介绍一个12.7k的开源项目 —— Bulletproof React[1]
这个项目为构建「简洁、强大、可扩展的前端项目架构」的方方面面给出了建议。
Bulletproof React是什么
Bulletproof ReactCRAReact作者通过这个项目举例，展示了与「项目架构」相关的13个方面的内容，比如：
API限于篇幅有限，本文介绍其中部分观点。
不知道这些观点你是否认同呢？
文件目录如何组织
项目推荐如下目录形式：
featurescomponentscomponentsfeaturesfeatures/commentscomponentsfeatures特性导出的所有内容只能通过统一的入口调用，比如：
而不是：
ESLintfeatures怎么做状态管理
项目中并不是所有状态都需要保存在「中心化的store」中，需要根据状态类型区别对待。
组件状态
useStateuseReducer应用状态
与应用交互相关的状态，比如「打开弹窗」、「通知」、「改变黑夜模式」等，应该遵循「将状态尽可能靠近使用他的组件」的原则，不要什么状态都定义为「全局状态」。
Bulletproof ReactuseNotificationStorezustandcontexthooksreduxredux toolkitmobxconstatejotairecoilxstate这些方案各有特点，但他们都是为了处理「应用状态」。
服务端缓存状态
对于从服务端请求而来，缓存在前端的数据，虽然可以用上述处理「应用状态」的工具解决，但「服务端缓存状态」相比于「应用状态」，还涉及到「缓存失效」、「序列化数据」等问题。
所以最好用专门的工具处理，比如：
react-query - RESTGraphQLswr - RESTGraphQLapollo clientGraphQLurqlGraphQl表单状态
表单数据需要区分「受控」与「非受控」，表单本身还有很多逻辑需要处理（比如「表单校验」），所以也推荐用专门的库处理这部分状态，比如：
React Hook FormFormikReact Final FormURL状态
URLurl paramsquery paramsreact-router-dom总结
Bulletproof React欢迎在评论区交流项目架构中的最佳实践。
参考资料
[1]
Bulletproof React: