用 React + Vite 搭建可演进的前端架构

在项目的早期，很多人会把所有逻辑塞进几个大组件里，跑得快，但到了中期就会越来越难改。这篇文章分享我的一套默认脚手架：按「页面 → 区块 → 组件」三层拆分，状态尽量下沉到最近的共同父级。

状态管理上，我不急于引入 Redux。先用好 React 自身的 useState / useReducer，配合 URL 作为一部分状态来源（搜索、筛选、分页都值得放进 query string）。只有当跨页面共享且变化频繁时，才考虑轻量的外部 store。

构建优化方面，Vite 的按需编译已经很快，但要注意把体积大的依赖（图表、编辑器）做动态 import，避免首屏被打爆。最后，给 CI 加上类型检查与构建，比任何文档都更能保证架构不被悄悄破坏。