什么是前端状态管理

页面刷新或者跳转时不刷新 解决问题

• 将业务逻辑与view层解耦，方便后续维护
• 页面跳转或者刷新时，初始化状态有数据，优化用户体验

最后，笔者得到的最大启发有三点： 顺畅的开发体验就是一切。A smooth development experience is everything. 为需求服务，合理规划扩展性，不解决不存在的需求。 生命苦短，多学更重要的设计理念，少加班写代码。

如何做

技术方案

• api层，定义前端调用后端的方法
• store：将原先在页面内的数据抽离存储
  • rootStore：项目全局唯一的根存储
  • ui：页面的状态存储，建议每个页面独立
  • store：页面数据存储，建议每个页面独立
• view层：react等框架实现的视图层，以展示组件为主

项目结构

额外衍生 构建数据层，每个端项目只保留view层 抽离各个页面数据层

现有state管理库

参考的标准

• 有全局store管理功能，对应一个项目内全局状态
• 有独立的store管理功能，对应每个页面模块有自己的状态，且可以相互调用
• 支持组件store（每个实例化组件都有自己的store）
• 能够支持class和hooks
• 简化异步和同步数据变更
• 低学习成本
• 有最佳实践
• 不依赖Provider
• 通用，能够快速的迁移到其他库
• 较好的适配TS
• 包大小

zustand mobx easy-peasy constate unstated concent rxjs hox recoil unistore easy-peasy redux redux-toolkit Rematch dva

Flux系

MobX系

• mobX
• mst

React原生系

其他

前端深水区（Deepsea）React 状态管理库研究 React大型项目状态管理库如何选型 抛开 Vue、React、JQuery 这类第三方js，我们该怎么写代码 前端开发中如何做到领域逻辑的实现不依赖于具体框架 Web前端的服务层 前端为什么会有service层 中后台页面状态管理方案选型 使用concent，体验一把渐进式地重构react应用之旅