React构建简洁强大可扩展的前端项目架构

引言

React

但繁荣也有不好的一面 —— 要实现同样的功能，有太多选择，到底选哪个？

本文要介绍一个12.7k的开源项目 —— Bulletproof React

这个项目为构建简洁、强大、可扩展的前端项目架构的方方面面给出了建议。

Bulletproof ReactCRA

React

作者通过这个项目举例，展示了与项目架构相关的13个方面的内容，比如：

API

限于篇幅有限，本文介绍其中部分观点。

不知道这些观点你是否认同呢？

项目推荐如下目录形式：

featurescomponents

componentsfeatures

features/comments

components

features

特性导出的所有内容只能通过统一的入口调用，比如：

而不是：

ESLint

features

项目中并不是所有状态都需要保存在中心化的store中，需要根据状态类型区别对待。

useStateuseReducer

与应用交互相关的状态，比如打开弹窗、通知、改变黑夜模式等，应该遵循将状态尽可能靠近使用他的组件的原则，不要什么状态都定义为全局状态。

Bulletproof React

useNotificationStore

zustand

contexthooks

reduxredux toolkit

mobx

constate

jotai

recoil

xstate

这些方案各有特点，但他们都是为了处理应用状态。

对于从服务端请求而来，缓存在前端的数据，虽然可以用上述处理应用状态的工具解决，但服务端缓存状态相比于应用状态，还涉及到缓存失效、序列化数据等问题。

所以最好用专门的工具处理，比如：

react-query - RESTGraphQL

swr - RESTGraphQL

apollo clientGraphQL

urqlGraphQl

表单数据需要区分受控与非受控，表单本身还有很多逻辑需要处理（比如表单校验），所以也推荐用专门的库处理这部分状态，比如：

React Hook Form

Formik

React Final Form

URL

url params

query params

react-router-dom

Bulletproof React