获课：xingkeit.top/16357/
用 React 全家桶做完整前端业务，我踩过的坑和想明白的事
做前端这几年，我越来越觉得：React 全家桶（Hooks + Redux + AntD）真正考验人的，从来不是 API 会不会写，而是业务怎么分层、状态怎么管、组件怎么复用。如果只是照着文档拼功能，很容易做出一个“能跑但很难维护”的项目；真正成熟的做法，是把页面、状态、接口、交互逻辑拆开，让每一层只做一件事。
Hooks 不是炫技工具，而是把逻辑拆干净的手段
刚开始用 Hooks 时，很多人会陷入一个误区：把所有逻辑都塞进 useEffect 里，页面一复杂，依赖数组越写越长，状态互相影响，最后连自己都不敢改。
后来我才明白，Hooks 的价值不是“少写类组件”，而是让业务逻辑可以按功能聚合。比如一个列表页，可能包含搜索、分页、筛选、删除、刷新、权限判断等逻辑。如果全部写在页面组件里，页面会越来越臃肿；更合理的做法是把这些逻辑抽成自定义 Hook，让页面只负责“展示和组装”。
自定义 Hook 真正好用的地方在于：它把“这个功能怎么工作”和“页面长什么样”分开了。页面组件不需要关心请求怎么发、参数怎么拼、错误怎么处理，只需要关心当前数据是什么、用户点了什么。这样以后换 UI、改交互，甚至把同一套逻辑复用到别的页面，成本都会低很多。
Redux 不是所有项目都该上，但复杂业务里它很稳
Redux 经常被吐槽“太重”，但我认为这个评价并不准确。准确地说，是很多项目在不该用 Redux 的地方用了 Redux，或者用了 Redux 却没有设计好状态结构。
组件内部状态，比如输入框内容、弹窗开关、临时选中项，完全没必要放进 Redux；但像用户信息、权限、菜单、字典数据、全局消息、跨页面共享的业务状态，如果全靠 props 一层层传，项目一大就会非常痛苦。Redux 的价值就在这里：它提供了一个明确的全局状态中心，让“数据从哪来、谁修改、谁消费”变得可追踪。
做完整业务时，我更倾向于把 Redux 当作“共享状态层”，而不是“万能状态层”。页面里临时的 UI 状态留在组件内，跨模块、跨页面、需要持久化或需要被多个功能消费的状态再放进 Redux。这样既不会让 Redux 变得臃肿，也能避免组件之间反复透传 props。
另外，Redux 真正重要的不是写多少 action，而是状态设计要稳定。一个状态字段叫什么、放在哪个 slice 里、由谁更新、是否缓存，都应该提前想清楚。否则后期你会发现，明明只是改一个小功能，却要同时改好几个地方。
AntD 不是套模板，而是建立业务组件体系
AntD 最大的优势是组件成熟、风格统一、表单和表格能力强，非常适合中后台业务。但如果只是无脑堆 Table、Form、Modal，最后项目会变成一堆长得差不多、却很难复用的页面。
我后来做业务时，会把 AntD 当成“基础材料”，而不是“最终页面”。比如表格页，不应该每个页面都重新写搜索、分页、加载、空状态、错误处理；更合理的方式是封装一个业务表格组件，统一处理请求参数、分页、刷新、权限按钮和异常提示。表单也一样，应该把通用字段、校验规则、提交逻辑抽象出来，让业务页面只关心“这个表单有哪些字段、提交后做什么”。
AntD 真正好用的地方，是它降低了基础交互成本；但前端工程化的重点，是把这些基础交互进一步沉淀成团队自己的业务组件。否则项目越大，重复代码越多，改一个交互细节就要翻十几个页面。
真正完整的前端业务，是三层配合
Hooks、Redux、AntD 这三者并不是互相替代的关系，而是各有分工：
- Hooks 负责把组件逻辑拆清楚，让功能可复用、可测试；
- Redux 负责管理跨组件、跨页面的共享状态，让数据流更稳定；
- AntD 负责提供成熟的基础 UI 能力，让中后台页面快速落地。
三者配合起来，才是一个比较健康的 React 业务架构：页面组件尽量薄，业务逻辑放进自定义 Hook，共享状态交给 Redux，UI 交互交给 AntD 和封装好的业务组件。
我的看法
React 全家桶并不是“学会了就能做好项目”，它更像一套组织代码的方法。真正决定项目质量的，不是用了多少新特性，而是有没有把页面、状态、接口、组件边界划分清楚。
如果项目简单，没必要强行上 Redux；如果业务复杂，也不能只靠组件状态硬撑。Hooks 让逻辑更灵活，Redux 让状态更可控，AntD 让界面更统一。三者结合的关键，不是“全都用上”，而是在该用的地方用，在该收敛的地方收敛。前端做到后面，拼的不是 API 熟练度，而是对业务结构的判断力。
本站不存储任何实质资源，该帖为网盘用户发布的网盘链接介绍帖,本文内所有链接指向的云盘网盘资源，其版权归版权方所有！其实际管理权为帖子发布者所有，本站无法操作相关资源。如您认为本站任何介绍帖侵犯了您的合法版权，请发送邮件
[email protected] 进行投诉，我们将在确认本文链接指向的资源存在侵权后，立即删除相关介绍帖子！
暂无评论