作者：Yuri
发布日期：2024-04-05
全文字数： 2200
阅读时长：10min
Yuri 阅读
技术刊
方案对比
| 框架 | 原理 | 优点 | 缺点 |
|---|---|---|---|
| hooks context | 基于 react hook，开发者可实现内/外部存储 | 1. 使用简单 2. 不需要引用第三方库，体积最小 3. 支持存储全局状态，但在复杂应用中不推荐 4. 不依赖 react 上下文，可在组件外调用（外部存储的条件下） | 1. context value发生变化时，所有用到这个context的组件都会被重新渲染，基于 content 维护的模块越多，影响范围越大。 2.依赖 Context Provider 包裹你的应用程序，修改 store 无法在应用最顶层(App.tsx 层级)触发渲染 3. 受ui框架约束(react) 4. 依赖hooks调用 |
| react-redux | Flux思想，发布订阅模式，遵从函数式编程，外部存储 | 1. 不依赖 react 上下文，可在组件外调用 2. 支持存储全局状态 3. redux 本身是一种通用的状态解决方案 | 1. 心智模型需要一些时间来理解，特别是当你不熟悉函数式编程的时候 2. 依赖 Context Provider 包裹你的应用程序，修改 store 无法在应用最顶层(App.tsx 层级)触发渲染 3.受 ui 框架约束(react) |
| mobx | 观察者模式 + 数据截止，外部存储 | 1. 使用简单，上手门槛低 2. 不依赖 react 上下文，可在组件外调用 3. 支持存储全局状态 4.通用的状态解决方案 | 1.可变状态模型，某些情况下可能影响调试 2. 除了体积相对较大之外，笔者目前未感觉到较为明显的缺点，3.99M |
| zustand | Flux思想，观察者模式，外部存储 | 1. 轻量，使用简单，上手门槛低 2. 不依赖 react 上下文，可在组件外调用 3. 支持存储全局状态 4. 通用的状态解决方案 | 1.框架本身不支持 computed 属性，但可基于 middleware 机制通过少量代码间接实现 computed ，或基于第三方库 zustand-computed 实现 |
| jotai | 基于 react hook，内部存储 | 1. 使用简单 2. 组件颗粒度较细的情况下，jotai性能更好 3.支持存储全局状态 | 1. 依赖 react 上下文， 无法组件外调用，相对而言, zustand 在 react 环境外及全局可以更好地工作 2.受ui框架约束(react) |
| recoil | 进阶版 jotai,基于 react hook + provider context，内部存储 | 相对于 jotai而言，会更重一些，但思想基本不变，拥有一些 jotai 未支持的特性及 api，如： 1.监听 store 变化 2. 针对 atom 的操作拥有更多的 api，编程上拥有更多的可能性，更加有趣 | 拥有 jotai 所有的缺点，且相对于 jotai 而言: 1.使用 recoil 需要 < RecoilRoot > 包裹应用程序 2. 编写 selector 会复杂一些 |
| valtio | 基于数据劫持，外部存储 | 1. 使用简单，类mobx（类vue）的编程体验 2.支持存储全局状态 3.不依赖 react 上下文，可在组件外调用 4. 通用的状态解决方案 | 1.可变状态模型，某些情况下可能影响调试 2.目前笔者没发现其它特别大的缺点，个人猜测之所以star相对zustand较少，是因为 valtio 的数据双向绑定思想与 react 存在冲突。 |
相关建议
- 如果你需要useState+useContext的替代品，那么jotai非常适合，即原子化的组件状态管理或少量组件间状态共享。
- 如果你习惯了redux或喜欢react的自然不可变更新，那么zustand将非常适合。
- 如果你习惯了vue/ slute /mobx，或者是JS/React的新手，valtio的可变模型将很适合。
- 如果你在使用 zustand(redux/等不可变数据模型) + immer，建议改用valtio(mobx)
- mobx有actions概念，而valtio概念更为简单（自由），如果你希望工程更为规范，可以使用mobx，如果是希望工程更为自由便捷，可以使用valtio
- recoil与jotai的编程思想类似，但提供了更多的 api 与 特性，针对原子状态拥有更多的可操作性，同时包体积也更大，但由于recoil功能庞大，其使用相对于jotai会繁琐一些,如果你希望工程轻巧便捷可以选用jotai，如果你想试试原子状态更多的可能性，那么试试recoil吧。
文章阅读时长：10min
人民日报
- 本报北京4月4日电 （记者罗珊珊）记者从商务部获悉：今年前两月，我国服务贸易快速增长，服务进出口总额近1.2万亿元，同比增长22.8%。其中，出口4861.7亿元，增长17.9%；进口7049亿元，增长26.5%。
- 本报北京4月4日电 （记者吴秋余）为加大汽车消费金融支持力度，推动汽车以旧换新，稳定和扩大汽车消费，近日，中国人民银行、国家金融监督管理总局联合印发《关于调整汽车贷款有关政策的通知》（以下简称《通知》），明确金融机构在依法合规、风险可控前提下，根据借款人信用状况、还款能力等自主确定自用传统动力汽车、自用新能源汽车贷款最高发放比例。鼓励金融机构结合汽车以旧换新等细分场景，加强金融产品和服务创新，适当减免汽车以旧换新过程中提前结清贷款产生的违约金。
- 数字技术带来演艺创作、演艺空间和观演关系的深刻变化，促进艺术创意与科技手段的相互融合，为演艺精品的诞生提供更为绚丽的舞台和更为广阔的空间
随着文旅产业从观光度假向文化体验转变，文旅演艺领域沉浸式体验、场景化消费的趋势愈加明显，演艺与科技越来越深度绑定
推进演艺装备研制，加快研发数字演艺支撑技术和平台系统，舞台演艺的集成创新势在必行
Yuri 学习
🔗：useSyncExternalStore – React 中文文档
阅读时长：10min
Yuri 思考
Q： 你认为前端系统架构能力需要熟悉那些领域？
我的 140 字观点：要有深厚的前端技术广度和深度，能够设计出大中型的系统架构，对需求分享、沟通协调、团队管理都自己的感悟，探索新技术，善于解决问题，存有安全意识，保障项目按质按量按时的交付。想成为一个优秀的前端系统架构，第一步，研究透自己赛道上的竞品或 Kill App 是最快的方式。
- 感兴趣的同学欢迎分享观点
工具推荐
- 古诗文网
价值：读写传统文化精髓，站在巨人肩膀上，构建强大精神领域。以圣人为榜样，以自我为中心，度过分分秒秒。
招聘广告
- Base：上海
- 公司规模：100-499人
- HC：2（高级）
- BU：海外站点（SSR + Mobx + Zustand）
- 面试流程： 技术一面 + TL 二面 + HRBP
需要内推请加我微信联系或者邮箱联系
交流方式
微信：yuri0090
